Tracking Popups with GTM

September 29, 2022 - by Cameron Tham

How to add CAPI Facebook Tracking the showing of a popup  Using GTM and Deviate Tracking

Overview (Quick two sentence overview)

In this tutorial, the Facebook Conversion API from Deviate Tracking is installed and configured to track a popup conversion event. The setup uses an Element Visibility trigger that’s simple to configure using this walkthrough.

Prerequisites

Make sure GTM is installed

Before adding CAPI Facebook Tracking to a website or web application, Google Tag Manager (GTM) must first be installed. Firstly, ensure that GTM has already been installed. If not, GTM can be installed onto any website or web application using this walkthrough.

Setup Deviate Tracking Variables

For best practices, configure Deviate Tracking variables in GTM before continuing installation. This can save time and reduce mistakes that are caused by a redundant task. Set up Deviate Tracking variables using this quick tutorial.

Creating a Trigger

Create a new Trigger so that the Deviate Tracking tag fires accordingly on the website or web application that GTM is installed on.

To begin, within the workspace tab in GTM, click and open Triggers in the left-hand side menu. Click ‘New’ to configure the Trigger

[Creating a new Trigger using the “New” button within the Triggers tab of the GTM Workspace]

Next, click the empty Trigger Configuration box and in the Choose Trigger Type menu options, select Element Visibility Type. Configure the trigger to the following options:

 

  • When to fire this trigger: Once per page
  • Minimum Percent Visible: 50
  • This trigger fires on: Some Visibility Events

 

Once ‘Some Visibility Events’ has been chosen, additional conditions will appear below that need to be specified. Set the first, newly appeared, dropdown from ‘Click Text’ to ‘Page URL’ or ‘Page Path’ to configure the Trigger to only fire on the popup page.

 

Next, copy the URL of the page with the popup to track. Either the entire page’s URL or just the page’s path is required to configure the Trigger to fire only on the popup page. The anatomy of a link follows below to quickly understand which option is needed.

 

  • Protocol (e.g. https://)
  • Hostname (e.g. www.deviatetracking.com)
  • Page Path (e.g. /2022/03/11/what-is-a-facebook-capi-solution/)
  • Query Parameters (e.g. ?utm_medium=email&utm_source=affiliate)

The page path is anything after the domain (e.g. .com, .edu, .org) including the forward slash that follows. If any parameters other than the page path is needed, use Page URL. If only the page path is needed, use the Page Path variable.

 

Now, set the ‘Contains’ filter in the second dropdown within condition where Page URL or Page Path was chosen. Paste the URL or Page Path in the third drop down.

Lastly, give an appropriate name to the Trigger – For example: [Trigger Type] – [What the Trigger does].

[Image of the aforementioned Trigger configurations for tracking a popup using Deviate Tracking]

 

The Trigger is now configured to fire only on the specified pages with a condition to fire – once an element is 50% visible. The final step in the Trigger configuration is to specify the popup through its Class or element ID. Element classes and IDs can be found using the Element Inspector of any browser as follows:

 

Right click on the iframe and select Inspect Element:

[Example of right clicking on a webpage to Inspect Element on Safari. Note: the iframe should be the element to be inspected.]

After right-clicking on the iframe, navigate to its HTML identifier, either as a class or element ID. Both the classname or ID will be found as an HTML attribute. The iframe’s classname and ID are identified below as an example:

[Identifying the Element’s class name in the Element Inspector]

[Identifying the Element ID  in the Element Inspector]

 

In Google Tag Manager, set the selection method to the attribute being used. Select CSS Selector if the classname is being used, or ID if the class ID will be used. If the CSS Selector method is chosen, then  a dot “.” must be added in front of the classname.

[Choosing the CSS Selector and adding a dot “.” to the classname within the Element Selector field]

Creating the Tag

Once the trigger has been configured, navigate to Tags in the left-hand side menu. Click the ‘New’ button to open the Tag settings. Next, click within the Tag Configuration and search the Community Template Gallery for ‘Deviate Tracking’ to find and select the Facebook Conversions API (CAPI) by Deviate Tracking tag.

 

Set the four Built in Variables that have already been pre-configured; Deviate Tracking Email, Deviate Tracking Key, Facebook Token, Facebook Pixel ID.

 

Now, set the Event Type to an appropriate FBQ Standard Event Type to match the intent of the Trigger, such as ViewContent. You can reference all of FBQ Standard Event types on Facebook/Meta’s Standard Events Reference guide here.

 

Lastly, set the trigger to the Element Visibility configuration that was just created.

[Image of configuring the Tag for Deviate Tracking using Built-In Variables, the AddToCart event type and the Element Visibility Triggering]]

 

 

Test and then publish

Before publishing the GTM Container, test that the Tag is firing accordingly on the correct pages using Preview Mode in GTM.

Tips

Below are useful tips for troubleshooting a popup event trigger in GTM.

 

Event is firing but popup is not displaying

If there is more than one element on the specified page that is matched by a CSS Selector, the trigger will fire the first time that each element is 50% visible, as configured on that page. If more than one element on the page shares the same ID, only the first matched element will fire the configured trigger. This is unless it is subsequently removed by an observed DOM change.

 

To resolve this or a similar issue, navigate to the Trigger configuration settings, enable ‘Set minimum on-screen duration and set to 600 milliseconds. Once enabled, a warning about site performance may appear.

[Setting the minimum on-screen duration to 600ms for the Element Visibility Trigger]

 

Element not being tracked regardless of popup status

If the element is not being tracked whether the popup is visible or not, ensure the class ID or class name is correct. Also ensure that the Page Path or Page URL is correct in the Trigger conditions.

 

Another option is to then enable ‘Observe DOM changes.’ This is found under the ‘Set minimum on-screen duration’ option inside the Trigger.

[Enabling the Trigger to observe DOM changes]

 

Alternatively, adjust the minimum percent visible on the Trigger to be higher or lower.

 

Preventing double firing

To prevent double firing of Tags, check the referrer page by adding a Built In Variable inside the Trigger. Choose to add another condition and select ‘Referrer’ in the first dropdown, ‘Contains’ in the second, and paste the webpage path that the user visits before landing on the popup page.

[Image of adding the Referrer Built In Variable and configuring it to the page visited before landing on the popup page]

 

Within the Tag configuration settings, selecting the Tag to fire Once Per Page may also prevent double firing.

 

In Tag configuration settings, choose Advanced Settings > Tag Firing Options > select Once Per Page.

[Image of selecting the Tag to fire One Per Page within the Deviate Tracking Tag Configuration]

 

Deviate Tracking PageView tag is configured on the same page

The popup page should have the Deviate Tracking Pageview Tag installed and firing as well. Follow this quick start guide to check or install the PageView tag from Deviate Tacking.

 

Test in Preview Mode (GTM)

Always test in Preview Mode before publishing and to check if the Triggers and Tags are firing properly on the correct pages. Most debugging can be resolved in Preview Mode inside GTM. Here’s a tutorial to walkthrough using Preview Mode in Google Tag Manager.

 

Use Test events mode in Facebook events manager

 

Alternatively, test events using the Test Events Tool in Facebook’s Events Manager if Facebook Pixel is installed on the website or web application in use. View this helpful walkthrough on testing with the Test Event Tool.

 

Please note: Make sure that test mode is off in the production environment. To do this, open the Tag configuration and under the ‘User Data Parameters’ is a checkbox asking to ‘Send as a Test Event?’ Ensure that this is unchecked when real data is being tracked. This option should only be enabled when Preview mode is being used in GTM.

[Setting the Tag to send data as a Test Event]