Google Tag Manager
Quick start guide for setting up your Google Tag Manager.
Google Tag Manager
The Google Tag Manager integration allows you to send purchase events to Google Tag Manager.
There are 2 ways to integrate Google Analytics with your checkouts:
- Server Side Integration - CheckoutJoy sends events via the backend to Google Analytics. This is the easiest method as it don't require any tracking scripts and is guaranteed to fire only once with a conversion.
- Thank-you Page Integration - you install the tracking script on your thank-you pages where the customer lands after making a purchase.
Do the server side integration if you're not sure which option to use.
Server Side Integration
Setting up your account details
Navigate to the Google Analytics Setup Page and enter your account details in the settings form.
| Setting | Description |
|---|---|
| Measurement ID | The identifier for a Data Stream. Found in the Google Analytics UI under: Admin > Data Streams > choose your stream > Measurement ID |
| API Secret | An API Secret that is generated through the Google Analytics UI. To create a new secret, navigate in the Google Analytics UI to: Admin > Data Streams > choose your stream > Measurement Protocol > Create |
Thank-you Page Integration
With this integration, you add the GA tracking script to the Thank-you page set up for your checkout. Since your customers
will only ever see the thank-you page after a successful purchase, this is where your conversion, or purchase
tracking will happen.
The required transaction information like totals, taxes, products etc. are passed to the thank-you page as query parameters.
There is a risk of duplicate events using this method, e.g. if the customer refreshes the thank-you page, however it is unlikely. If you need pinpoint accuracy with GA events, then use the Server Side Integration instead.
Tracking Code Example
The following code snippet is an example of how to send a purchase event to Google Tag Manager.
You can use this code snippet as a reference to send purchase events to Google Tag Manager. Replace YOUR_GTM_ID with your Google Tag Manager ID.
The code snippet must be placed on the Thank You page of your checkout flow.
<!-- 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','YOUR_GTM_ID');</script>
<!-- End Google Tag Manager -->
<script>
const urlParams = new URLSearchParams(window.location.search);
const total = urlParams.get('total');
const customerName = urlParams.get('customerName');
const customerEmail = urlParams.get('customerEmail');
const currency = urlParams.get('currency');
const productId = urlParams.get('productId');
const productName = urlParams.get('productName');
const purchaseId= urlParams.get('purchaseId');
dataLayer.push({
event: "purchase",
ecommerce: {
fullname:customerName,
email:customerEmail,
transaction_id: purchaseId,
value: total,
currency: currency,
items: [
{
item_id: productId,
item_name: productName,
price: total,
quantity: 1
}]
}
});
</script>