How To Implement Google Analytics & GA4 Server-Side Tracking with Recharge

Elevar offers two ways to implement Google Analytics and GA4 server-side tracking:

1. Elevar’s server-side tracking
2. GTM server-side container (via Elevar)

If you are using your own GTM server-side container connected to Google Cloud then you can follow our related guide on this setup here.

Please note that you have complete control over how your data is being sent to GA including:

• How to manage recurring subscription orders from ReCharge
• Order and product ID type
• What additional channels you want to send to GA — like Facebook and TikTok Shop, Draft Orders, Global orders from third party apps, etc

You can configure each of these in the steps below without modifying any code on your website.

Please note: if you are on the unified Shopify checkout with ReCharge then the setup is the same with our base Google Analytics & GA4 server-side tracking guide for Shopify.

Add the following to the “Enable JavaScript on page 1 of checkout” box

var cartItems = cart_json.line_items;
window.dataLayer = window.dataLayer || [];
var cartProducts = [];
for (var i = 0; i < cartItems.length; i++) {
var item = cartItems[i];
cartProducts.push({
'id': item.sku,
'name': item.title,
'price': item.price,
'quantity': item.quantity,
'product_id':item.product_id,
'variant_id':item.variant_id
});
}
window.dataLayer.push({
"event": "dl_begin_checkout",
"event_id": getEventId(),
"cart_total": cart_json.subtotal_price,
"ecommerce": {
"currencyCode": cart_json.currency,
"checkout": {
"actionField": {"step":1},
"products": cartProducts
}
}
});
function getEventId(){
var ga = "";
var name = "_ga" + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
var ga = c.substring(name.length, c.length);
}
}
return ga + Date.now();
}

1. In your Elevar App, navigate to Server-Side > Select Add Destination > Find and select Google Analytics.

2. You’ll be taken to an Overview Page, select Get Started

This step allows you to control exactly what purchase events are sent to Google Analytics. You can block orders based on Source Channel Names, Order Tags or Order Gateways.

For Google Analytics, instead of blocking orders from being sent, we’d recommend implementing Source / Medium overrides in the Google Analytics ID Step. This will allow your orders in GA to match Shopify better & allow you to bucket offline orders like Recurring Orders or POS orders into their own designated Source / Medium.

You can then create different Views in GA to show “Website Only (No Recurring) Orders” vs “All Orders”.

However, if you do want to block orders from being sent to Google Analytics, here’s how you can do so!

This setting allows you to override the default last-click UTM parameters from a user visit.

If you are using the Shopify checkout then in many cases Shopify will store attribution data from the user in their path to purchase. It typically looks something like this:

When Shopify has UTM data on the “1st session” and Elevar has UTM data on the session the user converted on then you can choose which UTMs you want sent to Google Analytics.

And if you choose “first touch” but no UTMs exist on Shopify, then Elever will fallback to using UTMs that Elevar stores (and vice versa).

These are all connected to the same user through the GA cookie stored on the order as well.

Yes – this can be quite confusing or mind-blowing to analytics enthusiasts.

However we found that in some cases the UTM data stored on Shopify helped improve the accuracy of transactions.

This article contains a deep dive on the differences that you could see for your own store.

Plus you’ll see how attribution changes unexpectedly.

Add your GA4 Measurement ID

Add your GA4 Secret

It’s time to go live!

1. Select Go Live on the Overview Step

2. Be sure your Elevar GA Server-Side workspace in Step 1 is published.

3. Remove your pre-existing GA integration, including inside of your ReCharge settings:

4. Monitor your GA property via real time reports and/or your standard reports

If you have any questions please don’t hesitate to reach out to ask us for help.

In order to deploy Google Analytics via Google Tag Manager tags, you need to have a data layer implemented on your Shopify store that pushes customer, product, and order data that Facebook tags require.

If you don’t have a data layer for your Shopify store yet, then you can utilize Elevar’s data layer for Shopify. It’s a 1-click installation into your theme.

If you are still using ReCharge checkout (instead of unified checkout) you’ll need to manually add our data layer to the checkout thank you page settings.

Copy the script below and:

1. Update the currency code (if needed)
2. Input your GTM web container ID to replace the GTM-11111 placeholder
3. Paste into your thank you page script configuration in ReCharge checkout settings

{% if first_time_load %}
<script>
window.dataLayer = window.dataLayer || [];
</script>
<script>
window.dataLayer.push({
'event': 'dl_subscription_purchase',
"event_id": '{{ order_name }}',
"user_properties":{
"customer_id": "{{ customer.shopify_customer_id }}",
"customer_email": "{{ email }}",
"customer_first_name": "{{ first_name }}",
"customer_phone": "{{ shipping_address.phone }}",
"customer_last_name": "{{ last_name }}",
"customer_city": "{{ shipping_address.city }}",
"customer_zip": "{{ shipping_address.zip }}",
"customer_address_1": "{{ shipping_address.address1 }}",
"customer_address_2": "{{ shipping_address.address2 }}",
"customer_country": "{{ shipping_address.country }}",
"customer_province": "{{ shipping_address.province }}"
},
'ecommerce': {
'currencyCode':'USD',
'purchase': {
'actionField': {
'id': '{{ order_name }}',
'order_name': '{{ order_number }}',
'affiliation': 'ReCharge',
'revenue': {{ total_price }},
'discount_amount': {{ total_discounts }},
'tax': {{ total_tax }},
'shipping': {{ total_shipping }},
'sub_total': {{subtotal_price}},
'coupon': '{{ discount_code }}'
},
'products': [
{% for item in line_items %}
{
'name': '{{ item.name }}',
'product_id': '{{ item.product_id }}',
'id': '{{ item.sku }}',
'variant_id': '{{ item.variant_id }}',
'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 -->

In Google Tag Manager, navigate to Admin > Import Container.

Choose the Universal Analytics (for Client-Side) container that you downloaded in Step 1.

Import it into a new Workspace. You can title this workspace whatever you’d like. I titled mine Elevar Implementation.

Select Merge > Then elect to Overwrite conflicting tags, triggers, and variables.

Once you’re ready to publish, select the Submit button in GTM.

Then select Publish.