Google Analytics
This tutorial shows how to properly use Google Analytics 4 gtag tagging framework alongside AMP.
The topics covered in this page are:
-
Getting started with AMP.
-
Adding metadata
-
Filtering tracking events
-
Using custom events
-
Event Alias
Getting Started
Universal Analytics support has been removed in favor of Google Analytics 4, starting in AMP 9.1.30 you can instruct AMP to report data throughout gtag.js or gtag through Tag Manager.
var config = {
plugins: {
googleanalytics: {
resources: [
{ src: "https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX", type: "text/javascript", async: true },
{ src: "#{paths.plugins}googleanalytics/Googleanalytics.js", type: "text/javascript", async: true }
],
trackingId: "G-XXXXXXX",
disablePageView: true,
metadata: {
ads: {
ad_title: "#{ads.currentAd.title}",
non_interaction: true
},
content: {
video_title: "#{media.title}",
video_id: "#{media.guid}",
non_interaction: true
}
}
}
}
};Metadata
Starting in version 9.1.30 and onwards, custom key-value pair metadata is categorized into two distinct types: 'video' and 'ads.' This categorization allows for the inclusion of specific information but not limited to video assets and advertisements associated with video playback.
-
'video': This category is designated for metadata pertaining to the video asset itself. It encompasses essential details such as title, duration, resolution, genre, release date, and relevant tags or categories.
-
'ads': The 'ads' category is reserved for metadata concerning advertisements linked to video content. It includes information such as ad type, duration, advertiser, and any targeting criteria.
Tracking Events
Below is a list of events use within Google Analytics 4 plugin for AMP
| Name | Type | Additional Metadata |
|---|---|---|
"ad_break_start" |
Ads |
position |
"ad_break_end" |
Ads |
position |
"ad_loaded" |
Ads |
position |
"ad_pod_started" |
Ads |
position |
"ad_pod_ended" |
Ads |
position |
"ad_error" |
Ads |
message, code, position |
"ad_paused" |
Ads |
position |
"ad_resume" |
Ads |
position |
"ad_clicked" |
Ads |
position |
"ad_buffering_start" |
Ads |
position |
"ad_buffering_end" |
Ads |
position |
"ad_playing" |
Ads |
position |
"playback_session_started" |
Playback |
|
"playback_session_ended" |
Playback |
|
"started" |
Playback |
|
"error" |
Playback |
message, errorCode |
"ended" |
Playback |
|
"playing" |
Playback |
|
"paused" |
Playback |
|
"resume" |
Playback |
|
"play_request" |
Playback |
|
"autoplay" |
Playback |
autoplay |
"volume_change" |
Playback |
volume level |
"buffering_start" |
Playback |
|
"buffering_end" |
Playback |
|
"bitrate_switch" |
Playback |
bitrate |
"seek_start" |
Playback |
|
"seek_end" |
Playback |
|
"milestone_25" |
Playback |
milestone value |
"milestone_50" |
Playback |
milestone value |
"milestone_75" |
Playback |
milestone value |
"caption_selected" |
Playback |
language, kind |
"captioning_on" |
Playback |
language, kind |
"captioning_off" |
Playback |
language, kind |
Events Filtering
By default plugin tracks all events, If required customer can pick the default events by setting up the allowedEvents via plugin config.
var config = {
plugins: {
googleanalytics: {
resources: [
{ src: "https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX", type: "text/javascript", async: true },
{ src: "#{paths.plugins}googleanalytics/Googleanalytics.js", type: "text/javascript", async: true }
],
trackingId: "G-XXXXXXX",
disablePageView: true,
allowedEvents: ["playback_session_started", "playback_session_ended"], // Instructs player to track these events only
metadata: {
content: {
video_title: "#{media.title}",
video_id: "#{media.guid}"
}
}
}
}
};Custom Events
Google Analytics Plugin for AMP supports a wide variarity of events, those events need to be mapped into googleanalytics config object, next you will need to fire such event by using trackEvent method as follows.
var config = {
plugins: {
googleanalytics: {
resources: [
{ src: "https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX", type: "text/javascript", async: true },
{ src: "#{paths.plugins}googleanalytics/Googleanalytics.js", type: "text/javascript", async: true }
],
trackingId: "G-XXXXXXX",
disablePageView: true,
metadata: {
content: {
video_title: "#{media.title}",
video_id: "#{media.guid}",
non_interaction: true
}
}
}
}
};
akamai.amp.AMP.create("amp", config, function(event) {
amp = event.player;
});
// Call trackEvent, optional metadata can be sent as the third argument
amp.googleanalytics.trackEvent("video_test_event", "content", { test: "value" })
//The following is a network output from above statement
// en=video_test_event&_ee=1&ep.video_title=VOD%20Sample&ep.non_interaction=true&ep.test=valueEvent Alias
If necessary, events can be consolidated into a single event to streamline the data gathering process on the analytics end.
As a result, the event name (en) will adopt the value specified by the alias property within the player configuration object. Meanwhile, the playback event can be found within the event_type custom dimension within the same call.
googleanalytics: {
resources: [
{ src: "https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX", type: "text/javascript", async: true },
{ src: "#{paths.plugins}googleanalytics/Googleanalytics.js", type: "text/javascript", async: true }
],
trackingId: "G-XXXXXX",
alias: "akamai_video_player",
metadata: {
ads: {
ad_title: "#{ads.currentAd.title}",
non_interaction: true
},
content: {
video_title: "#{media.title}",
video_id: "#{media.guid}",
non_interaction: true
}
}
}
// Analytics call payload
// en=akamai_video_player&_ee=1&ep.event_type=started&ep.video_title=VOD%20Sample&ep.non_interaction=true