Tracking iFrame Interactions

How to Trigger Facebook CAPI When User Interacts With an iframe Using GTM and Deviate Tracking

Overview

In some cases, Google Tag Manager and its triggers can’t track specific sequences of events, or very specific instances of events such as clicking inside of an iframe on a webpage. The solution is to use a data layer event alongside Deviate Tracking’s tag.

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. Ensure that GTM has already been installed. Or, install GTM onto any website or web application using this walkthrough.

Setup Deviate Tracking Variables

Follow best practices and configure the necessary Deviate Tracking variables in GTM before continuing installation by using this quick tutorial. This will save time and reduce mistakes.

Javascript can be used to trigger a custom event in GTM programmatically. By inserting the javascript event below, it is possible to track custom event triggers, such as form validations. Or, server-sent events such as sign ups or other dynamic server responses:

 

<script>dataLayer.push({‘event’: ‘eventname’});</script>

 

In order to correctly trigger this data layer event, two tags are needed to be created; 1) The tag that will track the iframe and 2) the Deviate Tracking tag template. Each of these tags will then have its corresponding triggers configured. Follow the steps below to install and configure these tags properly.

 

1a. Creating a Tag to track the iFrame

First, navigate to Tags in the left-hand side menu of the GTM Workspace. Click the ‘New’ button to open the Tag settings. Next, click within the Tag Configuration and select the ‘Custom HTML’ tag.