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
- Visit Google Tag Manager, and click Sign in to Tag Manager.
- Click Create Account.
- provide an Account name
- Container name (your website)
- and target platform.
- 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
- 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.
- 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.
- Copy the GTM Container ID in the upper-right hand corner of your Google Tag Manager dashboard.
- Go back to Recharge, from the merchant portal click Storefront and Checkout settings.
- Locate Google Tag Manager, and place the GTM Container ID.
- Click Save.
Step 3 - Setting up Tag IDs
Caution: If you decide to set up both UA and GA4 IDs, then follow the instruction steps below.
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.
- 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.
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.
When installed correctly, Google Tag Manager should fire off for every customer visit to your Address, Payment, and Thank You checkout pages.
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
- Open your Google Analytics dashboard, and select your GA4 property or create a new GA4 property.
- In Admin, go to Data Streams and click Add stream to create a data stream. Leave the Enhanced Measurement setting on.
- 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
- 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.
- 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
- Click the pencil icon to edit the properties.
- Select the configuration tag as the GA4 Configuration tag you just created.
- Name the event and select a trigger.
- 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.
- Open your Shopify admin portal, under Online Store select Themes.
- Go to Actions, click Edit Code, and in the Layout folder select “theme.liquid”.
- 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 -->
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s),
<!-- End Google Tag Manager -->
Step 5 - Test and verify your tags
- Use the Preview option in your Google Tag Manager and test that the correct tags are firing on the expected page views.
- After you’ve verified through testing, click Submit to publish your changes to live.
- 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.
- RechargeTransaction - Fires when someone converts on page 2 of the checkout.
- RechargeCheckout - A page view event for pages 1 and 2 of the checkout.
- 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.
- 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
'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
Sample of the Shipping page event
products: [ ... ]
Sample of the Billing page event
products: [ ... ]
Sample of the Transaction page event
products: [ ... ]
Google Tag Manager FAQs
Google Tag Manager is down, why isn’t it showing anything?
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?
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?
If you have any questions about adding your Google Tag Manager code to the settings in Recharge, reach out to the Recharge support team.
Didn’t find what you’re looking for?Contact us