Enabling Google Tag Manager with Recharge

One service that Google offers is Google Tag Manager (GTM), which makes it easier to add code, such as Google Analytics tags, to your storefront. 

Recharge is pleased to announce a new, deeper integration with GTM. The new feature enables store owners to add GTM code to the Shipping, Billing, and Thank You pages in checkout to track customer trends and collect precise data.

Status and functionality

The new Google Tag Manager integration is currently available to all merchants on the Recharge Pro plan.

Once the integration is enabled in Recharge, you must register with Google Tag Manager separately to get a unique tracking code. Once registered, you need to log-in to Google Analytics and turn on Enhanced Ecommerce.

With the new integration, you can add tracking code to your checkout through GTM to collect data and run tests. Use this industry-standard tool to keep a close eye on how each of the pages in checkout are performing without the use of JavaScript code.

Before you start

• Using GTM is outside of our scope of support as per our design policy. We recommend looking over Google's GTM documentation or using a service like LittleData if you have any questions with setting up GTM. 
• Your Google Analytics account and property must be set up with e-commerce reporting enabled. Google has a help doc to get you started.
• If you want to add Google Tag Manager scripts to any pages outside of checkout, you will need to connect your Google Tag Manager account to your Shopify account. Take a look at Add Google Tag Manager scripts to additional pages for more information.
• Enabling GTM automatically disables Google Analytics Tracking (GTA). Google has documentation that can guide you on enabling Analytics Tracking via Tag Manager.
• Recharge is only responsible for ensuring the data layers from the checkout pages are sent over to your GTM account. For all other pages, we strongly recommend you consult a developer or a specialist that will assist you with the implementation of it.

Enabling Google Tag Manager 

Before you enable the integration in Recharge, you need to import and merge the GTM container into your container in Google Tag Manager. Google has a support article that lays out an overview of the process. 

1. In the top navigation, select Admin.
   
2. In the Container section, select Import Container.
3. Click Choose container file and select the Recharge_Checkout_GTM JSON file to import.
4. Select if you would like to add the imported file to a new or existing workspace. We recommend a new workspace.
   • New workspace:
     1. Under Choose workspace, click New.
     2. Enter a title and description for your workspace.
     3. Click Save.
   • Existing workspace:
     1. Under Choose workspace, click Existing.
     2. Select the desired workspace.
5. Select Merge. To Merge, select whether you want to overwrite or rename conflicting variables, triggers, and tags. We recommend rename.
   • Overwrite conflicting tags, triggers, and variables. If a variable, tag, or trigger in the new container has the same name but the contents are different, overwrite the old one with the new one. If the contents are the same, there is no conflict.
   • Rename conflicting tags, triggers, and variables. If a variable, tag, or trigger in the new container has the same name but the contents are different, rename the new one. If the contents are the same, there is no conflict.
     
6. Click Continue. The preview dialog shows how many tags, triggers, and variables will be added, modified, or deleted. Click View Detailed Changes to see a list of all the items that will be affected.
   
7. Once you are satisfied with the changes that will be made, select Confirm.
   

8. After confirmation, navigate to your variables and update the value in the GA Property ID - INPUT YOUR GA ID variable with your GA Property ID.

Enabling the integration in Recharge

Once you have registered with Google GTM and generated your unique GTM tracking code, open up your Recharge dashboard.

1. Go to Settings and Checkout.
2. Scroll down to the new Google Tag Manager section.
3. Check off Enable GTM DataLayer.
4. Add your unique GTM tracking code.
5. Click Save at the bottom of the page.

Validate your work

Put your account into GTM Preview mode to validate the tags. Keep an eye on any existing tags in your GTM container to make sure they are working as expected and there is no duplication due to other Shopify Integrations.

Checkout pages

When installed correctly, Google Tag Manager should fire off for every customer visit to your Address, Payment, and Thank You checkout pages.

Transaction

Every complete transaction will fire off additional tags for you to track in Google Analytics as well.

Add Google Tag Manager scripts to additional pages

