Passing UTMs using Storefront API and Graphql

Has anyone found a way to pass UTM parameters to checkout using Shopify’s GraphQL APIs for attribution inside of Shopify?

Several users have asked about this in the old forum, so I thought I’d start a new thread. Example 1. Example 2.

Or perhaps all Shopify headless stores are stuck seeing a “source / medium” as (direct) / none or example.com / referral for all of their purchases inside of the Shopify dashboard and apps.

There is the cart permalinks that could potentially be used here:

You should be able to use cart links like that to start a checkout. I use them within URL redirects and similar scenarios that mask the URL used.

With that you should be able to pass the ref and you could use attributes for the UTM parameters.

You should be able to retrieve attributes via Web Pixels if you need to pass them elsewhere from the checkout.

Thanks, Rob. The cart/checkout permalinks won’t work.

We need to use GraphQL as we’re headless and must pass information like selling plans to check out, which the permalink solution doesn’t support.

You can add selling plans with items, straight to checkout using a link — also one of the main reasons why I love Shopify. That’s not an issue, just setup differently, I even mentioned doing so in a different thread where I use a /join URL redirect that does so.

I can provide an example URL if you would like.

If you’re using the Storefront API you should be able to add attributes to the cart that way as well.

Ok, thank you for the suggestion of using liquid redirects. I had always thought that was impossible per Shopify’s reference on cart permalinks, but I had never thought of redirecting with our own liquid code.

Unfortunately, for this store, we’re stuck being a headless Shopify Storefront API GraphQL store. Carts and checkouts need to be GraphQL mutations.

Well, it’s probably the specific type of link Shopify is referring to there which is where it probably doesn’t work but something like this:

/cart/add?id=123456789&selling_plan=123456789&quantity=1&return_to=/checkout is the format of URL I was referring to… It’s different but the kind I always use where applicable. (I consider it a permalink…)

Now, if Shopify ever removed such functionality I would be devastated. It will hopefully remain forever…

That said this link suggests you can modify attributes for the cart using the Storefront API.

I also, have used such cart URLs as I have described before to add products and go to checkout while on headless stores. For those I just need to use the permanent domain of the storefront and it works just fine. (My guess is that those end up being “Online Store” orders instead of the other sales channel though so it may not work in all cases…)