How to Implement Google AdWords gtag.js on Shopify

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

[last updated 3/12/18]

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 as well. So there are two steps:

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

You’ll need access to:

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

Want us to implement for you? Contact us here.

Automated Google Analytics Insights

See how Elevar automates insights, forecasting, and custom reports for eCommerce.

Step 1: Ensure Sitewide gtag Implemented

Option A)

If you’ve already updated your Google Analytics tracking code to be 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

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 is a bit more work but will show 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:

adwords gtag gtm custom tag

Step 4: 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.


Brad Redding

Brad, co-founder of Elevar, has lived in eCommerce for over 12 years. He's helped design, build, and optimize over 100 websites in his career. From new retail startups to well-known brands like Le Creuset, Signature Hardware, Rebecca Minkoff, Char-Broil and more, he specializes in data analytics and conversion optimization to help achieve business goals.

  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

Leave a Reply

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