-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3535 from alphagov/ga4-video-tracking
Add GA4 video tracking
- Loading branch information
Showing
9 changed files
with
404 additions
and
31 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
88 changes: 88 additions & 0 deletions
88
app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-video-tracker.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| window.GOVUK = window.GOVUK || {} | ||
| window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {} | ||
| window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analyticsModules || {}; | ||
|
|
||
| (function (analyticsModules) { | ||
| 'use strict' | ||
|
|
||
| var VideoTracker = { | ||
| init: function () { | ||
| this.handlers = {} | ||
| }, | ||
|
|
||
| configureVideo: function (event) { | ||
| var player = event.target | ||
| var videoId = player.id | ||
| var duration = player.getDuration() | ||
| var percentages = [25, 50, 75] | ||
|
|
||
| for (var i = 0; i < percentages.length; i++) { | ||
| var percent = percentages[i] | ||
| var position = (duration / 100) * percent | ||
| this.handlers['video-' + videoId + '-' + percent + '-percent-begin'] = position | ||
| // interval is once a second, so end point must be at least one second beyond begin point | ||
| this.handlers['video-' + videoId + '-' + percent + '-percent-end'] = position + 2 | ||
| } | ||
| }, | ||
|
|
||
| trackVideo: function (event, state) { | ||
| var videoTracker = window.GOVUK.analyticsGa4.analyticsModules.VideoTracker | ||
| var player = event.target | ||
| var videoId = player.id | ||
| clearInterval(videoTracker.handlers['video-' + videoId]) | ||
|
|
||
| if (state === 'VideoUnstarted') { | ||
| videoTracker.handlers['video-' + videoId] = setInterval(videoTracker.checkProgress, 1000, player) | ||
| videoTracker.sendData(player, 'start', 0) // VideoUnstarted seems to only happen the first time video is played | ||
| } else if (state === 'VideoPlaying') { | ||
| videoTracker.handlers['video-' + videoId] = setInterval(videoTracker.checkProgress, 1000, player) | ||
| } else if (state === 'VideoEnded') { | ||
| if (!videoTracker.handlers['video-' + videoId + '-100']) { | ||
| videoTracker.sendData(player, 'complete', 100) | ||
| videoTracker.handlers['video-' + videoId + '-100'] = true | ||
| } | ||
| } | ||
| }, | ||
|
|
||
| checkProgress: function (player) { | ||
| var videoId = player.id | ||
| var videoTracker = window.GOVUK.analyticsGa4.analyticsModules.VideoTracker | ||
| var pos = player.getCurrentTime() | ||
| var percentages = [25, 50, 75] | ||
|
|
||
| // this looks really clunky and long hand | ||
| // but we have to do this once a second so doing the minimum before dropping out | ||
| // of an if statement is more efficient than combining all these statements into one | ||
| for (var i = 0; i < percentages.length; i++) { | ||
| if (pos >= videoTracker.handlers['video-' + videoId + '-' + percentages[i] + '-percent-begin']) { | ||
| if (pos < videoTracker.handlers['video-' + videoId + '-' + percentages[i] + '-percent-end']) { | ||
| if (!videoTracker.handlers['video-' + videoId + '-' + percentages[i]]) { | ||
| videoTracker.sendData(player, 'progress', percentages[i]) | ||
| videoTracker.handlers['video-' + videoId + '-' + percentages[i]] = true | ||
| } | ||
| return | ||
| } | ||
| } | ||
| } | ||
| }, | ||
|
|
||
| sendData: function (player, event, position) { | ||
| var data = {} | ||
| data.event_name = 'video_' + event | ||
| data.type = 'video' | ||
| data.url = player.getVideoUrl() | ||
| data.text = player.videoTitle | ||
| data.action = event | ||
| data.video_current_time = Math.round(player.getCurrentTime()) | ||
| data.video_duration = Math.ceil(player.getDuration()) // number returned from the API varies, so round up | ||
| data.video_percent = position | ||
|
|
||
| var schemas = new window.GOVUK.analyticsGa4.Schemas() | ||
| var schema = schemas.mergeProperties(data, 'event_data') | ||
|
|
||
| window.GOVUK.analyticsGa4.core.sendData(schema) | ||
| } | ||
| } | ||
|
|
||
| analyticsModules.VideoTracker = VideoTracker | ||
| })(window.GOVUK.analyticsGa4.analyticsModules) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| # Google Analytics 4 video tracker | ||
|
|
||
| This script tracks interactions with videos on GOV.UK. It sends an event to the dataLayer when any of the following occur. | ||
|
|
||
| - a video starts playing | ||
| - a video reaches the end | ||
| - a video gets to 25%, 50%, or 75% of the way through | ||
|
|
||
| These events only fire once for each video on any given page. Below is an example of the data sent to the dataLayer for a specific video, on beginning of playback. | ||
|
|
||
| ``` | ||
| { | ||
| 'event': 'event_data', | ||
| 'event_data': { | ||
| 'event_name': 'video_start', | ||
| 'type': 'video', | ||
| 'url': 'https://www.youtube.com/watch?v=TvHpBXB0q0Y', | ||
| 'text': 'My first Self Assessment tax return', | ||
| 'action': 'start', | ||
| 'video_current_time': 0, | ||
| 'video_duration': 152, | ||
| 'video_percent': 0 | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ## How it works | ||
|
|
||
| Assuming that consent has been given, the video tracker is launched automatically by the [Youtube link enhancement script](https://github.com/alphagov/govuk_publishing_components/blob/main/app/assets/javascripts/govuk_publishing_components/lib/govspeak/youtube-link-enhancement.js). Note that if cookie consent is not given, videos are not loaded on GOV.UK. Instead the user is shown a link to the video. | ||
|
|
||
| The Youtube enhancement script creates an embedded Youtube player based on a link to a video. This includes the `enablejsapi` option, which is needed for tracking. The `onStateChange` event provided by the Youtube API allows code to be executed when a user interacts with a video, for example when playing or pausing. | ||
|
|
||
| The function attached to this event listener calls the GA4 video tracker. Since there is no event fired during playback, in order to track progress (e.g. reaching 25%) an interval is created once a second, that checks progress using calls to the Youtube API. When it reaches one of the percentage positions it pushes information to the dataLayer and records that this event should not be fired again. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.