How-To

How to Implement Google AdWords gtag.js on Shopify

See how to implement the new AdWords gtag sitewide and gtag conversion snippet in Shopify.

Brad Redding

Brad Redding is the Founder & CEO of Elevar. Specializing in analytics, tracking, GTM, and conversion optimization.

last updated 5/3/2019

Gtags, conversion tags, gtm tags, data layers, conversion linker, Javascript. Is your head spinning with all of the tag talk?

You’re not alone. In the world of tagging and conversion tracking, all of the constant changes can be quite overwhelming!

This post shows you how I’ve implemented the AdWords conversion tag using the new gtag.js version. Moving to gtag.js isn’t mandatory, but it’s something you’ll likely want to do (eventually) to keep up with the latest Google best practices.

In order to implement gtag conversion tags you’ll need to ensure you have the global remarketing gtag script implemented as well. I show how to do this (along with gtag) in this related post here.

There are two steps to implement gtag.js AdWords conversion tracking:

  1. Implement global Adwords gtag.js
  2. Implement AdWords gtag.js purchase conversion events

You’ll need access to:

  1. Google AdWords
  2. Shopify Admin
  3. Google Tag Manager (if you want to implement via GTM)

Step 1: Ensure Sitewide gtag Implemented

If you are planning on, or have already implemented dynamic remarketing for AdWords using the new gtag.js version, then you can skip this step.

If you do not have any AdWords remarketing tags implemented yet then proceed!

Option a)

If you’ve already updated your Google Analytics tracking code to the new gtag version then you can copy this snippet from AdWords:

NOTE: If you are copying the GA gtag into the Shopify admin and you’re concerned about Shopify’s gtag support then implement via option b to ensure the global gtag is in place. As of the last update on this post, Shopify was not supporting the gtag when copying your GA code into the Shopify Google Analytics configuration settings in the admin.

gtag-snippet-for-ga

Into your “Additional Scripts” setting within Shopify:

adwords-snippet-gtag-in-shopify

Option b)

You can copy the full gtag script shown below:

full-gtag-remarketing-tag-for-shopify

And paste into a Custom HTML tag in GTM:

adwords remarketing gtag

Step 2: Implement Conversion Snippet gtag Event

You have two options for this step as well:

  1. Implement in Shopify Admin
  2. Implement via GTM*

*Please note that this step has many dependencies – like if you are using dynamic remarketing Adwords events, etc. The most important thing is if you are implementing the conversion snippet via GTM then be sure you have the sitewide gtag.js snippet firing before your conversion event data. I show how to do this below.

Option a) Implement via Shopify Admin

You can implement within the Shopify admin directly in the Checkout scripts section. Just copy your Event snippet from AdWords:

gtag conversion event snippet

Replace the value, currency, and transaction_id variables:

<script>
 gtag('event', 'conversion', {
 'send_to': '[insert your own ID here]',
 'value': {{ total_price | money_without_currency | remove: ',' }},
 'currency': 'USD',
 'transaction_id': '{{order.order_number}}'
 });
</script>

You’ll notice the remove ‘,’ which supports international currencies that have commas in pricing.

Then copy into your Shopify checkout scripts as shown below::

adwords-script

That’s it! Easy enough….now to show option B via GTM:

Option b) Implement via GTM

This step shows you how you how to implement via Google Tag Manager.

Step 1: Custom Javascript Variables

If you already have a data layer in Google Tag Manager that has order total and transaction ID variables then you can skip this and move to step 2.

Otherwise you’ll need to create these variables to capture the dynamic order data needed.

First, create order total variable:

js variable for shopify order total

Then repeat this for creating a transaction ID:

shopify transaction id custom js gtm variable

Step 2: Create Trigger for Checkout Complete Page:

In this step we’ll create a trigger to ensure this fires on the first time a user completes a purchase and reaches the order success page only.

shopify checkout success gtm page path trigger

Step 3: Implement AdWords gtag.js

Now we need to copy our gtag event snippet into GTM so we can update the variables and assign our trigger.

If you DO NOT have dynamic remarketing setup and you simply have a global sitewide tag that fires on every page (Step 1, option b) then you copy your conversion script from AdWords, update your variables and set the remarketing tag as your “setup tag” so it fires first:

