The Google Tag Manager integration is available starting from the Business plan.

Google Tag Manager can be used to connect different analytics services and collect detailed usage data of your Pageflow Stories.

Step 1: Create a Google Tag Manager (GTM) container

Open Google's "Set up and install Tag Manager" guide and follow the instructions of the first section, titled "Create a new account and container". You can choose "Pageflow" as container name. Select "Web" as target platform for the container.

Follow the initial steps of the second section titled "Install the container" to obtain the container ID of the form "GTM-XXXXXX". 

Ignore the rest of the installation instructions.

Step 2: Activate Google Tag Manager in Pageflow

On Pageflow's admin dashboard, click "Settings" and switch to the "Analytics" tab. Check "Enable Google Tag Manager", enter your container id ("GTM-XXXXXXX") and click "Save".


Step 3: Set up custom event triggers and variables in Google Tag Manager

Pageflow triggers different custom events while visitors are interacting with your story. The following events are supported:

Event NameDescription
open_landing_pageTriggered right after the story finished loading.
transition_pageTriggered when a user scrolls or otherwise navigates to a different page in a Pageflow Classic story or a different section in a Pageflow Next story.  
play_videoTriggered when a video player inside the story starts playing.
pause_videoTriggered when a video player is paused.
pos_videoTriggered regularly during video playback.
eof_videoTriggered when a video has been been played until the end.
play_audioTriggered when an audio player inside the story starts playing.
pause_audioTriggered when an audio player is paused.
pos_audioTriggered regularly during audio playback.
eof_audioTriggered when an audio has been played until the end.

To be able to intercept these events, we need to create triggers in Google Tag Manager. For example, to handle both the open_landing_page and transition_page events perform the following steps:

  • Navigate to "Triggers" in the left-hand navigation of your GTM workspace
  • Set a name for the trigger, e.g. "Pageflow - Page/Section Change"
  • Choose trigger type "Custom Event"
  • Set event name to "open_landing_page|transition_page"
  • Check "Use regex matching"
  • Pick "All custom events"
  • Click "Save"

Along with these events, Pageflow passes variables which give you additional context information. All events support the following variable:

Variable NameStory typeExampleDescription
pathPageflow Classic/my-story/11-Some Page TitleA string consisting of the entry slug, the index of the current page and the page title.
Pageflow Next/my-story/11-Some Chapter Title, Section 11A string consisting of the entry slug, the index of the current section, the title of the current chapter.

The video and audio related events additionally support the following variables:

Variable NameDescription
altTextAlt text of the video or audio file that has been assigned in the editor.
currentTimeCurrent playback position in seconds.
durationDuration of the video or audio file in seconds.
fileNameThe URL of the video.

Again, to be able to use this data, we need to register these variables in Google Tag Manager. For example, to be able to use the path variable:

  • Navigate to "Variables" in the left-hand navigation of your GTM workspace
  • Click the "New" button in the "User Defined Variables" section
  • Set a name for the variable, e.g. "Pageflow - path"
  • Choose variable type "Data Layer Variable" 
  • Set "Data Layer Variable Name" to "path"
  • Select "Version 2" for "Data Layer Version"
  • Do not set a default value
  • Click "Save"

Step 4: Set up tags

You can now add tags to you container that you want to include in your Pageflow stories. For example, you can follow Google's "Configure Google Analytics 4 tags in Google Tag Manager" guide to track page impressions.

As an example of how to leverage the triggers and variables that we created above, we now show how to set up Google Analytics 4 events with Google Tag Manager. The procedure outlined below correspond to steps from Google's "Set up Google Analytics 4 events with Tag Manager" guide.

As an example, we want to use the "Pageflow - Page/Section change" trigger created above to send an event named "page_or_section_change" to Google Analytics passing the "Pageflow - path" variable as event parameter.

  • Navigate to "Tags" in the left-hand navigation of your GTM workspace
  • Click the "New"
  • Set a name, e.g. "GA4 - Pageflow - Page/Section Change"
  • Choose tag type "Google Analytics: GA4 Event"
  • Select a Google Analytic 4 configuration tag that you already created or manually enter the measurement ID of the Google Analytics 4 configuration you want to send events to
  • Enter "page_or_section_change" as event name
  • Add an event parameter with name "path" and and value "{{Pageflow -path}}"
  • Choose the "Pageflow - Page/Section change" trigger as firing trigger
  • Click "Save"

Step 5: Submit your changes

You need to submit your changes to let them take effect in your published stories.

Events should now start showing up in the Realtime section of your Google Analytics dashboard. Note that it can take up to 48 hours for data to show up in the other Google Analytics reports.