Enabling Google Tag Manager with Recharge

Google Tag Manager (GTM) makes it easier to add tracking codes, such as Google Analytics tags, to your storefront. Recharge's integration with GTM enables store owners to add GTM code to the Shipping, Billing, and Thank You pages in the checkout to track customer trends and collect data.

Status and functionality

• The Google Tag Manager integration is currently available to merchants on the Recharge Pro plan, that use the Recharge Checkout on Shopify or BigCommerce. Merchants using the Shopify Checkout Integration can refer to Shopify's guide on Google Tag Manager.
• The checkbox to enable GTM in your merchant portal is locked by default, reach out to support to get access.
• Once the integration is enabled in Recharge, you must register with Google Tag Manager separately to get a unique tracking code.
• Once registered, log in to your Google Analytics account and turn on Enhanced Ecommerce.

Before you start

• Using GTM is outside of the Recharge scope of support as per the design and integration policy. It is recommended to review Google's GTM documentation or use a service like LittleData or Elevar. 
• Your Google Analytics account and property must be set up with ecommerce reporting enabled. Refer to Google's guide on Universal Analytics ecommerce.
• If you want to add GTM scripts to any pages outside of the checkout, you will need to connect your GTM account to your Shopify account. See Add Google Tag Manager scripts to additional pages for more information.
• Enabling GTM automatically disables Google Analytics Tracking. Refer to Google's documentation for 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.

Enable 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. Refer to Google's guide to learn more about exporting and importing GTM containers.  

• In your Google Tag Manager account, select Admin.
• In the Container section, select Import Container.
• Click Choose container file and select the Recharge_Checkout_GTM JSON file to import.
• Select if you would like to add the imported file to a new or existing workspace. A new workspace is recommended.
  • New workspace:
    • Under Choose workspace, click New.
    • Enter a title and description for your workspace.
    • Click Save.
  • Existing workspace:
    • Under Choose workspace, click Existing.
    • Select the desired workspace.
• 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 different contents, 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 different contents, rename the new one. If the contents are the same, there is no conflict.
• 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.
• Once you are satisfied with the changes that will be made, select Confirm.

• After confirmation, navigate to your variables and update the value in the GA Tracking ID - INPUT YOUR GA ID variable with your Google Analytics Tracking ID.

Enable the integration in Recharge

Once you have registered with Google Tag Manager, generated your unique GTM tracking code, and have requested that the Recharge support team enable this on your store, open your merchant portal.

• Click Storefront and select Checkout.
• Scroll down to the Google Tag Manager section.
• Check off Enable GTM DataLayer.
• Add your unique GTM tracking code.
• Click Save.

Validate your work

In your Google Tag Manager account, click Preview to validate the tags (learn more about previewing and debugging containers in Google's guide). 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 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 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 to integrate with pages other than those three, you need to add code to your Shopify storefront's Google Analytics section and directly within your Liquid files.

Paste the below code as high in the <head> of the page as possible (replace GTM-XXXXX with your container id): 

<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> ​

Additionally, paste this code immediately after the opening <body> tag (replace GTM-XXXXX with your container id): 

<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 your Shopify store

1. In your Shopify Admin, click Store and select Preferences. 
2. Locate the Google Analytics section, and click Add custom JavaScript.
3. Paste in the <noscript> code. Ignore the <script> line. Be sure to replace GTM-XXXXX in the code with your container id. 
4. Click Save.

Add code to your Liquid files

1. In your Shopify Admin, click Store and select Themes. 
2. Locate your theme and click Actions and select Edit code.
3. 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 when someone converts on page 2 of the checkout. 
• RechargeCheckout - A page view event for pages 1 and 2 of the 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 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 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

Any questions about data tracking, tags, or functionality can be sent to the GTM support team. 

If you have any questions about adding your GTM code to the settings in Recharge, reach out to the Recharge support team. 

Downloads