任務說明
記錄 Youtube 影片點擊
找了很久終於找到 一篇文章，按照他的步驟就可以設定完畢了
看英文需要很有耐心才能仔細看完，所以我用中文重新記錄一下。
總共要設定 4個變數、2個觸發條件、2個代碼。
設定變數 Variables
新增「使用者定義的變數」
變數名稱 ➤ YouTube is present
複製以下程式碼，這一段判斷頁面上是否有Youtube的影片
// Return "true" if there is at least one YouTube video on the page
function () {
for (var e = document.getElementsByTagName('iframe'), x = e.length; x–;)
if (/youtube.com\/embed/.test(e[x].src)){
return true;
}
return false;
}
變數名稱 ➤ dataLayer category
設定GA事件時，會用到的變數。
變數名稱 ➤ dataLayer action
設定GA事件時，會用到的變數。
變數名稱 ➤ dataLayer label
設定GA事件時，會用到的變數。
設定觸發條件 Triggers
觸發條件 ➤ Youtube event
這個不知道該怎解釋，我也不清楚如何作用
觸發條件 ➤ Youtube present
判斷頁面上是否有 Youtube 影片
設定代碼 Tags
代碼名稱 ➤ YouTube Event
代碼類型 ➤ 通用 Analytics
追蹤類型 ➤ 事件
觸發條件 ➤ YouTube event
代碼名稱 ➤ YouTube Listener
代碼類型 ➤ 自訂HTML
觸發條件 ➤ YouTube present
複製以下程式碼
這一大段監控了很多事件, 藍色字體就是監控的項目
ex. 點播放、按暫停、使用者從百分之多少開始觀看
<!–
Google Analytics Tag Manager (V2) custom HTML tag for YouTube video trackingCopyright 2015, Cardinal Path, Inc.
Original author: Stephane Hamel <shamel@cardinalpath.com>
Revised by: Nicky Yuen <nyuen@cardinalpath.com>Version 1.0
–>
<script type="text/javascript">
// support multiple players on the same page
var gtmYTPlayers = [];
// OPTIONAL: Enable JSAPI if it's not already on the URL
// note: this will cause the YouTube player to "flash" on the page when reloading to enable the JS API
for (var e = document.getElementsByTagName("iframe"), x = e.length; x–;)
if (/youtube.com\/embed/.test(e[x].src))
if (e[x].src.indexOf('enablejsapi=') === -1)
e[x].src += (e[x].src.indexOf('?') === -1 ? '?' : '&') + 'enablejsapi=1';
/**
* Attaches listener once the YouTube API is loaded
**/
function onYouTubeIframeAPIReady() {
for (var e = document.getElementsByTagName("iframe"), x = e.length; x–;) {
if (/youtube.com\/embed/.test(e[x].src)) {
gtmYTPlayers.push(new YT.Player(e[x], {
events: {
onStateChange: onPlayerStateChange,
onError: onPlayerError
}
}));
YT.gtmLastAction = "p";
}
}
}/**
* Listen for play/pause. Other states such as rewind and end could also be added
* Also report % played every second
* @param e – event
**/
function onPlayerStateChange(e) {
e[“data”] == YT.PlayerState.PLAYING && setTimeout(onPlayerPercent, 1000, e[“target”]);
var video_data = e.target[“getVideoData”](),
label = video_data.video_id + ':' + video_data.title;
if (e[“data”] == YT.PlayerState.PLAYING && YT.gtmLastAction == "p") {
dataLayer.push({
event: 'youtube',
eventCategory: 'youtube',
eventAction: 'play',
eventLabel: label
});
YT.gtmLastAction = "";
}
if (e[“data”] == YT.PlayerState.PAUSED) {
dataLayer.push({
event: 'youtube',
eventCategory: 'youtube',
eventAction: 'pause',
eventLabel: label
});
YT.gtmLastAction = "p";
}
}/**
* Catch all to report errors through the GTM data layer. once the error is exposed to GTM, it can be tracked in UA as an event!
* Refer to https://developers.google.com/youtube/js_api_reference#Events onError
* @param: e (event)
**/
function onPlayerError(e) {
dataLayer.push({
event: 'error',
eventCategory: 'youtube',
eventAction: 'play',
eventLabel: 'youtube: ' + e
})
}/**
* Report the % played if it matches 0%, 25%, 50%, 75%, 90% or completed
* @param: e (event)
**/
function onPlayerPercent(e) {
if (e[“getPlayerState”]() == YT.PlayerState.PLAYING) {
//var t = e[“getDuration”]() – e[“getCurrentTime”]() <= 1.5 ? 1 : (Math.floor(e["getCurrentTime"]() / e["getDuration"]() * 4) / 4).toFixed(2);
// Set the played duration to every tenth because we'll need to also capture 90% played.
var t = e[“getDuration”]() – e[“getCurrentTime”]() <= 1.5 ? 1 : (Math.floor(e["getCurrentTime"]() / e["getDuration"]() * 10) / 10).toFixed(2);
if (parseFloat(t) < 0.25) {
t = 0.00;
}
else if (parseFloat(t) < 0.5){
t = 0.25;
}
else if (parseFloat(t) < 0.75){
t = 0.50;
}
else if (parseFloat(t) < 0.9){
t = 0.75;
}
else if (parseFloat(t) < 1){
t = 0.90;
}
// duration t needs to be fixed to 2 decimal places
t = t.toFixed(2);
if (!e[“lastP”] || t > e[“lastP”]) {
var video_data = e[“getVideoData”](),
label = video_data.video_id + ':' + video_data.title;
e[“lastP”] = t;
dataLayer.push({
event: "youtube",
eventCategory: 'youtube',
eventAction: t * 100 + "%",
eventLabel: label
})
}
e[“lastP”] != 1 && setTimeout(onPlayerPercent, 1000, e);
}
}
/**
* Add unload event listener
**/
window.addEventListener('beforeunload', function(e){
for (var i = 0; i < gtmYTPlayers.length; i++){
if (gtmYTPlayers[i].getPlayerState() === 1) { // playing
var video_data = gtmYTPlayers[i][‘getVideoData’](),
label = video_data.video_id + ':' + video_data.title;
dataLayer.push({
event: 'youtube',
eventCategory: 'youtube',
eventAction: 'exit',
eventLabel: label
});
}
}
})
// load the Youtube JS api and get going
var j = document.createElement("script"),
f = document.getElementsByTagName("script")[0];
j.src = "//www.youtube.com/iframe_api";
j.async = true;
f.parentNode.insertBefore(j, f);
</script>
GA呈現結果
使用次要維度，就可以區分不同的頁面。
但若同一個頁面有好多個影片，就要另外處理了～
次要維度選擇裝置類別，也可以觀看桌機或手機的數據。