How to Setup Google Tag Manager DataLayer on Recharge

UPDATE: Looking for Facebook Conversion API setup for Recharge? Read all about how to get started!

—

If you are selling subscriptions on Shopify then chances are you are using Recharge to do this.

Some of the most popular questions we get from customers of our GTM Suite app for Shopify is:

• How can I set up GTM on Recharge?
• How do I setup the dataLayer on Recharge?
• How can I send transactions to Google Analytics via GTM?
• How can I configure my marketing tags to send from Recharge via GTM?

I will show you how you can do all of this!

But first a quick background on how Recharge <> GA works today.

Recharge <> Google Analytics Native Integration

Recharge has a native integration with Google Analytics that will send pageview data for each step of their checkout process AND it will send a transaction to Google Analytics for the first time order of a customer.

But it’s more important on what this integration does not do.

In addition to not creating a dataLayer on the thank you page to use in 3rd party marketing scripts, this native integration does not send recurring orders to Google Analytics either.

Here’s a hypothetical example of me purchasing a subscription to a Juice Cleanse once/month:

• August 1st: I place my first order subscribing to get a new cleanse auto-delivered to me monthly. This transaction is sent to Google Analytics.
• September 1st: My renewal order is created by Recharge and sent to Shopify automatically without me having to do anything. I receive my email confirmation that my order has been shipped. This transaction IS NOT sent to Google Analytics. 

If you want to send this recurring transaction to Google Analytics then you’ll need to use one of two apps on the Shopify App store: our own Elevar subscription app that sends this recurring order data to GA or Littledata which has their own integration with Recharge.

Once you’ve taken this step then you will have recurring revenue visualized inside of Google Analytics.

How to Setup GTM + DataLayer on Recharge

In addition to the native GA integration, Recharge also has a configuration that allows you to input third party scripts that will fire on the checkout page – just like Shopify has.

This is where I’m going to show you how to build your own dataLayer for GTM on Recharge.

When logged into Recharge inside of your Shopify store then go to Settings > Checkout as shown here:

Then scroll down to find the Thank You Page script settings:

And copy this dataLayer snippet below, including the GTM script at the bottom (update the affiliation field with your store name):

{% if first_time_load %}
<script>
window.dataLayer = window.dataLayer || [];
</script>

<script>
window.dataLayer.push({
'event': 'subscriptionTransactionComplete',
'CustomerEmail': '{{ email }}',
'CustomerFirstName': '{{ first_name }}',
'CustomerLastName': '{{ last_name }}',
'ecommerce': {
'purchase': {
'actionField': {
'id': '{{ order_name }}', 
'affiliation': '',
'revenue': {{ total_price }}, 
'tax': {{ total_tax }},
'shipping': {{ total_shipping }},
'coupon': '{{ discount_code }}'
},
'products': [ {% for item in line_items %} { 'name': '{{ item.name }}', 'productId': '{{ item.product_id }}', 'id': '{{ item.sku }}', 'price': {{ item.price }}, 'brand': '', 'category': '', 'variant': '{{ item.variant_title }}', 'quantity': {{ item.quantity }} }, {% endfor %} ]
}
}
});
</script>
{% endif %}

<!-- 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-1111111');</script>
<!-- End Google Tag Manager -->

You’ll need to update the GTM-1111111 to match your own GTM container ID.

What I have included here is the following:

1. An event push called subscriptionTransactionComplete which is what you can use as a trigger inside of GTM
2. Order level customer details (which you can remove if you don’t want/need due to your own GDPR requirements), otherwise these can be hashed in GTM before being sent to another third party
3. The Google enhanced ecommerce dataLayer structure that includes order details (like revenue) and product line item details

If you are already using our GTM Suite app from the Shopify App Store then these variables (like revenue, etc) will automatically map to the variables we provide in our GTM container.

You will need to create a new event in GTM that looks like this:

Which will allow you to configure marketing tags inside of GTM that can be mapped to this trigger.

Here’s one use case to help get your marketing juices going:

We’ve broken out the Facebook (and other third party) tags to send an event from Shopify called “Transaction” and then another event for subscription purchases called “Subscription Purchase”.  This allows our customers to run their CAC, ROAS, and other performance reports separated out by product type.

Bonus: How to Send Transaction Events to GA from Recharge

We’ve had a few customers come to us with issues that no transactions are being sent from Recharge to GA for the first order, even with the native GA <> Recharge integration setup.

We’ve been able to validate this by using the GA Debugger Chrome Extension (it’s a very odd bug!).

But GTM to the rescue: we were able to fix this issue by sending a transaction event from GTM using this same trigger above which looks like this:

Once published then this will begin sending transaction events to GA!

Interested in having the experts at Elevar assist with your own Recharge & GTM & GA setup?

Send us an email to [email protected] and I’ll get you taken care of!

Please feel free to leave questions or comments below.

Thank you!

• ReCharge
• Shopify