Tracking Sales with UTM Parameters using Buy Button

[TropicSnowman]

Hello,

I am trying to pass UTM parameters in the Buy Button checkout URL to track sales from different sources. For example, I will have the same Buy Button Code on three other sites and want to track sales for each. I have tried manipulating the URL using the following event function, but the landing_site or UTM tracking parameters are not working or do not work with the Buy Button. For context, I use the same code for the Online Store and can see tracking in the reports. Also, the code below allows me to pass the URM parameters in the URL. However, Shopify is not recognizing them in the reports.

"events": {
      afterInit: (cart) => {
        cart.onCheckout = () => {
          const checkoutUrl = cart.model.webUrl + '?utm_campaign=dune_test&utm_id=12345&utm_medium=affiliate_buybutton&utm_source=fandango';
          cart.checkout.open(checkoutUrl);
        };
      },
    },

Does anyone know or have had experience or success tracking sales with Google Analytics or UTM parameters from Buy Button?

[frishtik]

have the same question

[rplakas]

There was a guide someone wrote a few years ago. I tried it but could not get it to work: https://trackfunnels.com/how-to-pass-utm-parameters-into-product-shopify-buy-button-checkout/

[trackfunnels]

Hi folks 👋 , I've updated the solution I previously posted with a new approach, as it appears that the afterInit hook no longer provides access to the checkout URL for manipulation. I explored several other hooks as well, but unfortunately, none of them met our needs. Therefore, the revised solution now utilizes the Button Destination Component to handle UTM parameters effectively. You can check out the updated guide here: Enhancing Shopify Buy Button with UTM Parameters - Version 2. I'm eager to hear your thoughts and any feedback on this revised method!"

[michaeljonathanblack]

We took a similar approach (overriding buttonDestination), although we ran into a couple issues:

1. For whatever reason, we were only seeing the UTM parameters show up in the Shopify dashboard if we used a /cart url rather than the /checkouts url generated by checkout.webUrl, so we did this instead:

const openCheckout = (that): void => {
    // We're overriding `buttonDestination: "checkout"` to incorporate our referralTrackingQueryParams.
    // @see: https://github.com/Shopify/buy-button-js/blob/master/src/components/product.js#L665-L686
    that._userEvent("openCheckout");
    that.props.tracker.track("Direct Checkout", {});

    const selectedVariantShortId = that.selectedVariant.id.replace("gid://shopify/ProductVariant/", "");
    const selectedQuantity = that.selectedQuantity;
    const { domain } = ui.config;
    const checkoutUrl = appendQueryString(
        `https://${domain}/cart/${selectedVariantShortId}:${selectedQuantity}`,
        referralTrackingQueryParams,
    );
    log("checkoutUrl", checkoutUrl);

    const windowFeatures = ui.components.cart[0].checkout.params;
    log("windowFeatures", windowFeatures);

    window.open(checkoutUrl, "checkout", windowFeatures);
};

A small upside here is the url is generated synchrously, so the pop-up immediately loads its destination rather than rendering blank while waiting for the follow-up async call. Unclear if there are downsides to using this flow, however.

2. The UTM params were also never being picked up if a user had adblock enabled, which makes sense since adblock will generally suppress google tracking scripts. Just something to keep in mind if you're performing any testing and feeling slightly insane 🐨

[danielehrhardt]

Some update here?

[joker-777]

@trackfunnels Unfortunately, your updated version doesn't work either. We see the utm tags in the URL but they aren't getting tracked.
@michaeljonathanblack I also tried your suggestion but the generated URL doesn't work.

[trackfunnels]

Hi @joker-777 can you elaborate what you mean by you see UTM tags in the URL but arent getting tracked? When UTMs are passed into the URL, GA4 will automatically pick them up.

[joker-777]

@trackfunnels We definitely can see the utm params in the URL when getting redirected to the checkout page.

But then they aren't getting tracked in shopify