Tracking with Google Tag Manager (Advanced)

Digioh supports tracking of conversion and other engagement events through Google Tag Manager (GTM), and onwards to advertising platforms such as Facebook, Google Ads, and LinkedIn. This app assumes that you already have GTM deployed on all pages of your site. There is no need to install GTM separately within the Digioh iFrame environment. If you use a tag manager other than GTM, such as Tealium for example, please contact Digioh support.

This app allows fine grained control of GTM Events and Variables based on:

  1. Box Display – gtm_display
  2. Box Page Display – gtm_display
  3. Redirect from Box – gtm_redirect
  4. Variables based on form data that you can use as conditions for other events – gtm_var
  5. Form submission at the page level – gtm_submit
  6. Box Close – gtm_close

If you don’t need to control the names of events or set variables, you can use the Basic GTM App instead.

Installing the Advanced GTM Tracking App in Digioh

To start, open your profile menu, top right, and select Custom JS (Apps).

Find the app “Google Tag Manager Metadata Controller” and click install. There are no app parameters, this app is completely controlled by metadata.

First, we need a quick introduction to Digioh Box Metadata. There are four types of key-value metadata, associated with Boxes, Pages, Page Elements, or Form Fields. All are configurable within the Box Editor.

  1. Box Level – at the bottom of the Widget Accordion
  2. Box Page Level – at the bottom of the Page Accordion (e.g. Main, Extra Page 1)
  3. Page Elements – at the bottom of the Page Accordion after clicking the element (i.e. a Button)
  4. Form Fields – at the bottom of the Page Accordion after selecting the form field (e.g. Name, Custom 1)

In GTM, Digioh generated events correspond to Custom Event Triggers:

Note that the Digioh metadata key indicates the type of event, when it triggers, whereas the metadata value is the name of the Custom Event in GTM. gtm_var is the exception, discussed later.

gtm_display

Setting metadata gtm_display = eventName will trigger a GTM custom event called eventName. You can set this at the Widget Level, and the event triggers once per Box display.

Alternatively, you can set it at the Page Level if you want events only on specific pages, or different events for different pages. For example, you may trigger events “page1”, “page2”, etc to track users through a progressive form.

gtm_redirect

Setting metadata gtm_redirect = eventName will trigger a GTM custom event called eventName before a button click redirect occurs. You set this as the Button element level in the Box Editor. You can simply click the Button in the editor to show the accordion, and metadata is near the bottom.

Give the event a name that corresponds logically to the redirect. Don’t use the full URL as that is not a valid GTM event name. Stick to letters, numbers, and underscores.

gtm_submit

Set gtm_submit at the page level to trigger an event for form submissions on that page. For progressive forms, you may choose to trigger this only on the last form, or trigger different events on all forms.

gtm_close

Set gtm_close=closeEventName at the Widget level to track close events.

gtm_var

Setting gtm_var at the form field level is what gives this app its power. gtm_var=varName will set the GTM variable “varName” equal to the value submitted in the form. This allows you to conditionally control GTM activity based on user form input.

For example, if you have a dropdown form element with 3 options, you can configure GTM Events to fire only when a specific choice is made. Create a Custom Variable in GTM to hold the value:

And here’s an example trigger in GTM that uses the variable conditionally: