(Version 1.0) Shopify Plus: How to Implement GTM Suite App - Complete Guide
This is your complete guide to manage version 1.0 of the GTM Suite app for Shopify Plus stores.
Data Layer 1.0. has been depreciated
Please follow our upgrade guide to update to our latest version.
First a quick message regarding our upgrade:
Brad from Elevar here. I wanted to personally say thank you for supporting Elevar the past several years. Because of your support and amazing feedback we've completely rebuilt our data layer Shopify app from the ground up to ensure we are staying ahead of the rapid changes in the world of tracking. Things like Safari ITP, CCPA, GDPR, and evolving browser advancements make accurate tracking a moving target for all of us.
If you're reading this then I can assume that you've previously purchased our $199 Shopify app at some point in the past 2 years which we are thankful for.
You also may have seen that we've released our version 2.0 which is a monthly plan and includes amazing new features like server side tagging enablement, user consent integrations to automate compliance with your tags, among other data layer specific feature improvements.
I'm here to tell you that you will continue to receive the same amazing support that we provide if you want to stay on the original version 1.0. The in-app settings will just be a bit different than you are used to seeing!
Whether you're on version 1.0 or 2.0, if you have any questions don't ever hesitate to contact us at [email protected] so we can assist. Thank you again for your support.
Step 1: Download Elevar Snippets
You'll see that you now have the option to download your data layer snippets that can be manually installed into your theme.
The first step is to input your GTM container ID and click Download.
Note: If you already have Elevar installed on your production theme then you don't need to complete this step. This is only for stores who have purchased version 1.0 but never installed. Skip ahead to step 3 if you already have Elevar installed.
This will prompt a zip file that contains:
elevar-head.liquid
elevar-body-end.liquid
elevar-checkout-end.liquid
elevar-checkout-success.liquid
Once you open the files you'll see something like this:
Now you have to create these snippets inside of your theme and include them in the relevant files which you'll see in the next step.
If you want the Elevar team to do this for you, please open a support ticket requesting that we complete this manual install process for you. No charge. We ask for 1-4 days to complete.
Step 2: Create Snippets in Shopify Theme
Now head to your Shopify admin and the theme that you want to install this on.
First, create a new snippet called "elevar-head" like this:
Then copy the code from the elevar-head.liquid file you just downloaded in the zip file and paste into this new snippet like this:
Then click save.
Repeat this step for the elevar-body-end
and elevar-checkout-end
.
Now you have to include these snippets in the theme.liquid and checkout.liquid files.
Go to your layout > theme.liquid file and add this code at the top of the file:
Like this:
Then at the bottom of the theme.liquid add this:
Like this:
Click Save.
Shopify Plus stores repeat the process for your checkout.liquid but instead of including "elevar-body-end" at the end of the template, it should be this:
Click save!
That's it!
Step 3: Update the Checkout Thank You Page Snippet ā
To make sure all transaction data is available to GTM, you'll need to paste the checkout success script that you downloaded in step 1 to the Thank You page in your Shopify admin.
Just copy the code from the elevar-checkout-success file and paste into your additional script setting like this:
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! Just tack on Elevar's code to what you already have in place.
The rest of the guide is the normal v 1.0 process setup inside of Google Tag Manager.
If you get stuck please open a ticket so we can assist!
Step 4: Remove Existing GTM Code
Check to see if you have another GTM script installed on your website 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 5: Import Pre-Built Google Tag Manager Container
The last step to connect your Shopify store to Google Tag Manager is creating all of the variables, triggers, and tags in your GTM container.
We provide a complete container for your Shopify Non-Plus store that has all of Elevar's base variables, triggers, and tags. The base tags we include are:
- Google Ads Remarketing & Conversion Tags
- Facebook Pixel
- Google Analytics Universal Analytics
How to import container:
- Download our GTM Container from your account
- In your GTM account, navigate to Admin > Import Container
- Select file to import = The GTM container you just downloaded
- Choose workspace = Your preferred workspace (usually called Default Workspace)
- Choose an import option => Select merge container. DO NOT CHOOSE OVERWRITE!
- In the radio button options, choose 'Overwrite Conflicting tags, triggers and variables'
- Select Confirm
š You will now see the tags, triggers, and variables imported in your Workspace Changes! š
Step 5a: (Optional) Import Additional Tags
Inside your Elevar account you can download any of our 30+ additional containers here under the GTM Suite (v1.0) tab:
Follow the same process to download and import into your GTM container as you performed in the previous step.
Optional Configurations
Facebook Pixel Tracking
If you would like to implement Facebook Pixel tracking with our app, follow these easy steps outlined in this guide.
Google Ads Conversion Tracking and Remarketing Tags
How to Set Up Google Ads Remarketing and Conversion Tracking via Google Tag Manager
Step 6: Update Variables in GTM
Once you've imported your container(s) you'll need to decide which marketing tags you want to keep published inside of GTM.
You can mix and match the marketing tags that you wish to trigger via GTM while also keeping some of your tags setup in native Shopify.
For example you might want this:
- Keep sitewide Google Analytics in Shopify
- Keep Facebook pixel in Shopify
- Publish Google Ads and Pinterest via GTM
You can do this by pausing (or deleting) tags in GTM that you don't want to use.
Since you are a Plus store, you can keep your GA setup in Shopify for Google Analytics tracking or choose to configure in GTM
How to Update variables in GTM:
- In Google Tag Manager go to Folders > UPDATE AFTER IMPORTING
- You should see variables in this folder that you have to update (GA, Facebook Pixel, etc)
- Update the name of the variable with your Google Analytics ID, removing the Update After Elevar Import text.
- Update the variable with each respective ID (for example, see GA image below)
- Save and you're all set!
Step 7: QA Your Installation in Preview Mode š
QA the new tags with Google Tag Manager's Preview Mode
Follow our guide to QA your tags in Google Tag Manager (GTM) preview mode.
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.
- 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:
- 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 8: 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
-
In Google Tag Manager go to Folders > Update on Install
-
Click on 00 - UPDATE ON INSTALL - GA - UA-xxxxxxx-xx
- Update the name of the variable with your Google Analytics ID, removing the '00-update on install' text.
- Update the tracking ID with your Google Analytics UA ID number.
- 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)
Be sure to also configure your checkout funnel steps in your GA view here:
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 Submit button in the top right and confirm your deployment.
Once you've deployed your changes 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.
Additional Resources
How to Fix Common Installation Issues
Updated about 1 month ago