d
Topic
Posts:
10
April 11, 2017
g
1
upvotes

Using a custom Google Analytics code with Buy Button

Saw something similar here: https://ecommerce.shopify.com/c/ecommerce-marketing/t/buy-button-google-analytics-sales-tracking-327738

but the answer doesn't actually give any information.

My question is, can one add custom GA code to the checkout page that customers a directed to when you use the 'buy button' method of selling on shopify? The second link from the answer to the above question does contain some info about linking accounts cross-domain, but says nothing about getting the GA code into the shopify checkout page. What I'm looking for is something analagous to the 'Google Analytics' section of the Preferences tab on the 'Online Store' section of a shopify admin, but in the 'Buy Button' section instead.

Is it possible to get some custom GA code onto the buy button checkout page?

i
Replies
Posts:
320
April 17, 2017
g
1
upvotes

You can as normal (Google Analytics section of Shopify or even a GTM tag that triggers the event on a URL) just like if you weren't using the Buy Button. One problem you should be aware of is the Buy Button doesn't permit cross-domain tracking due to iframe issues not transferring cookies. 

Want to increase your Shopify conversion rate? Get the most detailed guide for free that stores have used to double their sales at: https://www.digitaldarts.com.au/shopify-conversion-rate-optimization
rd Member
Posts:
4
11 months ago

Awesome reply Joshua. Thanks!  A couple follow up questions:

1. So, if you use your GA code on shopify in the anatyics section, will it be used in the cart/ checkout pages? How does this look from an analytics point of view? Is it like the main store page is a referrer to the shopify cart?  What if you used the same GA code?

2. If someone bought something from a buy button and didn't interact with the site in any other way, would it be considered a bounce, since the button is part of an iframe?

Thanks!

Posts:
10
Last edited 11 months ago

So the suggested answer isn't accurate because there isn't any Google Analytics section in the 'buy button' section of the admin (which was really my original question).

I did find a way to do it, however, using the 'Additional Scripts' section (Settings -> Checkout -> Order Processing -> Additional Scripts). This section lets you add any JS you want to run on the Thank You page. Due to cross-origin stuffs with sensitive data on the actual checkout page, you cannot put custom code there. BUT. Our saving grace is that the Shopify object is accessable from the thank you page, and it still has all of the cart data.

Thus, my solution:

 

<script>
    (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');

    // your GA code replaces 'UA-XXXXXXXX-X'
    ga('create', 'UA-XXXXXXXX-X', 'auto', {'allowLinker': true});
    ga('require', 'linker');
    // your domain replaces 'domain.com'
    ga('linker:autoLink', ['domain.com'] );
    ga('send', 'pageview');

    ga('require', 'ecommerce');

    var checkoutObj = window.Shopify.checkout,
        lineItems = checkoutObj.line_items

    if (checkoutObj)
        // I'm using the checkout object to pull order-wide data.
        // (you can find other available params in the Shopify JS API)
        ga('ecommerce:addTransaction', {
          'id': checkoutObj.order_id,
          'affiliation': '',
          'revenue': checkoutObj.subtotal_price,
          'shipping': checkoutObj.shipping_rate.price,
          'tax': checkoutObj.total_tax
        })

    if (lineItems)
      for (var i = 0; i < lineItems.length; i++){
          var line_item = lineItems[i]
          // and I'm using the lineItem objects to get individual item data
          // (you can find other available params in the Shopify JS API)
          ga('ecommerce:addItem', {
              'id': line_item.product_id,
              'name': line_item.title,
              'sku': line_item.sku,
              'category': '',
              'price': line_item.price,
              'quantity': line_item.quantity
          });
      }

    // ayy, send the data we we're trying to get!
    ga('ecommerce:send');
</script>

 

I'll answer these questions to the best of my knowledge:

"So, if you use your GA code on shopify in the anatyics section, will it be used in the cart/ checkout pages? "

No, the custom code you add to shopify will only be run on the Thank You page, the one after the user has completed check out. This is for security reasons, so you're not running malicious code on pages with sensitive data.

"If someone bought something from a buy button and didn't interact with the site in any other way, would it be considered a bounce, since the button is part of an iframe?"

Haha reading this makes me hope I'm not just confused about what's what in shopify. I can only speak to my own implementation, but the buy button isn't an actual iframe, it's more of an API interaction. You build whatever button you want in your site, and when clicked, you make the proper API call. Then, when the user goes to checkout, they are taken off of your own domain and onto the shopify domain to handle credit card stuff. So you would put a GA event on that button click and log it yourself, then let shopify handle it's part, and then you can do something like my code above outlines to get more GA data.

 

rd Member
Posts:
4
11 months ago

Wow. THANK YOU.

And then I need to alter the original ga code on the main domain right? Per this article?

https://support.google.com/analytics/answer/1034342?hl=en

Do you know about the answer to my other question about bounces? Set up as is, would GA consider a click on the button as an event, or would GA not be able to see that "event" because it's in an iframe?

 


 

Posts:
10
11 months ago

No problem, I couldn't find how to do this documented anywhere so I hope others can speed thru it with this.

And, correct, follow that article to set things up on your main domain.

I edited my question with an answer about bounces, but take it with a grain of salt as I'm learning this as I go haha.

 

Posts:
4
Last edited 6 months ago

Hello, 

Just a quick question regarding the cross domain tracking : on the main domain, should the code be : 

<script>

(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','//www.google-analytics.com/analytics.js','ga');

ga('create', ''UA-XXXXXXX-Y'', 'auto', {'allowLinker': true});
ga('require', 'linker');
ga('linker:autoLink', ['checkout.shopify.com'] );
ga('send', 'pageview');

</script>

 

I am not sure of the "ga('linker:autoLink', ['checkout.shopify.com'] );"

 

Thanks

Posts:
3
12 days ago

Hello Leseneachal,

you weren't sure about the correctness of your code. Did it eventually work out fine? 

How can one test if it does and what would happen if that code doesn't work while the one inside the shopify additional script section does?

you can also e-mail me (simon.sparber@gmail.com) for an answer. This is pretty urgent and I am a very beginner...!

Posts:
3
12 days ago

Hello Joshua,

here is Simon. Could you help me out with adding the right GA tracking both in the additional scripts section (as I am only using shopify lite version/ buy button) and on my squarespcace website? 

Just e-mail me (simon.sparber@gmail.com) for the details. Ready to pay you for this.

Posts:
10
Last edited 10 days ago

Hi,

Yes the code chunk you pasted is the correct code for the main page. You have to replace the code

UA-XXXXXXX-Y

with your own GA tracking code. The line

ga('linker:autoLink', ['checkout.shopify.com'] );

can be left as is. It tells the GA account to link to the shopify checkout domain (I assume it whitelists checkout.shopify.com so that when the code you placed on that page calls this domain, it is allowed).

 

wow 5 months late haha sorry I missed it at the time.