In this guide, you'll learn more about Heyflow's Google Tag Manager integration which is based on the dataLayer. In particular, we describe here, which tags are fired when and what properties are passed.
If you're new to Google Tag Manager and unfamiliar with the DataLayer, you might want to start here and here.
The dataLayer is connected to the Heyflow Events API: When an event occurs in the flow, data will be pushed into the dataLayer that the Google Tag Manager can react to.
The following events will be considered:
Event name | Payload |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
*) payload
In the heyflows-screen-leave
event, a value payload
is passed. This value is equal to the fields
value but filtered to only include fields that are part of the screen that was left, e.g.
{
...
payload: [
{
id: "slider-2d63fe7a-input",
label: "Value:",
value: "65",
values: [{name: "65", answer: "65"}],
variable: "slider-2d63fe7a",
sensitive: false,
screenID: "screen-7e55219a",
screenName: "screen-81b02c6d"
}
],
...
}
**) screens
In the heyflow-screen-leave
event, a value screens
is passed. This value is similar to the fields
value but structured as an object with the name of the screen as its key, e.g.
{
...
screens: {
screen-580f334a: [
{
id: "o-1e3e4475-option",
label: "Rate your experience:",
value: "3",
values: [{name: "o-1e3e4475", answer: "3"}],
variable: "rating-500e4f20",
sensitive: false,
screenID: "screen-4170032e",
screenName: "screen-580f334a"
}
],
screen-81b02c6d: [
{
id: "slider-2d63fe7a-input",
label: "Value:",
value: "65",
values: [{name: "65", answer: "65"}],
variable: "slider-2d63fe7a",
sensitive: false,
screenID: "screen-7e55219a",
screenName: "screen-81b02c6d"
}
],
screen-dc5933b1: [],
},
...
}