The Recharge GTM integration provides you with all the data layers you need for the Address, Payment, and Thank You checkout pages. If you want a store-wide integration or integrate with pages other than those three listed for checkout, you need to add code through with one of two different methods.

Code to add

Paste the below code as high in the <head> of the page as possible:

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({​'gtm.start'​: new Date().getTime(),event:​'gtm.js'​});var f=d.getElementsByTagName(s)[​0​], j=d.createElement(s),dl=l!=​'dataLayer'​?​'&l='​+l:​''​;j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='​+i+dl;f.parentNode.inser tBefore(j,f); })(window,document,​'script'​,​'dataLayer'​,​'GTM-XXXXX'​);</script> ​// replace GTM-XXXXX with your container id.

Additionally, paste this code immediately after the opening <body> tag:

<noscript><iframe src=​"https://www.googletagmanager.com/ns.html?id=GTM-XXXXX" height=​"0"​ width=​"0" style=​"display:none;visibility:hidden"​></iframe></noscript>

Add code to Shopify

1. Open up your Shopify store admin.
2. Click on Online Store under Sales Channels and select Preferences.
3. Locate the Google Analytics section, and paste in the <noscript> code. Ignore the <script> line.
4. Click Save at the bottom.

Add code to your liquid files

1. Open up your Shopify store admin.
2. Click on Online Store under Sales Channels and select Themes.
3. Under Actions, click on Edit code.
4. Add both the <script> and <noscript> to each liquid page you want to track in Google Tag Manager.

Data layer objects

The data layer renders as tags, triggers, and variables.

Tags

• RechargeTransaction - fires off when someone converts on page 2 of checkout. 
• RechargeCheckout - pageview event for page 1 and 2 of checkout.

Triggers

• Recharge - Enhanced Ecommerce - Checkout - this trigger coincides with the two checkout steps. A custom event-based trigger on the Recharge data layer push what happens onLoad of each page. 
• Recharge - Enhanced Ecommerce - Transaction - this trigger coincides with the transaction page. A custom event-based trigger on the Recharge data layer push what happens onSuccessful completion of a transaction. 

Variables

• Recharge - LUT - Enhanced Ecommerce - Action - a look-up table variable that holds the two triggers and converts them to friendly names to pass into the action variable of each tag. 
• Recharge - LUT - Enhanced Ecommerce - Interaction - a look-up table variable that holds the interaction status (T|F) for each event. 
• GA Property ID - INPUT YOUR GA ID - a constant variable where you would input your Google Analytics Property ID (UA-NNNNNNNN-N). This variable feeds into the two Recharge tags.

Example of a product array on a Recharge transaction

'products': [{
                'name': 'Product Title, // Name or ID required
                'id': 'KIT-GEN-SUP-002', // SKU
                'price': '33', // price presented on the page
                'brand': "Brand Name", // product line
                'category': 'Growth', // product category                       
                'variant': 'TBD'

Example code

Stripped down examples of the data layer objects made available on each page. To verify the existence of these objects, open your browser’s developer tools. Specifically, the JavaScript Console, and type in: dataLayer.

Sample of the Shipping page event

ecommerce: { 
   checkout: {
      actionField: {
         step: 1
      },
      products: [ ... ]
      currencyCode: "USD"
   },
   event: "rc_rechargeCheckout"
}

Sample of the Billing page event

ecommerce: { 
   checkout: {
      actionField: {
         step: 2
      },
      products: [ ... ]
      currencyCode: "USD"
   },
   event: "rc_rechargeCheckout"
}

Sample of the Transaction page event

ecommerce: { 
   purchase: {
      actionField: {
         id: 1234567890123,
         affiliation: 'mycoolsubscriptionstore.myshopify.com',
         ...
      },
      products: [ ... ]
      currencyCode: "USD"
   },
   event: "rc_rechargeTransaction"
}

Support

Once enabled, you can access Tag Manager through Google’s landing page. Any questions about data tracking, tags, or functionality should be sent to the GTM support team. 

If you have any questions about adding your GTM code to the settings in Recharge, reach out and we’ll be happy to help.

Downloads