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.

Before you start

• 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 

Step 1 - Setup a Google Tag Manager Account

1. Visit Google Tag Manager, and click Sign in to Tag Manager.
2. Click Create Account.
   • provide an Account name
   • Container name (your website)
   • and target platform.
3. Accept the TOS agreement to continue.

Note: Ignore the modal prompt, this contains scripts to install Google Tag Manger onto every page of your website (beyond the default Address, Payment, and Thank you pages enabled by the Google Tag Manager integration). If you want to add Google Tag Manager to additional pages, review step 4 under Setup Google Analytics 4 via Google Tag Manager.

Step 2 - Setup Google Tag Manager in Recharge

1. Send a request for the Recharge Support team to enable the Google Tag Manger datalayer in Recharge.

   Note: If the Google Analytics integration was enabled, expect that it will no longer track data after Recharge Support activates the Google Tag Manager datalayer within your Checkout settings in Recharge. Once active, you can uninstall the Google Analytics integration from your Apps settings in Recharge and remove the UA-ID from your Google Analytics settings in Shopify.

2. In Google Tag Manager, create a new workspace. Next, go to Admin, click Import Container and import the Recharge_Checkout_GTM JSON file. Then select your existing workspace, merge and rename conflicting tags, triggers, and variables.
3. Copy the GTM Container ID in the upper-right hand corner of your Google Tag Manager dashboard.

   

4. Go back to Recharge, from the merchant portal click Storefront and Checkout settings.
5. Locate Google Tag Manager, and place the GTM Container ID.
6. Click Save.

   

Step 3 - Setting up Tag IDs

Follow either Setup Universal Analytics via Google Tag Manager, or Setup Google Analytics 4 via Google Tag Manager.

Setup Universal Analytics via Google Tag Manager

Once the JSON file is imported into your workspace’s container and the Google Tag Manager integration is set up in Recharge, the Universal Analytics tags are ready to go.

1. Check the variable “GA Property ID - INPUT YOUR GA ID”, and edit the value with your UA-ID from your Google Analytics dashboard. This sets the presets for the cookie domain and linker.

   

   

• Optional step: To track additional data on the Recharge checkout, create custom UA tags in your Google Tag Manager workspace and set the firing triggers to Recharge’s variables.
2. Troubleshoot and verify if your tags are triggering by clicking Preview and enabling the debugger on your site.

   

3. Make sure to click Submit when you’ve confirmed tags are firing properly, otherwise it may not show live on your site.

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.

Setup Google Analytics 4 via Google Tag Manager

Important: Review Google Analytics 4 tags before starting, since the steps below follow these instructions closely for the required properties to work with Recharge.

Step 1 - Retrieve the Measurement ID

1. Open your Google Analytics dashboard, and select your GA4 property or create a new GA4 property.
2. In Admin, go to Data Streams and click Add stream to create a data stream. Leave the Enhanced Measurement setting on.
3. In the modal window of your Web stream details, copy the Measurement ID to use in the next step.

   

Step 2 - Setup the GA4 configuration tags

1. Paste the measurement ID from the Web stream details, or create a variable constant and assign it, in Google Tag Manager.

   Note: You can also send the data to another server container, but this is not required.

2. For the trigger, either assign:
   • As “All pages” option.
   • Or as both the “Recharge - Enhanced Ecommerce - Checkout” and “Recharge - Enhanced Ecommerce - Transaction” triggers.

     Note: These triggers will only be available to you if you have imported our Recharge_Checkout_GTM JSON file into your GTM container.

   

Step 3 - Setup the GA4 event tags

1. Click the pencil icon to edit the properties.
2. Select the configuration tag as the GA4 Configuration tag you just created.
3. Name the event and select a trigger.
4. Click Save.

   

   

(Optional) Step 4 - Set it in Shopify

To track additional data and add Google Tag Manager to other pages, follow these steps below.

1. Open your Shopify admin portal, under Online Store select Themes.
2. Go to Actions, click Edit Code, and in the Layout folder select “theme.liquid”.
3. Paste the following script code as high in the head element of the page as possible. Make sure to replace GTM-XXXXX with your container id. Note: You can also find this script in your Google Tag Manager dashboard by navigating to Admin, then Install Google Tag Manager.

<!-- Google Tag Manager -->

<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.insertBefore(j,f);

})(window,document,'script','dataLayer','GTM-XXXXX');</script>

<!-- End Google Tag Manager -->

Step 5 - Test and verify your tags

1. Use the Preview option in your Google Tag Manager and test that the correct tags are firing on the expected page views.

   

2. After you’ve verified through testing, click Submit to publish your changes to live.

   

3. Verify that your tags are firing with the help of the Tag Assistant Manager browser extension on the expected pages. In the example below, the GTM Container is firing and shows the GA4 and UA tag set up in the GTM container correctly. The result is the same with either the GA4 web stream script or the script code enabled.

   

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"
}

Google Tag Manager FAQs

Google Tag Manager is down, why isn’t it showing anything?

If Google Tag Manager is down, check Google’s G Suite Status Dashboard and Google Workspace Admin Help.

Note: Google Tag Manager does not tell you if the tags are firing, and needs to point somewhere to see if the data is populating, such as towards Google Analytics for example.

Why aren’t my tags capturing the right data or any data?

Tags are created and managed in Google, you can troubleshoot tags in Google Tag Manager. Also, check Google's Tag Manager help center and Google Tag Manager community for more support resources.

Why is Google Analytics integration no longer tracking data?

Google Analytics tracking is disabled when Google Tag Manager is enabled by default so it does not conflict with Google Tag Manager. You should not expect to see any UA-IDs firing unless you have already successfully set up Universal Analytics via tag managers in your Google Tag Manager. If you want to set up both Universal Analytics and Google Analytics 4, refer to Setting up Tag IDs.

Need more help?

Any questions about data tracking, tags, or functionality, refer to Google's Tag Manager help center and the Google Tag Manager community.

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

Downloads