This is your complete guide to transition your Shopify Plus store to using our Google Tag Manager app by Elevar.
Non-Plus Shopify Store User? Use this guide instead.
PLEASE NOTE AN UPDATE TO ADWORDS SETUP AS OF MAY 6, 2019 IS IN EFFECT!
Here are the required steps for the full implementation:Step 1 - Install Our Shopify App & Update GTM ID
Step 2 - Remove Existing GTM Code
Step 3 - Update Checkout Thank You Page Snippet
Step 4 - Import GTM Container
Step 5 - Update GTM Variables
Step 6 - Enable Google Adwords/Remarketing gtag (optional)
Step 7 - QA Website in Preview Mode
Step 8 - Troubleshooting and Modifying Elevar App Snippets (if needed)
Step 9 - Transitioning 100% to Google Analytics tracking via GTM
Step 10 - Publish GTM Container!
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 $199 purchase - NO recurring fees!), you can move on to the installation instructions where you need to input your GTM container ID.
- Grab the GTM container ID from your GTM account
- Enter it into your Shopify settings
- Note: When you paste/enter the GTM Container ID, please make sure that there's no leading space or whitespace to prevent 'Invalid or Missing Account ID' error.
- Select Save & Update
Once you save then we have inserted three snippets into your theme:
(This is an automatic injection of snippets into your current 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)
We've included these snippets in your:
Note: if you do not have access to your checkout.liquid theme file then you will need to contact your Shopify merchant success manager to enable this for you.
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:
Once you've copied the code, you can paste into the checkout script settings below, and hit 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! ❗❗❗
Once you're done click save!
Step 4: Import GTM Container
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!🚧
- Select the container you just downloaded above
- Select your preferred workspace (most times this is "Default Workspace")
- Select Merge Container
- Review the detailed changes - if anything doesn’t look correct please email us.
Once you're confident everything is good then click Confirm and you will see the tags, triggers, and variables imported in your Workspace Changes:
Step 5: Update GTM Variables
This depends on what you wanted to utilize for your store!!!The container you imported into GTM will have a folder called "UPDATE ON INSTALL". Variables found in this folder will be:
- Google Analytics UA account number (ex. UA-12456-12) - Please see: Step 9
- AdWords account number (ex. AW-123456789) - Please see: Step 6
- Facebook Pixel ID number (ex. 1234567891234567) - See: How to Implement Facebook Pixel Tracking
Step 6: Implement Google Adwords/Remarketing gtag (optional)
By default, all of the Google AdWords tags are paused. These are the tags required for:
- Global gtag.js script
- Pulling product data into the retail events for dynamic remarketing
If you do want these enabled then there are two steps here:
- Update the AdWords - Account ID Variable in GTM. Please ensure your constant is something like 123456789 (no dashes in-between the #'s)
- Go to all Adwords - gtag - tags and click "Unpause" in the top right corner of the GTM Tag.
Here is where you find your AdWords variable:
Go to Tools > Audience Manager:
Then go to AdWords Tag > Details:
Then after selecting GTM as setup type copy your the variable shown here:
Then go to GTM > Variables > UPDATE - AdWords Account > copy your value here:
That's it for the remarketing setup!
Now 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:
- Here is where you can find these in Google AdWords. Under Conversions, either create a new transaction tag or go to your existing one:
Here are the AdWords gtags that were imported into GTM for you:
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 7: QA Website in Preview Mode
You need to set GTM into Preview mode and walk through all of the major pages of your website to ensure you installed everything properly.
- You will want to verify the following tags fire on each page as shown below.
- If you have enabled the AdWords Remarketing tags, click into each gtag tag (that's a mouthful!) to verify this data populates:
Review Homepage & Blog & CMS Pages
All of these pages should have these two pageviews firing:
- AdWords - Global Remarketing
- UA Pageview
Review Collection Pages
You will have three tags fire on pageview:
- Adwords Remarketing - View Item List
- EE Event - Product List Impression
- UA Pageview
Verify the dataLayer looks similar to the image below (with your product data) to push impressions to Enhanced eCommerce:
Verify clicking a product on a collection page pushes a product click event. I usually do this by right-clicking a product to open in a new tab.
Watch this video that shows the EE - Product List Click tag fire twice:
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 Search Pages
- Example of the search results tags:
Review Product Pages
Note: Test all product page types if you have unique templates
On product pages you should see the following:
- UA Pageview
- AdWords View Item (if you have enabled)
- EE Event - Product Detail View
- IF you add to cart, EE Event - Add to Cart
Something that we do different is push an additional product detail view hit when a user changes a variant.
Why? To account for an accurate % of add to cart by product SKU. Otherwise if we don't push this detail hit then your first default variant will have all of the product views while the additional options won't have any (or minimal). This causes add to cart % and cart to detail view % to be inaccurate
If you send users to a shopping cart then you should see these three tags:
- Adwords Remarketing - Cart Page
- EE Event - Product List Impression
- UA Pageview
We also push an impression list into the dataLayer for your merchandising list analysis which provides your positioning of products in the shopping cart.
Review Checkout Pages
In each step of the checkout pages, you should see the following tags fire:
- UA Pageview
- EE Event - Checkout Step
This will send pageview hits to Google Analytics along with the enhanced ecommerce checkout step data shown below:
In order to get the funnel tracking in Google Analytics, you will need to configure this in Google Analytics > View Settings > Enhanced Ecommerce:
This will then populate the Checkout Behavior Analysis report in Google Analytics:
Review Checkout Thank You Page
On this last and most important page, you will want to make sure that the following tags have fired successfully:
- UA Pageview
- EE Event - Transaction
- AdWords Remarketing - Purchase (if you have this enabled)
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 a lifetime by customer
- Custom Email
- AdWords transaction tag
Personally Identifiable Information (PII)
If you have PII in your Google Analytics pageview hits (email addresses) then you can validate this new setup scrubs this data prior to the hit being sent to GA by doing one of the following:
Option 1. Use the GA Debugger for Chrome, add a fake email to the end of your URL (something like firstname.lastname@example.org), and you should see something like this where the actual email is redacted from the hit:
Option 2. Inside of your Google Analytics Real Time report, find yourself based on the city you are loading the site from and go to the content report which should look something like this:
Step 8: 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 Detail Views Don't Work
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:
2. Add to Carts on PDP not Firing
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 chat us.
If you need help updating this for your store please contact us!
Step 9: Transitioning 100% to Google Analytics tracking via GTM
If you are transitioning 100% to Google Analytics tracking via GTM instead of native Shopify then we recommend creating a test GA property first and setting this account # first to monitor for a few days.
This will allow you to compare traffic and revenue #'s between your pre-existing property and this new property that is setup via GTM so you feel confident in the data when fully transitioning.
How to Update Google Analytics Variable in GTM
1. In Google Tag Manager go to Folders > Update on Install
2. Click on 00 - UPDATE ON INSTALL - GA - UA-xxxxxxx-xx
3. Update the name of the variable with your Google Analytics ID, removing the '00-update on install' text.
4. Update the tracking ID with your UA ID number.
5. Save and you're all set!
Note: Please make sure that you remove the Native Shopify <> GA integration in your Shopify Preference Settings so you won't get duplicate revenue reporting. (keep the GA box empty)
Step 10: 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. Make sure to click Refresh inside of GTM if you've made any changes:
Excellent! You've now successfully Configured GTM using our App.
Please feel free to reply or send us an email for any concerns that you may have.