In this guide, you'll learn more about Heyflow's Events, which are based on the dataLayer. In particular, we describe here, which tags are fired when and what properties are passed, e.g. when integration with Google Tag Manager.

🔎 If you're new to Google Tag Manager and unfamiliar with the DataLayer, you might want to start here.

Events

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.

🔎 Click here for more information on our DataLayer changelog.

The following events will be considered:

Event name	Payload
`heyflow-init`	`{` `fields: [],` `screens: {}` `}`
`heyflow-exit`	`{}`
`heyflow-change`	`{` `fields,` `fieldsSimple` `}`
`heyflow-submit`	`{` `screen_name,` `fields,` `fieldsSimple` `}`
`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: [],
  },
  ...
}