All Collections
Analytics & Tracking
DataLayer Events and Payload
DataLayer Events and Payload
Heyflow avatar
Written by Heyflow
Updated over a week ago

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

heyflow-init

{

fields: [],

screens: {}

}

heyflow-exit

{}

heyflow-change

{

}

heyflow-submit

{

screen_name,

}

heyflow-screen-view

{

screen_id,

screen_name,

previous_screen_id,

previous_screen_name

}

heyflow-screen-leave

{

screen_name,

payload*,

screens**

}

heyflow-button-click

{

custom_event_name,

custom_event_label

}

heyflow-input-click

{

custom_event_name,

custom_event_label

}

*) 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: [],
},
...
}
Did this answer your question?