shopify adwords gtag with setup tag

Otherwise you can include both the global remarketing tag and conversion event data in a single tag and swap out your order variables.

adwords gtag via gtm in shopify

That’s it!

Step 3: Verify Tags and Variables

Now that you’ve finished your tag, go into preview mode in GTM and view the order success page with data layer variables:

adwords-checkout-success-variables

 

And you can also view the order success page with the AdWords tag successfully displaying the order values:

checkout-success-adwords-gtag-shopify

Wrap Up

That’s it! Hopefully this didn’t make things more complicated when trying to decide how to implement AdWords gtag on Shopify.

Remember there are two steps required:

  1. Implement the global gtag
  2. Implement the custom conversion gtag event snippet

If you have any questions or issues please leave a comment.

Related Articles:

Shopify Marketing & Analytics Tips

Sign up to receive our latest posts on how to optimize Shopify.

We respect your inbox.

  1. Hi Brad. I’ve been trying to follow your guide for a pure GTM implementation but it’s breaking my head. For some reason, the custom JavaScript Variables that I’m setting up in GTM with Shopify.checkout.total_price and Shopify.checkout.order_id always turn out Undefined and never get their values populated correctly. Is it possible Shopify uses a different name for these now? I just can’t seem to get any of the Shopify JavaScript variables in GTM to populate with real data during the checkout. All of the base GTM out of the box variables populate fine.

        1. Hi Gareth,

          Sure thing! Two things:

          1. Make sure you are testing on the thank you page of checkout (not mid checkout)

          2. Make sure you’re checking your variables on the DOM ready event (not Pageview). You’ll want to set your checkout pageview trigger to be DOM Ready – Pageview.

          Let me know if you were able to get yours working!

  2. Hi, Brad. Thank you for your detailed tutorial.
    It is much appreciated.

    So, from what I can gather, in Option A, the easy way to implement the conversion tracking in Shopify,

    The codes that are written as {{ total_price | money_without_currency | remove:’,’ }} will automatically take the total price from the shopify data, & ‘transaction_id’: ‘{{ order.order_number }}’ will automatically draw the order number for the actual item purchased in Shopify and assign it in here.

    Meaning, if Shopify had assigned a transaction id of 11122345678 to the purchase of a toothbrush, it will become ‘transaction_id’: ‘11122345678’

    My question is
    (1) This will ensure my adwords conversions are properly tracked for all my ads to my company’s shopify store, but those it mean it is tracking all purchases? Meaning, if I’m advertising for Playstation 4 games on my online shopping store, but someone who saw my PS4 ads, but goes to my store to buy a toothbrush instead, it will still count as a conversion right?

    (2)How do I ensure that my Adwords Conversion for my PS4 Ads are tracking only PS4 games purchases and how to ensure that my Toothbrush ads are tracking Toothbrush purchases only?

    Because in Facebook Pixels, I can set the rules with Custom Conversion Pixel whereby I state that only purchases that contain a specified Content_IDs from shopify will trigger the Pixel to record the purchase. So, let’s say the content_ids for toothbrush given by shopify is 675432234, it will only record a purchase for my FB toothbrush ad, if someone actually saw the ad, and then bought a toothbrush. It won’t be recorded if someone bought something else.

    Thanks.

  3. Great questions!

    You are correct in your first assumption that AdWords will record a transaction if a user clicks on one product ad => user purchases a different product on site.

    In theory you could probably set similar logic that you describe with Facebook but I imagine would become unwieldy with more than a few products.

  4. In the conversion actions settings the count should be for one conversion or every conversion?

    Thanks for all your how tos

  5. Hi Brad

    Thank you so much for writing this article; it’s 1000 times better than the instructions provided by Shopify. I have two question regarding Step 2, Option A (Implement Conversion Snippet gtag Event via Shopify Admin).

    1. Why is the entire AdWords global tag snippet being included in the Shopify checkout script? This is especially confusing for me since we already included the gtag configuration spinet in the Google Analytics script section under Preferences. I don’t know what I’m missing, and why this is required.

    2. What is the purpose of the if statement encapsulating the checkout script snippets?

    Thanks again for writing this great article. My programming experience is very limited, and apologize in advance if my questions are stupidly obvious to more advanced programmers. I’m really interested in understanding the tracking process from start to finish why the tags are implemented the way that they are. I hope to hear from you soon 🙂

    1. Hi Max – thanks for the kind words!

      1. Google recommends including the AdWords tag snippet to be sent before sending your transaction values. Unfortunately copying the gtag.js GA snippet into Shopify config doesn’t actually relate to the gtag.js version being set in stores. Thus I suggest setting AdWords global gtag.js when sending custom events.

      2. The encapsulating script snippet is so the events are only fired once. This way when an admin or user reloads the success page your conversion data won’t be sent twice, thus duplicating conversions.

      Hope that helps!

  6. Hi Brad,

    Thanks for the article. Just a quick question I’ve implemented your GTM solution but also have conversion linker and Google Analytics linked to the AdWords account. Do I still need to implement the conversion snippet gtag event if:

    – Conversion linker is installed via GTM
    – Google AdWords + Google Analytics are linked

    Will having both conversion linker and the AdWords conversion tracking tag cause duplicate data?

    Best regards and many thanks,

    James.

    1. Hi James,

      Google recommends all accounts have the Conversion Linker tag from what I understand.

      Regarding the conversion snippet (pushing transaction data from your site to AdWords), if you already have GA connected and are using GA revenue for your AdWords conversion values then you likely do not need to implement the conversion tag.

      Let me know if that helps!

  7. hey there, thanks for writing this comprehensive guide but im still very lost. All is good until: Option b) Implement via GTM

    I created the Javascript Variable – Order Total and typed in Shopify.checkout.total_price

    but it seems like i dont have the below section “References to this Variable”. Needless to say, im lost entirely for the rest of the guide. It’s my first time doing this as i was thinking of doing some google remarketing but never thought this is going to be so difficult.

    Can you please help me find out where im missing out?

  8. Correct me if I’m wrong, but I believe if you use the new Shopify Gooogle Analytics integration these manual steps are not necessary.

    I turned on “Enhanced Ecommerce Tracking” in Shopify and Google Analytics and it seems to have added the code and conversion events for me, automatically. I see ads in Adwords being tracked accordingly.

    https://help.shopify.com/en/manual/reports-and-analytics/google-analytics/google-analytics-setup#turn-on-enhanced-ecommerce-tracking

    Is there any benefit to still doing the manual method?

    1. Hi Kurt! Thank you for the comment. It’s possible you have Google Shopping channel installed which is adding your AdWords conversion tracking (which is another way to add this to your store)? The Enhanced eCommerce setting would not add the conversion tags on it’s own.

      I do believe Shopify accepts the new gtag.js snippet for GA now though which if you see this on your store then you should be good to go.

      Please let me know if this helps answer your question.

  9. Hi Kurt,

    I have a regular Shopify account (not Shopify plus) that I’ve integrated with Google Analytics, and am trying to add a Google AdWords conversion pixel to my site. If I have the Shopify/GA integration, does that mean I already have a global site tag installed on all pages of my site? And if so, should I add the the AdWords config command to my theme.liquid file or add it into the “Additional Scripts” setting in Shopify? OR, since the Shopify/GA integration uses universal analytics, do I select the option in AdWords that I don’t have the global site tag installed on all my HTML pages and copy the entire AdWords global site tag and event snippet to the Shopify checkout script?

    Thanks

  10. Hey Brad, it seems that the gtag manager preview doesn’t fire up as we don’t have access to checkout.liquid anymore unless you are a shopify plus customer. I’m having issues tracking the conversions even that I have tried to add the gtag and other tags in different ways. I wonder if you could assist as Shopify support team is not really useful when it comes to complex issues.

  11. Hi Brad,

    Thanks so much for the tutorial. I followed your instructions and deployed ads through GTM. When I went to go test this using Tag Assistant, there was an alert showing the doubleclick beacon event firing before the pageview. Is there a way to change the tag sequencing using GTM so that the pageview fires first?

    Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may also like