How to Implement GTM App with Your Non-Plus Shopify Store (Complete Guide)

This is your complete guide to transition your Non-Plus Shopify store to using our Google Tag Manager app by Elevar

Shopify Plus User? Use this guide instead

Here are the required steps for the full implementation:

  1. Install Our Shopify App & Update GTM ID
  2. Remove Existing GTM Code
  3. Update Checkout Thank You Page Snippet
  4. Import GTM Container
  5. Implement Google Adwords/Remarketing gtag (optional)
  6. QA Website in Preview Mode
  7. Update Required GTM Variables
  8. Publish GTM Container & Monitor

Installation Walkthrough - Start Here!

We suggest watching this video first, and then follow the detailed steps below to successfully install the app.

Step 1: Install Our Shopify App & Update GTM ID

Once you install our app (A one-time $99 purchase - NO recurring fees!), you can move on to the installation instructions where you need to input your GTM container ID

gtm-id
  • Grab the GTM container ID from your GTM account
  • Enter it into your Shopify settings
  • Select Save & Update

Once you save then we have inserted three snippets into your theme:

  • elevar-head.liquid (this inserts GTM container code)
  • elevar-body-end (this creates the full dataLayer)
  • elevar-checkout-end (this contains GTM and dataLayer for checkout pages, although this won't serve any purpose without access to checkout)

We've also included these snippets in your theme.liquid

elevar-app-install

You now have GTM installed on your website through the app!

Step 2: Remove Existing GTM Code

Important! Check to see if you have another GTM setup on your website. Now that you've installed our app, you will need to remove the existing code to prevent duplicate GTM containers on your website. See: How to Remove Your Pre-Existing GTM Code (for GTM Shopify App)

Once you have verified that you do not pre-existing GTM code present, you can move to the next step.

Step 3: Update Checkout Thank You Page Snippet

  • Copy the script in the app settings found here:
thank-you-snippet

Once you've copied the code, you can paste into the checkout script settings below, and select SAVE.

Please note: Don't delete your existing scripts in here without reviewing them first! It's possible that you might have scripts used for other tracking purposes!

thank-you-page

Step 4: Import GTM Container

You are almost done! Now it's time to connect your new dataLayer data from your store to Google Tag Manager.

Backup of your existing live container

  • Go to GTM > Admin > Export Container and select to export your workspace (most of the time this is the “Default Workspace”). Save this file just in case!

Now in order to connect your Shopify data to Google Tag Manager we need to create all of the variables, triggers, and tags for these to map to.

  • Download Container
  • Import this container into your GTM account. Go to GTM > Admin > Import Container then follow the steps below. DO NOT SELECT OVERWRITE!
import-container

  1. Select the container you just downloaded above
  2. Select your preferred workspace (most times this is "Default Workspace")
  3. Select Merge Container
  4. Review the detailed changes - if some looks incorrect please review the previous steps. If you are still unsure, please contact us with details about the problem.

Once you're confident everything is good then click Confirm and you will see the tags, triggers, and variables imported in your Workspace Changes:

workspace

Step 5: Implement Google Adwords/Remarketing gtag (optional)

By default, all of the Google AdWords tags are paused. These are the tags required for:

Dynamic remarketing events sending product data into the AdWords retail events for dynamic remarketing like shown below:

  1. Global gtag.js script 
  2. AdWords conversion tracking

gtag

There are two steps to complete this setup:

  1. Update the AdWords - Account ID Variable in the GTM Folder "UPDATE ON INSTALL". Please ensure your constant is something like AW-123456789 (no dashes inbetween the #'s)
  2. Update your AdWords Conversion Value and Labels for the transaction tag

Here is where you find your AdWords variable:

  • Go to Tools > Audience Manager:
Screen+Shot+2018-09-10+at+8.13.12+AM
  • Then go to AdWords Tag > Details:
adwords-details

Then copy your the variable shown here:

Screen+Shot+2018-09-10+at+8.13.52+AM
  • Then go to GTM > Variables > UPDATE - AdWords Account > copy your value here:
Screen+Shot+2018-09-10+at+8.19.45+AM

That's it for the remarketing setup!

To implement AdWords conversion tracking, then follow these next steps as well. 

  • Here is the Adwords Transaction tag that needs your specific AdWords values updated:
Screen+Shot+2018-09-03+at+9.14.46+PM
  • Here is where you can find these in Google AdWords. Under Conversions, either create a new transaction tag or go to your existing one:
Screen+Shot+2018-09-03+at+8.37.57+PM

Screen+Shot+2018-09-03+at+8.37.18+PM

Here are the AdWords gtags that were imported into GTM for you:

Screen+Shot+2018-08-31+at+10.22.09+AM
Important! Once you've unpaused each tag you are ready to move on. If you previously had AdWords scripts or remarketing tags setup then you will need to remove these to prevent duplicate tags from firing.

Step 6: QA Website in Preview Mode

You need to set GTM into Preview mode and walk through all of your major pages of your website to ensure you installed everything properly.

  • You will want to verify the data layer variables populate as shown in each section below.
  • If you have enabled the AdWords Remarketing tags, click into each gtag tag (that's a mouthful!) to verify this data populates:
Screen+Shot+2018-08-31+at+10.41.34+AM

Review Homepage & Blog & CMS Pages

All of these pages should have these tags firing:

  • AdWords - gtag - Misc Pages
Screen+Shot+2018-09-03+at+4.19.46+PM
  • The dataLayer should contain:
Screen+Shot+2018-09-03+at+3.38.43+PM
  • If a customer is logged in you will see this additional data:
Screen+Shot+2018-09-03+at+3.42.53+PM

Review Collection & Search Pages

You will have the tags fire on pageview:

  • AdWords - gtag - Collection and Search Pages
Screen+Shot+2018-09-03+at+4.16.12+PM

The dataLayer should contain the same baseline data (visitor and page type) along with the additional collection page enhanced ecommerce data for impressions. 

Note: this guide doesn't show how to put this impression data into use on your Shopify store for Enhanced eCommerce. This is only recommended for Shopify Plus stores so you don't lose out on checkout-only data that we aren't able to implement via GTM.

Screen+Shot+2018-09-03+at+3.40.38+PM

If everything is good then continue to do the same on your search result pages! If you are seeing some discrepancies, please review the setup steps again and then contact us with your questions.

Review Product Pages

Note: Test all product page types if you have unique templates

On product pages you should see the following:

  1. AdWords gtag - Product Pages
Screen+Shot+2018-09-03+at+4.16.33+PM

The dataLayer should contain the same baseline data (visitor and page type) along with the additional product page enhanced ecommerce data that can be used with Enhanced eCommerce or custom third party marketing tags:

Screen+Shot+2018-09-03+at+3.59.16+PM

Review Cart

If you send users to a shopping cart then you should see the following:

  1. AdWords gtag - Cart Page
Screen+Shot+2018-09-03+at+4.17.38+PM

And the dataLayer should contain the same baseline data (visitor and page type) along with the additional cart page enhanced ecommerce data for product list impressions. 

cart

Checkout Pages

Since we don't have access to your checkout pages then we can't insert GTM into these pages.

Review Checkout 'Thank You' Page

This last page (the most important) you will want to see the following:

  1. AdWords - gtag - Thank you 
Screen+Shot+2018-09-03+at+4.23.05+PM

Additionally if you click on the Data Layer tab in the GTM console, you will see all of the data available for your use in Google Analytics, marketing conversion tags, etc. 

You'll notice some additional data like

  • Customer Order Count: total # of lifetime orders by the customer
  • Customer Total Spent: total # of money paid in lifetime by customer
  • Custom Email 
  • AdWords transaction tag 

This data can be used in other third party tags (Snapchat, Bing, etc)!

Screen+Shot+2018-09-03+at+12.51.13+PM

Step 7: Troubleshooting and Modifying Elevar App Snippets (if needed)

If any of your QA tests don't pass from Step 7, then it's likely that you have customizations to your theme that we aren't able to detect with our automated triggers. We have listed some common examples below.

1. Product SKUs are "undefined" in Product Tags

If this happens then it's possible that your product template name has been modified and requires a small config update. 

We look for product.liquid so if you have alternative template names then you will need to add additional logic to account for these in the elevar-body-end.liquid file:

Screen+Shot+2018-09-03+at+1.26.57+PM

2. ecomm_value is undefined

If this happens on your product detail pages then you will need to adjust the two lines of code shown below. If you need help updating this for your store please contact us!

Step 8: Update Required GTM Variables

Each container you import into GTM will have a folder called "UPDATE ON INSTALL"

The variable found in this folder will be: AdWords account number (ex. AW-123-456-789)

Step 9: Publish GTM Container & Monitor

Once you are ready to go live it's time to publish!

Inside of Google Tag Manager, click the Publish button in the top right and confirm your deployment. 

Once you've deployed then you should perform the same QA process in preview mode. Just be sure to click Refresh inside of GTM if you've made any changes.

Screen+Shot+2018-09-03+at+3.27.01+PM