Advanced Tracking with Google Tag Manager

Use Element451's Custom Events for advanced actions in Google Tag Manager.

Timothy Davis avatar
Written by Timothy Davis
Updated over a week ago

Overview

As covered in What is Tracked in Element451 & Why Add the Tracking Pixel, Element451 will automatically track the activity that takes place in Element451 and will track page views and link clicks that happen on Element451 pages. This information is logged within Element. To track the activity on your institution's web pages, you can set up a tracking pixel, and the how-to steps are outlined in How to Set up Element451 Tracking Pixel in Google Tag Manager.

This article will cover how to use Google Tag Manager to look for the presence of custom events and custom variables in the data layer and then pass that information on to Google Analytics.

Element451 pushes custom events and variables to the Google Tag Manager data layer. Tag Manager can detect those events. You can then use those custom events as Triggers within Tag Manager. Tag Manager can fire Tags and pass along those variable values to other tools like Google Analytics.

Common Use Cases:

  • Logging custom events in Google Analytics

  • Logging Ad conversions in a digital ad platform, like Google Ads or Meta.

  • Triggering retargeting ads

Be advised these use cases are not configured in the Element451 platform. They take place entirely in Google Tag Manager or other third-party platforms. The Element451 Customer Success team can only confirm that your Google Tag Manager container is present on the Page or Site where it is deployed. They can not confirm your Google Tag Manager or third-party platform configurations are correct.


Custom Event Documentation

Forms

Custom Events

ā€œformSubmittedā€

when the main form is submitted

ā€œformSubmittedLongā€

when follow-up is submitted

Custom Variables

ā€œformIDā€

Element451 form guid*

ā€œformNameā€

Element451 form name

Applications

Custom Events

ā€œApplication Startā€

when the user completes the registration form and creates an account on the application site.

ā€œApplication Completeā€

when the user achieves an application completion percentage of 100%.

ā€œApplication Submitā€

when the user signs and submits an application.

Custom Variables

ā€œapplicationGuidā€

application guid

ā€œapplicationNameā€

application name

A screenshot of the Google Tag Manager debug interface, showing the data layer value of an Application Start event.

Events

Custom Events

ā€œEvent Registrationā€

when event registration is submitted

ā€œEvent Registration Cancelledā€

when event registration is cancelled

Custom Variables

ā€œeventGuidā€

element event guid

ā€œeventNameā€

element event name

ā€œeventCategoriesā€

element event categories

ā€œeventDateā€

element event date


Recommended General Setup in Google Tag Manager

Follow this guide to set up Tag Manager to capture Element451 custom events and variables. This will enable you to use them in other parts of Tag Manager.

Be advised that if you are not the Google Tag Manager administrator at your institution, you may need their permission to make some of these changes. Be sure to notify them and pass this article along for reference.

Step 1: Turn on "Event" Built-In Variable

  1. In Google Tag Manager, open the Variables tab from the left-side menu.

  2. Find the Built-in Variables section and click Configure.

  3. From the menu, select Events under Utilities.

