Cross Domain Tracking Not Working With 'cart/add' Form Due to Redirect

Highlighted
Shopify Partner
9 0 2

I've spent hours reading the numerous discussions here based on cross domain tracking but cannot find anywhere with a solution to our problem.

We've got cross domain tracking successfully set up for links between our main, non-Shopify website and our Shopify site, but when using the Add to cart form on our main site, which redirects to the cart page hosted on Shopify, this breaks.

The form on the site looks like this:

<form action="https://london-flower-school.myshopify.com/cart/add" method="post">  
  [...]
  <button type="submit">Add to basket</button>
</form>

We do have 'Decorate Forms' enabled in our GA script and when the 'Add to basket' button is pressed you can see the cross domain URL parameter being added to the form action like it should be, but when the user then gets redirected to the cart page, this parameter is not copied across.

I can't find anywhere that allows us to intercept/control this redirect process.

What can we do to ensure the URL parameter is being used when the redirection to the cart page happens?

1 Like
Highlighted
Shopify Expert
9925 103 1764

I suspect you'd need to use JavaScript to

  • stop the default submit acton from triggering
  • trigger your tracking event
  • fire the submit action on the form

Out of interest, why are you not using the Buy Button or JS BUY SDK? Both of those are built for those times when you want to have a Shopify experience enabled on non Shopify sites.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
Shopify Partner
9 0 2

Thank you for your reply Jason.

The problem isn't that the tracking event isn't triggered, that works as expected and the GA script appends the cross domain tracking parameters to the form action on submit as it should.

However, the cart/add form action has a redirect to the /cart page as its last step and this does not copy across the cross domain tracking parameters which breaks the session/starting a new one. I don't think there is anywhere to control this redirect step and this is set up at Shopify’s end.

I did try the Buy Button code, but this uses iFrames and pop-ups, which again break the cross domain tracking.

I wasn't aware of the JavaScript Buy SDK, and it looks like it could be a solution, but I am running into problems getting it to work fully.

I have added the following code to the product page hosted on the non-Shopify site:

<script src="//sdks.shopifycdn.com/js-buy-sdk/v0/latest/shopify-buy.umd.polyfilled.min.js"></script>
<script>
  $(function() {

    var shopClient = ShopifyBuy.buildClient({
      domain: 'london-flower-school.myshopify.com',
      accessToken: 'xxxx',
      appId: '6',
    });

    var cart;
    shopClient.createCart().then(function (newCart) {
      cart = newCart;
    });

    function addItemToCart(variant) {
      console.log(variant);
      cart.createLineItemsFromVariants({ variant: variant, quantity: 1 });
      console.log(cart);
      console.log(cart.lineItemCount);
      console.log(cart.checkoutUrl);
      // window.open(cart.checkoutUrl, '_self');
    }

    $('[data-js="course-booking-form"]').submit(function(event) {
      event.preventDefault();
      var selectedProductVariant = $(this).find('input[name="id[]"]:checked').val();
      addItemToCart(selectedProductVariant);
    });
  });
</script>

When submitting the form I can see that items are added to the cart object, but when I then go the actual cart page at london-flower-school.myshopify.com/cart, it says that the cart it empty.

When I try and open the cart using the cart.checkoutUrl, I get a 410 - Link expired pagewhich is probably because for some reason it does not include the variant ID, instead it says undefined:

https://london-flower-school.myshopify.com/cart/undefined:1?access_token=4c…3b1323d9&_fd=0&_ga=2.256...

(It does however include the correct cross domain tracking parameters, which is great news...)

What step(s) am I missing?

0 Likes
Highlighted
Shopify Expert
9925 103 1764

The cart that you generate through the JS BUY SDK is not an online storefront cart - meaning that you can't add things to the cart with the JS, and expect them to turn up in a cart on the parent store. Think of it more like a permalink. You'd need to generate the checkout url via the JS BUY SDK, and redirect the customer to that url. It looks like you're doing that.

Are you sure the products you're adding to the cart are visible on the buy channel?

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
Shopify Partner
9 0 2
Highlighted
Shopify Partner
9 0 2

Studying the SDK guide further, it looks like the createLineItemsFromVariants method needs a variant object, so just passing an ID here isn't going to work...

Trying to find a way to work around/with this somehow, but this is all turning into a huge amount of work. I am going to contact the Shopify developers to see if they can amend their cart/add action script at their end...

0 Likes
Highlighted
Shopify Partner
9 0 2

I did eventually get the adding to the cart via the SDK to work, but then I was faced with the problem of not having a 'proper' server-side cart to use across the site and direct people to without having to do some major custom coding work. It just all started to feel quite hacky and convoluted.

I then remembered the return_to input I used on a different site before which prevented the cart/add form from directing to the cart page but going back to current page like this:

<input type="hidden" name="return_to" value="back">

And even though not documented, I thought maybe this input would accept a path value too. And hey presto, that worked! Such a simple solution. Often the hardest to find...

For anyone coming across this in the future, this is our working set-up now:

To enable cross domain tracking we have this Google Analytics code on our main, non-Shopify site:

<script async>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-XXXX', 'auto', {'allowLinker': true});
  ga('require', 'linker');
  ga('linker:autoLink', ['our-store.myshopify.com'], false, true);
  ga('send', 'pageview');
</script>

And within the Shopify Google Analytics settings, we have this additional code inside the Additional Google Analytics Javascript field:

ga('require', 'linker');
ga('linker:autoLink', ['our-site.com'], false, true);

 

On our main site's product pages we use this form to add products to the store’s cart:

<form action="//our-store.myshopify.com/cart/add" method="post">  
  [...]
  <input type="hidden" name="return_to" value="/cart">
  <button type="submit">Add to basket</button>
</form>

To ensure that the redirect inherent with the cart/add form action doesn't break the cross domain tracking, we replace the value of the return_to input like so:

<script>
  $(function() {
    ga(function (tracker) {
      var linkerParam = tracker.get('linkerParam');
      $('form').find('input[name="return_to"]').val('/cart?' + linkerParam);
    });
  });
</script>

 

0 Likes