Google Tag Manager Integration

Matthew Wall
  • Updated

Google Tag Manager (GTM) is a powerful tool to manage JavaScript and HTML tags that you want to install on your storefront. While, we have a lot of native integrations where you can simply paste an ID or API key into Uscreen, GTM will allow you to install scripts needed for software that we might not support. 

If you're curious about some of the awesome things GTM can do we recommend having a read of the GTM Developer Guide. It's a heavy read, but worth it for understanding GTM. There's also a nice YouTube walkthrough here for those who would prefer a broad overview.

Get_GTM_ID.gif

In GTM, you may need to create an account if you haven't done so already. Make sure you select Web Platform when creating the account. On your GTM dashboard, we're looking for the container ID. You'll find it in the top right and it looks something like this:

GTM-MLG77GX (make sure to use your own container ID)

Now let's add this ID into Uscreen.

Add_GTM_ID.gif

Navigate to Settings > Integrations and on Google Tag Manager click connect, you'll be prompted to enter your container ID and once added you can Connect. 

Technical Specs for Custom Events We Manage

We automatically push the following custom events into GTM as customers navigate through your storefront and make purchases, however, you must add these as User-Defined Variables in GTM to be able to use them in your tags or triggers:

  1. ViewContent - Content is viewed in your storefront. This will fire when user visits any content page (ie. program page; url starts with /programs/{link_to_program}). It does not trigger upon playing a video.
  2. InitiateCheckout - Customer has chosen the content or subscription they want to purchase and has landed on the Customer information form(needs to fill out email, name, password)
  3. Lead - Customer completes Customer information form(email, name, password are entered and validated)
  4. AddPaymentInfo - Customer completes the Complete Order form (successfully enters their payment information and is validated)
  5. Purchase - In their first transaction the AddPaymentInfo event and Purchase event will both fire. Subsequent purchases will only fire the Purchase event if their payment information is still saved.

Let's add these events as User Defined Variables in GTM.

Custom_GTM_Variables.gif

Navigate to Variables and click New under the User-Defined Variables section. For whichever variable you want to use, paste it exactly how it is above into the Name field in the top left and then click the Variable Configuration section. In the list of variables select Custom Event. Once saved your variables are ready to be used.

All events are going to push data like in the example below with only the event name changing to reflect the type of event:

dataLayer.push({
 'event': "InitiateCheckout",
 'content_name': "Monthly Subscription",
 'value': 9.99,
 'currency': "USD"
 });
Value sent is always the amount without any discounts, even after a coupon has been applied.

Related articles