Step 2: Create Custom Variables for each Element Variable

  1. Under the Variables tab, locate the User-Defined Variables section and select New to create a new variable.

  2. Title the variable after Element Custom Variable. Suggesting naming "element451-formID"

  3. Click the Variable Configuration card to edit.

  4. From the menu, choose Data Layer Variable.

  5. For Data Layer Variable Name, enter Element Custom Variable name (i.e. "formID"

  6. Click Save in the top right corner to save the variable.

  7. Repeat for each listed below:

    1. formID

    2. formName

    3. applicationGuid

    4. applicationName

    5. eventGuid

    6. eventName

    7. eventCategories

    8. eventDate

      A screenshot of the Google Tag Manager interface, showing the settings and buttons required to complete the above.

Step 3: Create a Trigger for each of Element's Custom Events

  1. In Google Tag Manager, open the Triggers tab from the left-side menu.

  2. Select "New" in the top right of the screen to create a new Trigger.

  3. Name the Tigger. Suggesting naming "Element451 - Custom Event - formSubmitted"

  4. Click on the Trigger Configuration card to edit.

  5. From the menu, select "Custom Event" under "Other".

  6. For the Event Name, enter the Custom Event name (i.e. "formSubmitted"). It must be exact.

  7. Save the Trigger.

  8. Repeat for each Custom Event:

    1. formSubmitted

    2. formSubmittedLong

    3. Application Start

    4. Application Complete

    5. Application Submit

    6. Event Registration

    7. Event Registration Cancelled

      A screenshot of the Google Tag Manager interface, showing an example trigger discussed above.

Completing this setup will allow Tag Manager to detect Element's Custom Events, store Element Variables for use in Tags, and Trigger Tags based on Custom Events


Recommended Setup for Sending Events to Google Analytics (GA4)

Create Tags in Google Tag Manager that will log an events in Google Analytics when triggered. Capture Element Form Submissions, Application Actions, and Event Registrations in Google Analytics.

Create a Google Analytics Event Tag for Form, Application, and Event

  1. Open the Tags tab from the left-side menu.

  2. Select "New" in the top right of the screen to create a new Tag.

  3. Name the Tag. Suggested naming "GA4 - Element451 - Milestone - Form"

  4. Click the Tag Configuration card to edit.

  5. From the menu, select "Google Analytics: GA4 Event".

  6. For the Configuration Tag field, select your GA4 Configuration Tag.

  7. For Event Name, enter "Milestone".**

  8. In the Event Parameters section, create the following

    • Parameter Name: "action", Parameter Value: {{Event}}

    • Parameter Name: "guid", Parameter Value: {{element451-formID}}

    • Parameter Name: "form-name", Parameter Value: {{element451-formName}}

  9. Tip: The Parameter Values use variables set up under Recommended General Setup. Use the lego plus icon next to the field to insert variables into fields.

  10. The Tag will fire with multiple Triggers, so set the Triggers to:

    • Element451 - Custom Event - formSubmitted

    • Element451 - Custom Event - formSubmittedLong

      a screenshot of the Google Tag Manager interface, showing the settings of an example Tag discussed above.

  11. Repeat this process to create an "Element451 - Milestone - Application" Tag.

    • Event Name = "Milestone"

    • Event Parameters:

      • Parameter Name: "action" | Parameter Value: {{Event}}

      • Parameter Name: "guid" | Parameter Value: {{element451-applicationGuid}}

      • Parameter Name: "app-name" | Parameter Value: {{element451-applicationName}}

    • Triggers:

      • Element451 - Custom Event - Application Start

      • Element451 - Custom Event - Application Complete

      • Element451 - Custom Event - Application Submit

  12. Repeat this process to create an "Element451 - Milestone - Event" Tag.

    • Event Name = "Milestone"

    • Event Parameters:

      • Parameter Name: "action" | Parameter Value: {{Event}}

      • Parameter Name: "guide" |Parameter Value: {{element451-eventGuid}}

      • Parameter Name: "event-name" | Parameter Value: {{element451-eventName}}

      • Parameter Name: "event-cat" | Parameter Value: {{element451-eventCategories}}

      • Parameter Name: "event-date" | Parameter Value: {{element451-eventDate}}

    • Triggers:

      • Element451 - Custom Event - Event Registration

      • Element451 - Custom Event - Event Registration Cancelled

* - A "guid" or Globally Unique Identifier is a unique ID for assets within Element451.

** - Why "Milestone"? These activities roughly correspond to Milestones within Element451.


Using the Meta (Facebook) Pixel

The Meta Ads Manager requires the Meta Pixel to be deployed on each page where pageviews and conversion events are logged.

Deploying the Meta Pixel on Element451 Pages

If your Google Tag Manager instance already has a Tag for the Meta Pixel, ensure that the Tag will fire on Element451 Pages. If the Tag is triggered by "All Pages," this should work without issue. If the Tag is triggered only on some pages, you may need to adjust the trigger to include your Element451 Pages.

Custom HTML Deployment

The Meta Pixel can be deployed in a variety of ways. One way is via a "Custom HTML" tag. This tag allows you to manually paste the pixel onto your website. Note that, by default, the pixel is only configured to capture pageview events. Additional events, like lead events, need to be configured in the code.

Community Template Facebook Pixel Tag Deployment

A more user-friendly option for deploying the Facebook pixel is via the Community Template Facebook Pixel Tag from Meta, show below.

This template provides an interface where the Pixel ID can be easily added, and the Event selected. By default, the Event will be set to "PageView". The list of default events can be found here. Deploying this tag in this configuration will send pageview events to your Meta Ads Manager, which you can view in the Meta Ads Events Manager.

Element451 Custom Events and Meta Ads Events

The Custom Events provided by Element451 to Google Tag Manager do correspond to the standard events supported by Meta Ads. Here is our recommended pairs.

Element451 Custom Event

Meta Ads Event

formSubmitted

Lead

formSubmittedLong

Lead

Application Start

Complete registration

Application Submit

Submit application

Event Registration

Complete registration

Meta Ads Domain Verification

Meta Ads requires the website domain on which your ads will convert to be verified. There are several options to verify your domain, but only the DNS TXT file method will work with Element451 Pages, and it will only work if you have configured an external domain for your Pages.

If your Pages have been configured as subdomains of your main website (i.e. "info.university.edu"), you will have to add a TXT file to your main website's DNS. If your main website's DNS already contains this file, verification should happen automatically for your Pages.

If your Pages have been configured as a separate domain from your main website (i.e. "universityadmissions.com"), you will need to add a TXT file to this domain's DNS.


Recommended Setup for Sending Events to Meta Ads

Create Tags in Google Tag Manager that will log an events in Meta Ads when triggered. Capture Element Form Submissions, Application Starts, and Event Registrations.

Step 1: Create a Community Template Facebook Pixel Tag for Form Submissions, Application Starts and Event Registrations

  1. Open the Tags tab from the left-side menu.

  2. Select "New" in the top right of the screen to create a new Tag.

  3. Name the Tag. Suggested naming "FB - Element451 - Form Submit"

  4. Click the Tag Configuration card to edit.

  5. From the Community Template menu, select "Facebook Pixel (by facebookarchive)".

  6. For Event Name, select "Lead"

  7. In the Object Properties section, select "Add Property" and create the following

    • Property Name: "content_name", Property Value: {{element451-formName}}

  8. Tip: The Parameter Values use variables set up under Recommended General Setup. Use the lego plus icon next to the field to insert variables into fields.

  9. The Tag will fire with multiple Triggers, so set the Triggers to:

    • Element451 - Custom Event - formSubmitted

    • Element451 - Custom Event - formSubmittedLong

  10. Repeat this process to create an "FB - Element451 - Application Start" Tag.

    • Event Name = "CompleteRegistration"

    • Event Parameters:

      • Property Name: "content_name" | Property Value: {{element451-applicationName}}

    • Triggers:

      • Element451 - Custom Event - Application Start

  11. Repeat this process to create an "FB - Element451 - Event Registration" Tag.

    • Event Name = "Milestone"

    • Event Parameters:

      • Property Name: "content_name" | Property Value: {{element451-eventName}}

    • Triggers:

      • Element451 - Custom Event - Event Registration

* - A "guid" or Globally Unique Identifier is a unique ID for assets within Element451.

Did this answer your question?