Supports implementations where Analytics Method = either Google Analytics/UA or Google Tag Manager for event customer tracking. If the implementation is set up with Analytics Method = Google Tag Manager, all events triggered in the iframe are visible in this parent page's "dataLayer" console variable with a "brandFinder" prefix. If the implementation is set up with Analytics Method = Google Analytics/UA, all events triggered in the iframe are sent directly to the customer's Google Analytics/Universal Analytics account set in the Google Analytics or Universal Analytics ID implementation field, meaning iframe events will not be visible from this parent page as they are not in this page's dataLayer variable.
This guide is intended to help with Google Tag Manager (GTM) configuration for events forwarded from VIP's Brand Finder iframe application.
The event forwarding process for the Brand Finder application is made to fit smoothly into existing GTM containers. Insert the provided customer listener JavaScript tag into the <head> of the page containing the Brand Finder iframe, and add the "analytics=GTM" query string parameter to your iframe implementation (already done in this example page). The provided tag listens for events forwarded from the Brand Finder application, and adds them to the dataLayer array for use in your GTM account (GTM-K9477TX). This solution does not require the creation of a new GTM container, meaning you can use the same container already installed on the page containing the Brand Finder application for tracking Brand Finder events.
Events triggered within an iframe are not normally visible to the parent web page (the one containing the <iframe> tag). To circumvent this restriction and allow pages implementing the Brand Finder application to track events within the iframe, each event is forwarded to the parent webpage when it occurs. These events are added to the dataLayer array of the customer's implementing page with the prefix "brandFinder", where they are visible to the customer's GTM container and can be tracked like any other native event.
Forwarded event values can be added as user-defined variables and sent to any configured tag, just like any other built-in variables. To add a custom variable, go to the container of your implementing page in your GTM account, click "Variables", then under "User-Defined Variables", click "New". Click "Variable Configuration", then under the "Page Variables" section, click "Data Layer Variable". For the "Data Layer Variable Name" field, enter the dot notation path to the desired variable of the event. For example, to get the "event_category" variable, the variable name would be "brandFinder.event_category". All fowarded events will be added as attributes to a "brandFinder" object within the event. For a list of values passed with the brandFinder events, see the Brand Finder documentation. Under the "Data Layer Version" section, make sure "Version 2" is selected. Click "Save" and name the variable something unique, like "dlv - brandFinder event_category". This new variable will now be accessible like any other built-in variables for your GTM container.
Since the forwarded events are prefixed with "brandFinder" (e.g. "brandFinder.search"), they will not be automatically tracked by Google Tag Manager. These events can be easily tracked by going to the container of your implementing page in your GTM account, clicking "Triggers", then clicking "New". Click "Trigger Configuration", then under the "Other" section, click "Custom Event". For the "Event name" field, enter "brandFinder." followed by the event you want to act as a trigger (e.g. "brandFinder.click"). It is important that the "event name" matches the value of the "event" property of the event you want to act as a trigger. Some brandFinder events are brandFinder.search, brandFinder.click, brandFinder.page, and brandFinder.select. Visit the Brand Finder documentation for a full list of fired events. For the "This trigger fires on" section, select "All Custom Events". Click "Save", and name the trigger something unique like "bf - click". This event will now act as a trigger for your GTM container.
For a more detailed guide on grabbing data from custom variables, check out
this guidemade by MeasureSchool on Youtube.