Google Tag Manager Advanced Setup Guide

This article covers integrating GTM with Teachable and further creating integrations with GA4, Meta, TikTok, LinkedIn, and Pinterest within GTM, as an alternative to installing each integration separately.

It focuses on the e-commerce events that can be configured for all these tools using the tracking enabled by the Teachable platform.

This article is provided only as a general guide and Teachable Support will not be able to provide any additional guidance on this advanced customization. We recommend always consulting with the most up to date documentation from Google and other analytics providers.

NOTE: You should either use the native integration for these tools, or the integration through GTM outlined below. Using both may cause duplicate purchase events or revenue numbers in your analytics reporting tools.

Installing Google Tag Manager

Visit the App Hub and select Google Tag Manager to open the installation menu:

Select Install to open the installation menu:

Find the GTM container ID in blue when you open your GTM container menu:

Copy the container ID and paste it into the installation menu, then select Install.

You are now ready to track page view, add to cart and purchase events in GTM. Next, we'll cover how to set up tags for your other analytics tools.

Google Analytics

To ensure you are tracking the events page_view, add_to_cart, and purchase within GA4, you will need to build those tags in GTM.

Page view

The Google Tag will connect your site to Google Analytics. It loads the tracking library, sets your GA4 ID, and sends the first page_view event.

All other GA4 event tags rely on it — it’s like the foundation for your GA4 tracking setup. This is how it will look when you configure it:

You can find your Tag ID in the data stream section in GA4. To find it, please access your GA4 account navigate to Admin > Data Collection, then Modification > Data Streams and select your web data stream. You will see this window:

Please copy the measurement ID and paste it into the Tag ID box for the Google Tag.

Make sure to trigger this tag with page initialization so that the page_view is fired at the earliest instance.

In the above example, the send_page_view parameter is set to true. This will explicitly fire the page_view event.

Add to cart

When a user selects a purchase button and visits the checkout page, Teachable triggers a dataLayer event called add_to_cart.

This event will follow the structure below:

dataLayer.push({

event: "add_to_cart",

ecommerce: {

currency: "USD",

value: 1,

tax: 0,

coupon: null,

items: [

{

item_id: "2781544",

item_name: "Testing Course",

item_variant: "Testing Course",

price: 1,

quantity: 1

}

]

}

});

To send this information to GA4, you will need to create another tag, following the configuration below:

Under Measurement ID, provide the same tag ID you use for the Google Tag
Enter add_to_cart as the Event Name.
Select More Settings and under Ecommerce please choose Send Ecommerce data as a Data Layer. This will allow all the parameters (item name, value, etc.) that are being passed with the add_to_cart event to automatically be sent to GA4.

The dataLayer code shown above will be visible to GTM as a custom event so we can set the trigger for this tag as a custom event called add_to_cart as well. The setup is shown below:

Purchase

When a user completes a purchase, Teachable will trigger a dataLayer event called purchase.

This event will follow the structure below:

dataLayer.push({

event: "purchase",

ecommerce: {

transaction_id: "179446906",

value: 1,

tax: 0,

currency: "USD",

coupon: null,

items: [

{

item_id: "6239738",

item_name: "Testing Course",

item_variant: "Test Pricing Plan",

price: 1,

quantity: 1

}

]

}

});

Just like add_to_cart, you can create a tag for purchase as well, following the configuration below:

This is set up almost exactly as the add_to_cart tag. The only difference is that it will be triggered on a custom event called purchase. You need to configure that trigger as shown below:

Now, all the purchase information will be sent to GA4, providing you with the e-commerce data for each transaction.

Meta Pixel

You can track the page_view, add_to_cart, and purchase events within Facebook using GTM.

Page view

To configure a page view tag, visit your Meta account and copy your Pixel ID. For more information on finding your Pixel ID, please reference these instructions from Meta.

Next, you will need to create a custom HTML tag using the code below:

!function(f,b,e,v,n,t,s)

