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 Name | Description |
|---|---|
| open_landing_page | Triggered right after the story finished loading. |
| transition_page | Triggered 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_video | Triggered when a video player inside the story starts playing. |
| pause_video | Triggered when a video player is paused. |
| pos_video | Triggered regularly during video playback. |
| eof_video | Triggered when a video has been been played until the end. |
| play_audio | Triggered when an audio player inside the story starts playing. |
| pause_audio | Triggered when an audio player is paused. |
| pos_audio | Triggered regularly during audio playback. |
| eof_audio | Triggered 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"
The following variables provide information about the current story:
| Variable Name | Example | Description |
|---|---|---|
| entryId | "42" | Unique ID of for the story. |
| entrySlug | "my-story" | URL suffix of the story. |
| entryTitle | "Title of the Story" | Title of the story. |
| entryLocale | "en" | Language code for the story. |
Along with events, Pageflow passes additional variables which give you context information. All events support the following variable:
| Variable Name | Story type | Example | Description |
|---|---|---|---|
| path | Pageflow Classic | "/my-story/11-Some Page Title" | A 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 11" | A 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 Name | Description |
|---|---|
| altText | Alt text of the video or audio file that has been assigned in the editor. |
| currentTime | Current playback position in seconds. |
| duration | Duration of the video or audio file in seconds. |
| fileName | The 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.