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>

Facebook Conversion API Calendly