{if(f.fbq)return;n=f.fbq=function(){n.callMethod ?

n.callMethod.apply(n,arguments) : n.queue.push(arguments)};

if(!f._fbq)f._fbq=n;

n.push=n; n.loaded=!0; n.version='2.0';

n.queue=[]; t=b.createElement(e); t.async=!0;

t.src='https://connect.facebook.net/en_US/fbevents.js';

s=b.getElementsByTagName(e)[0];

s.parentNode.insertBefore(t,s)}(window, document,'script');

fbq('init', 'YOUR PIXEL ID GOES HERE');

fbq('track', 'PageView');

</script>

Please set this tag to fire on a trigger of All Pages as shown below:

This tag will now fire on every page view and send that information to your Meta account.

Add to Cart

When a user selects a purchase button and visits the checkout page, you can trigger an add_to_cart event for Meta using another Custom HTML tag.

if (typeof fbq !== 'undefined' && {{DLV - ecommerce}}) {

var ec = {{DLV - ecommerce}};

var item = ec.items && ec.items[0];

if (item) {

fbq('track', 'AddToCart', {

content_ids: [item.item_id],

content_name: item.item_name,

content_type: 'product',

value: ec.value,

currency: ec.currency

});

}

</script>

This custom HTML tag will need to be set up with the add_to_cart trigger as shown below:

You also need to ingest the ecommerce data from GTM, defining the {{DLV - ecommerce}} variable. To do so, please navigate to the variable section of GTM and create a variable:

Now, when the tag is published, all the add_to_cart e-commerce data will be sent to Meta.

Purchase

When a user completes checkout, you can trigger a purchase event using another Custom HTML tag:

if (typeof fbq !== 'undefined' && {{DLV - ecommerce}}) {

var ec = {{DLV - ecommerce}};

var content_ids = ec.items.map(function(item) {

return item.item_id;

});

fbq('track', 'Purchase', {

content_ids: content_ids,

content_type: 'product',

value: ec.value,

currency: ec.currency

});

}

</script>

This tag should be set up to fire with the custom purchase trigger as shown below:

Now, the purchase event details will be sent to Meta as well.

TikTok

You can track the page_view, add_to_cart, and purchase events for TikTok using GTM as well.

Page view

You will need to create a custom HTML tag using the code below:

!function (w, d, t) {

w.TiktokAnalyticsObject = t;

var ttq = w[t] = w[t] || [];

ttq.methods = ["page", "track", "identify", "instances", "debug", "on", "off", "once", "ready", "alias", "group", "enableCookie", "disableCookie", "holdConsent", "revokeConsent", "grantConsent"];

ttq.setAndDefer = function (t, e) {

t[e] = function () {

t.push([e].concat(Array.prototype.slice.call(arguments, 0)))

}

};

for (var i = 0; i < ttq.methods.length; i++) {

ttq.setAndDefer(ttq, ttq.methods[i])

}

ttq.instance = function (t) {

for (var e = ttq._i[t] || [], n = 0; n < ttq.methods.length; n++) {

ttq.setAndDefer(e, ttq.methods[n])

}

return e

};

ttq.load = function (e, n) {

var i = "https://analytics.tiktok.com/i18n/pixel/events.js";

ttq._i = ttq._i || {};

ttq._i[e] = [];

ttq._i[e]._u = i;

ttq._t = ttq._t || {};

ttq._t[e] = +new Date;

ttq._o = ttq._o || {};

ttq._o[e] = n || {};

var o = document.createElement("script");

o.type = "text/javascript";

o.async = true;

o.src = i + "?sdkid=" + e + "&lib=" + t;

var a = document.getElementsByTagName("script")[0];

a.parentNode.insertBefore(o, a)

};

ttq.load('CRGA82BC77UB15K07650');

ttq.page();

}(window, document, 'ttq');

</script>

Please set up the trigger to be All Pages, configuring this tag with a priority of 100 so it will trigger before other TikTok tags you may set up.

Add to Cart

There are two ways you can configure this event. One option is a simple notification to TikTok, using this custom HTML tag:

ttq.track('AddToCart');

</script>

This custom HTML tag can be fired on the add_to_cart trigger, following the configuration below:

To include more data will be more complicated, and you can instead use this Custom HTML tag:

ttq.track('AddToCart', {

contents: [{

content_id: '{{DLV - ecommerce.items.0.item_id}}',

content_name: '{{DLV - ecommerce.items.0.item_name}}',

price: {{DLV - ecommerce.items.0.price}},

quantity: {{DLV - ecommerce.items.0.quantity}}

}],

value: {{DLV - ecommerce.value}},

currency: '{{DLV - ecommerce.currency}}'

});

</script>

This code has quite a few variables that we will need to define in GTM.

Please navigate to the variables menu in GTM, and create the {{DLV - ecommerce.items.0.item_id}} variable:

You will notice that the variable identifier is the name of the variable as well. Please repeat this step for all of the other variables included in your Custom HTML tag.

Purchase

The simple signal for a purchase is shown below:

ttq.track('Purchase');

</script>

To send the more detailed array of data, you would use the following Custom HTML tag:

(function() {

var ecommerce = {{DLV - ecommerce}};

var contents = [];

if (ecommerce && ecommerce.items) {

for (var i = 0; i < ecommerce.items.length; i++) {

var item = ecommerce.items[i];

contents.push({

content_id: item.item_id,

content_name: item.item_name,

price: parseFloat(item.price),

quantity: item.quantity

});

}

ttq.track('Purchase', {

contents: contents,

content_type: 'product',

value: parseFloat(ecommerce.value),

currency: ecommerce.currency,

order_id: ecommerce.transaction_id,

description: window.location.href

});

})();

</script>

In this code, the key portion is the {{DLV - ecommerce}} array. If you haven't defined this variable when setting up the Add to Cart event, you should do so now.

As before, add this code as a custom HTML tag to fire on the purchase trigger as shown below:

You can track page_view, add_to_cart and purchase events in LinkedIn.

Page view

GTM already has a standard tag for LinkedIn. Search for the tag and configure the page view tag as shown below:

The Insight Tag ID can be found in your LinkedIn Ads account.

Add to cart

This conversion needs to be first set up in LinkedIn, as in the example below:

The next step will provide the conversion ID to use:

Use this code to set up a Custom HTML tag as shown below:

Purchase

You will need to create the conversion in LinkedIn, as we did for add_to_cart above.

NOTE: LinkedIn doesn't currently support passing the value of a purchase directly from GTM to LinkedIn. You will also need to assign a set value for the conversion, which will be used regardless of the product being sold.

Create a Custom HTML tag with the provided code:

You can track page views, add_to_cart events, and purchase events in Pinterest.

Page view

GTM already has a standard tag for Pinterest. Search for the tag and configure the page view tag as shown below:

Configure without the email address and as Base Code Only (no event) option, this will trigger the page view for every page.

Add to Cart

You can configure this tag to include the e-commerce values from the standard GTM events, as shown below:

The values within, e.g. {{DLV - ecommerce.items.0.item_id}} match up with the dataLayer exactly as named. The variable structure is shown below:

Please repeat this step for all of the other variables included in your Pinterest add_to_cart tag.

Purchase

To track purchases with Pinterest, you can use the Custom HTML tag below:

// Build contents array for Pinterest

var items = {{DLV - ecommerce.items}};

var contents = [];

if (items && Array.isArray(items)) {

for (var i = 0; i < items.length; i++) {

contents.push({

product_id: items[i].item_id,

product_name: items[i].item_name,

quantity: items[i].quantity,

price: parseFloat(items[i].price)

});

}

// Send Purchase event to Pinterest

pintrk('track', 'checkout', {

value: parseFloat({{DLV - ecommerce.value}}),

order_quantity: items.reduce(function(sum, item){ return sum + item.quantity; }, 0),

currency: "{{DLV - ecommerce.currency}}",

order_id: "{{DLV - ecommerce.transaction_id}}",

line_items: contents

});

</script>

Set up this tag with the purchase trigger:

Now, all the products will be sent to Pinterest with the other e-commerce parameters that we have configured.