Google Tag Manager – Triggers and Variables

Triggers: for events

Using the Tracklution Template in Google Tag Manager, each event has its own tag, and each tag need at least one trigger.

A trigger in Google Tag Manager is what defines the conditions that fire the tag, which sends the event to your server (Tracklution).

In the Preloaded Google Tag Manager setup, the triggers mostly utilizes dataLayer events. These are events that your website push to the dataLayer when for example, an item is added to a shopping cart, or when a contact form is submitted. These pushes to the dataLayer are usually prebuilt and included with your website builder, or managed by your website's web-developers. When we browse the website through Google Tag Manager Preview, we are able to see these dataLayer events, these are the ones that appear on the left side of your screen when inside Preview, for example Container loaded, DOM Ready, or Window Loaded. If dataLayer events with specific names like, form_submit, or add_to_cart happen on the website, this list is where you will see these events. In Google Tag Manager we can configure triggers that look for these dataLayer events, this is how most triggers are configured in the Preloaded Google Tag Manager setup.

If a certain action on your website uses a different name for the dataLayer event than the one configured in the Preloaded Google Tag Manager setup, you'll need to update the trigger with the event name from your dataLayer. This is case-sensitive, make sure to write the new name to match exactly.

Triggers can look for many more conditions than just a dataLayer event. Triggers can for example look for a specific web-page's URL (a thank-you page), website elements, or a specific click. The important thing is to find a unique condition for a website action that you want to tag as an event and send to your server. This can be very simple, or very complex, depending on how your website is built and what it is you define as an important action that you want to be tagged.

If you are very interested in web Google Tag Manager, I urge you to have a look at how the Preloaded Google Tag Manager setup is configured and how it works, and also → subscribe for Tracklution Academy's upcoming GTM series on YouTube.

Variables: for parameters

When you send an event, you often want to include additional information. These are your event parameters, and they are populated in Google Tag Manager by using variables.

A Google Tag Manager variable isn't much different than a trigger. When a trigger looks for a condition to fire a tag, a variable looks for a key to return a value, which then populates your event's parameter.

In the Preloaded Google Tag Manager setup, most of the variables, just like with the triggers, look for information (keys) from the dataLayer. The keys in the dataLayer follow hierarchies. Top level keys are found by just writing the name of the key in the variable. Keys that are nested within another key are found by writing both the top level key and the nested key in the variable separated by a dot.

Examples

• Top level key for a form submit event is often the form ID, this would be written in the variable as: form_id
• Parameter keys for a purchase event, like currency, are often nested under the ecommerce top level key, this would be written in the variable as: ecommerce.currency

These keys from the dataLayer are also case-sensitive, make sure to write the name of the key to match exactly. You can easily edit the name of your key by opening the Variables tab in Google Tag Manager, select the variable you need to edit and update the name of the key. 

Most variables in the Preloaded Google Tag Manager setup are native Data Layer Variables, but some variables have been built with JavaScript instead. The JavaScript variables however, are also just looking for keys from the dataLayer, and are also easy to edit. For the JavaScript variables, instead of one input field, you'll open the text editor to update the name of the keys. 

The reason why some variables have been built with JavaScript is for when the name for the key that the variable is looking for is less standardized. To find the key, the variable looks for many different names in order, following a list of potential key names. For example, the email variable for the ContactInfo tag uses JavaScript to look for potential names like: customer_email, user.email, or user_data.email etc.

You can update, add, or remove the potential names of the key directly in the text editor. Or, if you know exactly what the name of the key is, you can instead change this variable to a native Data Layer Variable and input that name of the key.