In addition to using our Analytics dashboard, you can connect a playout to a Google Tag Manager (GTM) container. The player pushes playback events to the window.dataLayer array, which you can then use in GTM to configure your own tags: for example, to send data to Google Analytics 4, build custom reports, or trigger third-party pixels.
1.0 | Connect to Google Tag Manager
To connect a GTM container to a playout:
- Select a playout.
- Navigate to the Miscellaneous tab and scroll down to Google Tag Manager.
The Google Tag Manager settings may not be available by default. Please contact your account manager or support@bluebillywig.com to access these settings.
- Enable Google Tag Manager logging by supplying a GTM Container ID (format:
GTM-XXXXXXX) (read more on finding your GTM Container ID).
The player loads the GTM library automatically once a Container ID is provided. You do not need to add any additional GTM snippet to your page.
The player respects the playout’s cookie settings. If cookies are disabled in the playout, GTM tracking is also disabled. See Player cookies for more information.
2.0 | Event Logging
When a playback event occurs, the player pushes an event object to window.dataLayer. In GTM, you can create a Custom Event trigger using the event names below to fire tags in response to player activity.
2.1 | Event Names
The following events are pushed to the dataLayer:
- bluebillywig-Init: player loaded a clip (non-interaction event; does not affect bounce rate)
- bluebillywig-Play: playback started
- bluebillywig-Finish: playback finished
- bluebillywig-Replay: the same clip is played again
- bluebillywig-Progress_[percentage]: progress milestone reached (see section 3.0)
2.2 | dataLayer Properties
Each event push includes the following properties, which you can expose as GTM dataLayer variables:
| Property | Value |
|---|---|
event | Event name (e.g., bluebillywig-Play) |
bluebillywig-category | Video or Audio |
bluebillywig-label | {clip_id} - {clip_title} |
bluebillywig-duration | Clip duration in milliseconds |
bluebillywig-nonInteraction | true for bluebillywig-Init only; not set for other events |
3.0 | Quartile Progress Logging
By default, the player logs viewer progress at every 10%.
Example:
A viewer watches a 1-minute video and closes the browser at the 0:45 mark. The player pushes progress events at 10%, 20%, 30%, 40%, 50%, 60%, and 70%.
It is also possible to enable quartile progress logging, in which case the player logs viewer progress at every 25%.
Example:
A viewer watches a 1-minute video and closes the browser at the 0:45 mark. The player pushes progress events at 25% and 50%.
Quartile progress logging requires a small change to your embed code. When embedding a media clip, project, or playlist, add the following query string to the src attribute:
?logProgressAsQuartiles=trueExample embed code (default):
<script type="text/javascript" src="https://yourcompanyname.bbvms.com/p/default/c/1234567.js" async="true"></script>With quartile progress logging enabled:
<script type="text/javascript" src="https://yourcompanyname.bbvms.com/p/default/c/1234567.js?logProgressAsQuartiles=true" async="true"></script>The same applies when embedding a playlist or project.
4.0 | iframe Limitation
When the player is embedded using the standard <script> tag, it runs in the same window context as the parent page and shares window.dataLayer with it. GTM events fired by the player are therefore available to any GTM container already running on the page.
When the player is rendered inside an <iframe>, it runs in a separate window context. The player’s window.dataLayer is isolated from the parent page’s dataLayer, and GTM events pushed by the player will not reach any GTM container running on the parent page.
If your player is rendered inside an iframe, GTM events from the player will not be visible to GTM containers on the parent page. Use the standard script embed wherever possible to ensure GTM data is captured correctly. See Embed clips, projects, channels and playlists for embed options.