Related Posts with Thumbnails

2016年9月30日 星期五

如何使用 Google Analytics 追蹤、分析 Accelerated Mobile Pages 的成效？

有可能在你看這篇文章前已經參閱 Google 擴大 AMP 專案，想讓所有網站載入時間不滿 1 秒 這類文章甚至執行過它了，因為它會在頁面搜尋上所呈現的方式將會和往後有所不同

當然你可能看不出來，或根本還沒執行過 AMP，這樣的話就一定要照著下面的教學來作囉！

不管如何，那怕你是在媒體界工作，AMP 在數位行銷世界的重要性已更趨重要！
( 而這部份亦是 7 招教你如何低流量網站也能提高轉換率？ 中的 Ⅵ . Accelerated Mobile Pages Project 與 Facebook Instant Articles 所提過的 )

那麼，它是什麼？有什麼好處？為何它會大到需要你去注意呢？

何謂 AMP？
根據 Accelerated Mobile Pages Project 這篇 FAQ 的文章中其中如下截圖定義來說是指「它是個發佈商和科技公司間彼此討論的開放程式碼，目的是希望改善發佈商、消費者、創作者、使用者間的手機內容生態系統」


就像我前述那樣：「也許你早已執行過它了」... 
而以下範例就是當有搜尋到 AMP 的搜尋結果時就會呈現的畫面


只要點選含有 AMP 的搜尋頁面，就會出現下面的畫面


它的主要好處是什麼？
  • 加速頁面載入速度
它就像一般的頁面那樣使用 HTML，但它可能因為超出開放程式碼所規範的輪廓，而在技術、功能上有所限制

主要來說它能藉由 AMP 的 HTML、JavaScript Library、Cache 而增加頁面載入速度
  • 跨瀏覽器支援
它能在現今主要的常見瀏覽器與 APP 上執行、觀看，所以在畫面呈現效果上不管是在什麼裝置、載具都是無差別顯示的
  • 在 Google 能以類似方格、卡片的方式置頂於搜尋結果頁面上
你能想像以這種方式直接就在第一頁第一個突顯出來嗎？ ( 見上方截圖所示 )
雖然可能還沒數據顯示點擊率會爆增多少，但可以預見的是鐵定比你所知道的傳統頁面還要高

現有執行者
一個最需要關注的地方是確保分析工具能整合到 AMP 中，在 Accelerated Mobile Pages Project 這篇 WHO 的文章有列出現今有執行 AMP 功能的眾多網站

利用 Google Analytics 來追蹤
現在，我們將已進到本教學中最令人興奮的地方 ...

當然，了解並利用它的好處是個好主意，但你要如何衡量這些新頁面的性能 ( Performance )？
而這就是它的分析、整合功能開始發揮作用

就本質上來說它與分析工具一塊建立單一、統一的分析架構，好便於查看 Page View 與事件 ( Event ) 數據 ... 當然它讓一切都輕易去設定，而以下教學也會告訴你該怎麼作？

雖然其它分析工具都有客製化的功能差異，但我們就挑最常用的 Google Analytics 來當示範吧！

以目前來說 Google 建議你另外申請一個帳號好用於區別現有的 Analytics 使用
那是因為追蹤 AMP 將會使用和現有帳戶不同的 Analytics.js Library



如何設定？
1 . 新申請 Google Analytics 帳號
當你獲得新的 UA number ( UA-XXXXX-Y ) 後將它儲存，好用於下個步驟中會提到的 AMP 頁面

2 . 將 Amp-Analytics 的 JS 檔加到頁面中 <head> 標籤裡 ( 在 AMP JS library 上方 )

<script async custom-element="amp-analytics"

    src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
3 . 將 Amp-Analytics 的所需元件 Page view tracking、Event tracking、Social Interaction tracking 依需要分批加入 <body> 標籤裡

Page view tracking
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXXX-Y"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>
在上述的範例中意指 ... 當 Amp-Analytics 有需要時，會將 Page view 傳送到 UA number ( UA-XXXXX-Y ) 中

另外，除了 on、request 為必填外，亦可額外增加下述變數 ( 選填 )
  • "title"：欲覆蓋當前頁面的標題 ( To overwrite the current Page Title )
  • "ampdocUrl"：欲覆蓋當前頁面的網址 ( To overwrite the current Page URL )
Event Tracking
簡單來說你可以用它來查看訪客在你頁面中所有的行為軌跡、互動元素
而在下面的例子中意指 ... 觀看點擊標題元件
<amp-analytics type="googleanalytics" id="analytics2">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXXX-Y"
  },
  "triggers": {
    "trackClickOnHeader" : {
      "on": "click",
      "selector": "#header",
      "request": "event",
      "vars": {
        "eventCategory": "ui-components",
        "eventAction": "header-click"
      }
    }
  }
}
</script>
</amp-analytics>
同樣的情況你需要修正上述範例中所需元件並等待追蹤 & 傳送事件至 Google Analytics

其中的 "eventCategory" 意指：事件目錄 & "eventAction" 意指：事件行為，這二者都為必填！
除此之外亦可額外增加下述變數 ( 選填 )
  • "eventLabel"：區分類似事件
  • "eventValue"：與事件關聯的數值
Social Tracking
最後講到的社交互動指的是比方說追蹤有多少訪客點擊頁面上 Twitter 按鈕好分享到社群網絡中特定的網址

而為了使它有功能，你必須置入 "社群" 觸發器 ( Social Trigger )
<amp-analytics type="googleanalytics" id="analytics3">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXXX-Y"
  },
  "triggers": {
    "trackClickOnTwitterLink" : {
      "on": "click",
      "selector": "#tweet-link",
      "request": "social",
      "vars": {
          "socialNetwork": "twitter",
          "socialAction": "tweet",
          "socialTarget": "https://www.example.com"
      }
    }
  }
}
</script>
</amp-analytics>
其中的
  • "socialNetwork" 意指：欲指定的社群平台，像 Facebook、Twitter、LinkedIn
  • "socialAction" 意指：動作的發生類型，像 Tweet、Like、Share
  • "socialTarget" 意指：社交互動的目標，此處放上指定前往的網址
增加額外的點擊資訊
熟悉 Google Analytics 的人都知道它支援額外的「自定義尺寸」( Custom Dimension )
也許你想知道訪客和觀看的內容為何，而為達成這個目的，你需要放上 " request " 好包含下述範例中會提到的變數
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "requests": {
    "pageviewWithCd1Cd2": "${pageview}&cd1=${cd1}&cd2=${cd2}"
  },
  "vars": {
    "account": "UA-XXXXXX-Y"
  },
  "triggers": {
    "trackPageviewWithCustom" : {
      "on": "visible",
      "request": "pageviewWithCd1Cd2",
      "vars": {
        "title": "Local News - Cincinnati",
        "cd1": "Registered User",
        "cd2": "Local News"
      }
    }
  }
}
</script>
</amp-analytics>
在上述的例子中使用了 cd1 意指：註冊的使用者 & cd3 意指：當地新聞

加速思考 AMP 對你的好處
對於新聞和媒體業者來說，專注在手機使用者體驗可說是愈趨增加
而為了達成這個目的，就要給予更快更好的使用者感受
而且在未來像是 eBay 這類電子商務網站，也將逐漸投入 AMP 的懷抱
如果你對 AMP 的功能擴展有興趣的話，可參見 Accelerated Mobile Pages Project 中所示的說明

註：
進階閱讀：
Labels: Google Analytics