如何運用amp-analytics追踪YouTube影片播放事件
在 AMP 網頁嵌入 YouTube 影片 🎥
要在 AMP 網頁上嵌入 YouTube 影片至 AMP 網頁，您需要在 HTML 的 head 部分插入以下的這段 script 以載入amp-youtube的 JS 包。
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>同時，在網頁的 body 部分要插入 YouTube 影片的位置，加入以下的 <amp-youtube> 組件，並取代 {VIDEO-ID} 為須要內嵌的 YouTube 影片 ID。
<amp-youtube width="480" height="270" layout="responsive" data-videoid="{VIDEO-ID}" data-param-rel="0"></amp-youtube>相關文章 ⚓
在 AMP 網頁設置 Google Analytics 的追踪事件 ⚡
Google Analytics 算是最普及的網站分析工具，本文會以此為例示範如何設置YouTube 影片的追蹤事件。
要在 AMP 網頁上利用 Google Analytics，您需要在 HTML 的 head 部分插入以下的這段 script 以載入 <amp-analytics> 的 JS 包。
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>再在 HTML 的 body 部分加入以下的<amp-analytics> 組件。
<amp-analytics type="gtag" data-credentials="include"><script type="application/json">
{
"vars" : { "gtag_id": "{YOUR-GA-TRACKING-ID}",
"config" : {
"{YOUR-GA-TRACKING-ID}": { "groups": "default" }
}
},
"triggers": { // 在此定義你的 Google Analytics「事件」 }
}
</script>
</amp-analytics>
取代{YOUR-GA-TRACKING-ID}為你的追踪 ID，例：UA-12345678–1。
接下來，您需要在 "triggers": { } 的大括號裏定義觸發追蹤的「事件」。<amp-analytics> 組件提供了多個影片分析觸發器( "on": "video-*")，供跟踪影片生命週期內發生的不同事件。
如需了解更多詳情，請參閱AMP視頻分析。本文將會教你如何追跡影片的「播放」、「暫停」及「結束」事件。
追跡「播放 ⏯」YouTube 影片的代碼
首先是追跡影片的「播放」事件，這個可以讓您分析瀏覽者是否對內嵌影片感興趣，他們曾經點擊播放器來觀看該影片。
用於定義事件的代碼如下：
"videoPlay": { "on": "video-play",
"request": "event",
"selector": "amp-youtube[data-videoid='{VIDEO-ID}']",
"vars": {
"event_category": "AMP YouTube 播放器",
"event_name": "開始播放",
"event_label": " 例如：影片的標題、超連結等 ",
"method": "Google"
}
},
"on": "video-play"為觸發條件，即影片被播放。"selector": "amp-youtube[data-videoid='{VIDEO-ID}']"代表需要追蹤的<amp-youtube>元件。
在使用時，您須要取代{VIDEO-ID}為在網頁中內嵌了 YouTube 影片 ID。"event_category"、"event_name"及"event_label"用於指定記錄至 Google Analytics 的事件類別、事件動作及活動標籤，可按您的喜好自訂字串。
建議在"event_label"填寫影片的標題、超連結，方便你在 Google Analytics 上辨識事件是有關哪一部 YouTube 影片。
追跡「暫停 ⏸」YouTube 影片的代碼
再來是追跡影片的「暫停」事件，這有助您分析影片是不是太長，又或者與網頁的內容沒有太大關係，使得用戶沒有興趣繼續收看影片。
用於定義事件的代碼如下：
"videoPause": {
"on": "video-pause",
"request": "event",
"selector": "amp-youtube[data-videoid='{VIDEO-ID}']",
"vars": {
"event_category": "AMP YouTube 播放器",
"event_name": "暫停播放",
"event_label": " 例如：影片的標題、超連結等 ",
"method": "Google"
}
},追跡「結束 ⏹」YouTube 影片的代碼
最後是追跡影片的「結束」事件，可以讓您分析知道用戶會否收看至影片至播放完結。用於定義事件的代碼如下：
"videoEnded": {
"on": "video-ended",
"request": "event",
"selector": "amp-youtube[data-videoid='{VIDEO-ID}']",
"vars": {
"event_name": "Video Ended",
"event_category": "AMP YouTube player (client-side)",
"event_label": " 例如：影片的標題、超連結等 ",
"method": "Google"
}
}YouTube 支援的視頻分析變數 🔍
✔️autoplay(布爾值) 標示影片是否開始為自動播放視頻。
✔️id(字串) 影片元素的 ID。
✔️️️state(字串) “playing_auto”, “playing_manual”, or “paused” 的其中之一種狀態。
✔️height(數值) 影片的高度（以像素為單位）。
✔️️️width(數值) 影片的闊度（以像素為單位）。
❌currentTime(數值) 事件觸發時的播放時間 (以秒為單位)。
❌duration(數值) 影片的總長度 (以秒為單位)。
❌playedTotal(數值) 用戶觀看影片的總時間。
❌playedRangesJson(字串) 用戶觀看影片的時間段 (JSON格式)。例如，[[1, 10], [5, 20]]。
如果您喜歡這篇文章，請為此文章 👏 👏 👏 👏 👏 👏 👏，並分享至你的 Facebook 及 Twitter。
假如您有任何疑問或建議，歡迎標註留言或透過 Facebook 專頁 聯繫我 🙂
