Capturing UTM Parameters in Shopify's landing_site field with order webhook

In Shopify, you can easily add UTM tracking parameters to your product links and capture them in the landing_site field when you receive an order webhook.

Here is a quick way to do so:

1. Login to your Shopify store and go to the “Online Store” section.
2. Click on “Preferences” and scroll down to the “Google Analytics” section.
3. Under “Additional Google Analytics JavaScript”, add the following code:

This code will capture the UTM parameters from the URL when the customer first accesses your store and set them as custom variables in Google Analytics.

4. Save the changes and go to the “Settings” section of your store.
5. Click on “Checkout” and scroll down to the “Order processing” section.
6. Under “Additional scripts”, add the following code:

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
var utm_params = new URLSearchParams(window.location.search);
if (utm_params.has('utm_source') && utm_params.has('utm_campaign')) {
var landing_site_field = document.querySelector("#checkout_shipping_address_landing_site");
if (landing_site_field) {
landing_site_field.value = window.location.href;
}
}
});
</script>

This code will capture the UTM parameters from the URL when the customer places an order and store the URL in the “landing_site” field of the shipping address.

7. Save the changes. Grab a coffee.