If been following this topic, Google Analytics Tracking with Shopify Buy Button for a long time and surprised that there really isn't any official support. Anyway this post is helpful! I also wanted to share that with some of our own torubleshooting and trying to get FB tracking pixels to work you can actually "embed" the Shopify Buy Button as part of the DOM and not rely on the iframe injection.
https://shopify.github.io/buy-button-js/advanced/
There are a few things...
You can add DOM events (if you continue to use the iframe injection)
var product = {
DOMEvents: {
'click .button': function (event) {
myAnalyticsLibrary.track()
}
}
}or if you declare that you don't want to use the iframe at that point the markup is part of the DOM and you could add any type of custom event via GA or GTM.
var options = {
product: {
iframe: false
},
cart: {
iframe: false
}
}Hope this helps or sparks a new idea.
Shopify Discussion
Partners and Developers
Shopify Lite Buy Buttons don't play nice with Google Analytics, because they're actually a <button> inside an <iframe>. Yes, you can pretty easily pull ecommerce info from the Thank You page into Analytics, but that doesn't give you the referrer URL, which is our goal here.
Some have suggested inserting a "listener" script into the Shopify button code (thus, it's inside the <iframe>) to communicate an event to the main page on click of the <button>. But this becomes unwieldy if you have several hundred products like us, since it requires you to edit the Shopify code on each page individually … that's a LOT of data entry. Also, I got console errors on every one of these I tried to implement.
Luckily, there's another way. The hook I found is in the <div> surrounding the cart's <iframe> (thus, NOT inside the <iframe>), which has a class change from inactive …
<div class="shopify-buy-cart-wrapper shopify-buy-frame shopify-buy-frame--cart">
… to active, adding "is-active is-initialized" classes:
<div class="shopify-buy-cart-wrapper shopify-buy-frame shopify-buy-frame--cart is-active is-initialized">
The method described here triggers a Google Tag Manager event when that CSS selector changes in the DOM … effectively, every time the Buy Button is clicked and the cart opens.
Here's how to implement it:
Make sure your Google Tag Manager code appears in the <head> on each page the Buy Button is on. This is easiest by putting it in a global header. Replace the XXXXXXXX-X with your own ID number.
<!-- Google Tag Manager-->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->
Make a new "property" in Google Analytics to track Shopify buttons. Ours is called "Shopify Buttons".
Make sure the Google Analytics code for that property appears in all the Buy Button pages' <head> areas, too:
<!-- Google Analytics Start-->
<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');
// OPTIONAL Analytics code for the Main Site 'property' is UA-XXXXXXXX-X, also change mywebsite.com
ga('create', 'UA-XXXXXXXX-X', 'mywebsite.com');
ga('send', 'pageview');
// Analytics code for the Shopify Buttons 'property' is UA-XXXXXXXX-X, also change mywebsite.com
ga('create', 'UA-XXXXXXXX-X', 'mywebsite.com');
ga('send', 'pageview');
// OPTIONAL Analytics code for the Shopify Thank You 'property' is UA-XXXXXXXX-X
ga('create', 'UA-XXXXXXXX-X', 'auto', {'allowLinker': true});
ga('require', 'linker');
ga('linker:autoLink', ['checkout.shopify.com'] );
ga('send', 'pageview');
</script>
<!-- Google Analytics End -->
In Google Tag Manager, create a new Tag with these specs:
TItle: DOM Scraper Tag - Shopify Cart Opens (or whatever)
Tag Type: Google Analytics: Universal Analytics
Track Type: Event
Category: Cart Open (or whatever)
Action: Buy Button Click (or whatever)
Label: {{Page URL}}
Value:
Google Analytics Settings: {{Google Analytics Shopify Buttons Property}} (or whatever you call it)
Trigger: {{DOM Change Trigger - Shopify Cart Opens}} (or whatever you call it)
At the bottom of that interface, the Tag references the new Trigger you'll also need to make:
Title: DOM Change Trigger - Shopify Cart Opens (or whatever)
Trigger Type: Element Visiblity
Selection Method: CSS Selector
Element Selector: div.shopify-buy-cart-wrapper.shopify-buy-frame.shopify-buy-frame--cart (note this does NOT include the is-visible and is-initialized classes!)
When to fire this trigger: Every time an element appears on screen (so it keeps tracking when people close the cart then hit the buy button again)
Minimum Percent Visible: 1
Observe DOM Changes TOGGLED
All Visibility Events TOGGLED
References to this Trigger: {{DOM Scraper Tag - Shopify Cart Opens}} (or whatever you called it)
And also near the bottom of the Tag interface, it connects to the new Variable for the Google Analytics property you also need to make, replacing XXXXXXXX-X with your own ID number:
Title: Google Analytics Shopify Button Property (or whatever)
Variable Type: Google Analytics Settings
Tracking ID: UA-XXXXXXXX-X
Cookie Domain: Auto
References to this Variable: {{DOM Scraper Tag - Shopify Cart Opens}} (or whatever you called it)
Also in Variables, make sure you have Event, Page Hostname, Page Path, Page URL, and Referrer checked.
Publish it, and you should be good!
Note that this triggers every time a product is added to the cart via Buy Button, including when the user closes the cart then clicks the Buy Button again. I set it up this way because I offer both print and PDF product variants, so I want to make sure I'm catching both when they load into the cart.
And another thing to remember is that the event is triggering when the cart <iframe> opens (via Buy Button click), NOT when the checkout popup window opens (via Checkout click), which I couldn't find an easy hook for. But if you also implement Thank You page tracking, that means you can get interesting info on how many people add a product to their cart but don't actually buy it!
Thank You page tracking instructions that worked for me are here: https://community.shopify.com/c/Ecommerce-Marketing/Using-a-custom-Google-Analytics-code-with-Buy-Bu...
Enjoy!