google analytics筆記(一)-Tracking Basics

原文網址來源:Tracking Basics (Asynchronous Syntax)

 Google Analytics的追蹤基礎教學(非同步語法) 
 && 如何架設追蹤代碼在自己的網站 

我第一次看這份文件，都是英文有點麻煩，三番兩次去拜訪這個網站就要再理解一次， 所以暫時先用自己看得懂得文字做個筆記，說是翻譯也很奇怪， 因為我翻得也不是很好....，我很抱歉...google分析不是我的專業....，如果錯誤敬請煩請糾正or直接看英文版，謝謝。

另外asynchronous這個單字，曾經在網路上看到有人翻"異步"，但此文我是翻"非同步"。

這份文件(上面的網址來源)包含了如何使用google分析的追蹤語法(非同步追蹤語法)在自己的網站上(主要使用在"Web" Tracking)，以及包含了最新的語法。

有了這份版本的追蹤語法，您也可以將Analytics（分析）代碼放在網頁頁面中(他並不會延遲後續頁面內容的渲染)，而這些代碼幾乎都是javascript語法。

另外，官方文件也寫道，你可以從 Migration Examples 這個頁面中比較每個步驟的傳統語法(traditional)以及非同步語法(asynchronous syntaxes)的不同。
[恩..雖然我不太懂traditional是指什麼...第一次看這份文件]

內容大綱:

• 快速開始Tracking Code - Tracking Code Quickstart 
• 告訴你這個非同步語法是什麼運作的 ? -How the Asynchronous Syntax Works 
• 追蹤HTML的事件 -Tracking with HTML Event Handlers 
• 將函數(function)推到佇列-Pushing Functions onto the Queue 
• 一次push好幾個令命 -One Push, Multiple Commands 
• 分割的代碼片段 -Splitting the Snippet 
• 告訴你幾個要避免的陷阱 -Avoiding Common Pitfalls 
• 禁用/停止追蹤 -Disabling Tracking

快速開始Tracking Code 
google分析的代碼是一段一段小小的js代碼並且複製貼上到你的頁面code,另外你如果要讓你的網站被google分析追蹤到的話，首要任務是你必須埋ga.js這個javascript在你的網站代碼裡面，請複製下面的code，將'UA-XXXXX-X'的字樣換成你的web property ID
(這個需要替換web property ID的地方在很多小範例都會遇到，有些地方就不再贅述，知道要換成自己的web property ID就好了)。 並且把這段放在網頁html標籤的

head標籤結尾之前 before the closing tag。 如果你需要做多其他的追蹤跟方法，你可以參考其他的API或者是看Usage Guide。

 <script type="text/javascript">  
  var _gaq = _gaq || [];  
  _gaq.push(['_setAccount', 'UA-XXXXX-X'/*->這裡要換成你的web property ID*/]);  
  _gaq.push(['_trackPageview']);  
  (function() {  
   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;  
   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';  
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  
  })();  
 </script>  

上面的代碼使用_setAccount去設定你的網站web property ID，然後調用_trackPageview送出追蹤的資料到google分析的伺服器。

 [官方網站的重要提示] 如果你是從traditional的代碼改用asynchronous的代碼，你應該先刪掉你現有的追蹤代碼。google不建議這兩種代碼一次使用在同一個頁面， 如果你有這方面的困擾，你可參考Migrating to Async.

告訴你這個非同步語法是什麼運作的 ?
[這一段簡單解說如何運作]
 這個 _gaq 的物件(object)是讓整個非同步語法能夠運做的最大可能what makes the asynchronous syntax possible(可以說一定要有建立這個物件，你才有辦法做追蹤)，他所表現的行為是ㄧ個佇列(可上網搜尋什麼是堆疊(Stack)與佇列(Queue)=>簡單來說佇列是一種先進先出(First In first Out)的資料儲存結構)，集合API的調用，直到的ga.js準備執行他們時。

想像你要加入一個東西到一列隊伍中，使用_gaq.push這個方法(method)就是這種感覺。 
當你要push一個API呼叫到佇列，你必須將它從傳統的JavaScript語法轉換成命令陣列(Command arrays)。 這個命令陣列(Command arrays)只是一個符合一定格式的javascript的陣列，在這個命令數組(Command arrays)的第一個元素(element) 是你要呼叫的追蹤對象的方法(the tracker object method you want to call),他的型別必須是ㄧ個字串(String)，剩下的元素是你想傳遞給追蹤對象方法的參數，這些可以是任意的javascript值。 The following code calls _trackPageview() using the traditional syntax: 下面的代碼採用傳統的語法調用_trackPageview（）:

 var pageTracker = _gat._getTracker('UA-XXXXX-X'/*這裡要換成你的web property ID*/);  
 pageTracker._trackPageview();  

The equivalent code in the asynchronous syntax requires two calls to _gaq.push. 在非同步語法的代碼必須要呼叫兩個_gaq.push :

 _gaq.push(['_setAccount', 'UA-XXXXX-X'/*這裡要換成你的web property ID*/]);  
 _gaq.push(['_trackPageview']);  

在這個非同步語法，跟踪對象的創建是隱含的(implied)，但我們仍需要一個方法去設定我們的web property ID給這個tracker(追蹤器)，所以呢~_setAccount這個方法就是提供這種功能，所有其他的追蹤對象方法在傳統與非同步的tracker都是一樣的，只是語法不同。

追蹤HTML的事件

非同步的追蹤語法也可以用於DOM事件處理程序，下面就示範了當一個按鈕被點擊(click)時他產生了一個事件。

 <button onclick="_gaq.push(['_trackEvent', 'button3', 'clicked'])"/>i am button</button><!--這裡官網寫<button>-->  

即使按一下這個按鈕，瀏覽器完成加載ga.js程式(the browser has finished loading ga.js)，該事件將被捕獲並最終執行。 如果是使用傳統的追蹤語法，在這種情況下，瀏覽器可能會拋出一個異常。

Pushing Functions onto the Queue- 將函式(function)推到佇列
除了命令陣列(command arrays)，你還可以將函式對象(物件)push到_gaq這個佇列上，這個函式可以包含像command arrays的任意javascript， 他們的執行順序會被壓入到_gaq，這種技術是調用(call)追蹤代碼API的返回值(This technique is useful for calling the tracking APIs that return values)，比方說下面的語法建立一個連結url而且設置href屬性給連結的結果。

 _gaq.push(function() {  
  var pageTracker = _gat._getTracker('UA-XXXXX-X');  
  var link = document.getElementById('my-link-id');  
  link.href = pageTracker._getLinkerUrl('http://example.com/');  
 });  

上面的例子使用_gaq創見一個追蹤的對象，但是因為它被分配到一個局部變量，在函數外的代碼不能使用它。如果你想要建立一個可以用在很多地方被訪問的對象，您可以使用_gat._createTracker的方法來創建一個永久的，全局可訪問的對象。下面的代碼演示了如何實現這一點。

 _gaq.push(function() {  
  var pageTracker = _gat._createTracker('UA-XXXXX-X', 'myTracker');  
  var link = document.getElementById('my-link-id');  
  link.href = pageTracker._getLinkerUrl('http://example.com/');  
 });  
 _gaq.push(['myTracker._trackPageview']);  

The example above creates an asynchronous tracker inside the function and then references it later by name in the command array. 上面的例子創建一個非同步的追蹤在函數內部，然後引用它的名字在命令陣列。 The opposite use case is also possible. For example, if you need to use an asynchronous tracker object created via a previously pushed command array, use the _gat._getTrackerByName method. The following code demonstrates how it works. 相反的使用情況下也是可能的(語法順序反過來寫的話)。 例如，如果你需要使用非同步語法追蹤透過之前push的命令陣列創建的對象，使用_gat._getTrackerByName方法。下面的代碼演示它是如何工作的。

 _gaq.push(['myTracker._setAccount', 'UA-XXXXX-X']);  
 _gaq.push(function() {  
  var pageTracker = _gat._getTrackerByName('myTracker');  
  var link = document.getElementById('my-link-id');  
  link.href = pageTracker._getLinkerUrl('http://example.com/');  
 });  

一次push好幾個令命 -One Push, Multiple Commands
你可以用以下的方法，取而代之每次調用就要再寫入_gaq.push(...)

 _gaq.push(  
  ['_setAccount', 'UA-XXXXX-X'],  
  ['_setDomainName', 'example.com'],  
  ['_setCustomVar', 1, 'Section', 'Life & Style', 3],  
  ['_trackPageview']  
 );  

這個過程是因為_gaq.push方法模仿Array.push的方法，它允許調用一次推進多個項目。 推到多個追蹤器的命令也是可以運作。Pushing commands to multiple trackers also works.

 _gaq.push(  
  ['_setAccount', 'UA-XXXXX-1'],  
  ['_trackPageview'],  
  ['b._setAccount', 'UA-XXXXX-2'],  
  ['b._trackPageview']  
 );  

分割的代碼片段 
如果你喜歡把Analytics（分析）的語法放在頁面的底部，你應該知道，你不必把所有的片段都放到頁面的底部。 非同步代碼段劈成兩半的頁面可能看起來像這樣：

 <html>  
 <head>  
  <script type="text/javascript">  
   var _gaq = _gaq || [];  
   _gaq.push(['_setAccount', 'UA-XXXXX-X']);  
   _gaq.push(['_trackPageview']);  
  </script>  
 </head>  
 <body>  
  <p>Page Content</p>  
  <script src="some_random_script.js"></script>  
  <p>Page Content</p>  
  <script type="text/javascript"> (function() {  
   var ga = document.createElement('script');   ga.type = 'text/javascript'; ga.async = true;  
   ga.src = ('https:'  == document.location.protocol ? 'https://ssl'  : 'http://www') + '.google-analytics.com/ga.js';  
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);  
   })();  
   </script>  
 </body>  
 </html>  

告訴你幾個要避免的陷阱
當使用的非同步或傳統的語法，請記住以下幾點：
方法名稱區分大小寫 ：

 _gaq.push(['_trackpageview']);  // 不行  
 _gaq.push(['_trackPageview']);  // good  

使用正確的方法名稱 :

 _gaq.push(['_setDomain', 'example.com']);    // 不行  
 _gaq.push(['_setDomainName', 'example.com']);  // good  

只有字串才能放在''(引號)之內
只要傳遞的值不是ㄧ個字串，如一個bool，object literals，functions，arrays(陣列)，不能帶引號。 當你傳遞的東西是要被解釋為字串，只能使用引號。

 _gaq.push(['_setAllowLinker', 'false']);  // 不行  
 _gaq.push(['_setAllowLinker', false]);   // good  

確保字串不包含前導或尾隨的空白

 _gaq.push(['_setAccount', ' UA-65432-1']);  // 不行  
 _gaq.push(['_setAccount', 'UA-65432-1']);   // good  

禁用/停止追蹤 Disabling Tracking

在某些情況下，可能需要禁用頁面上的google 分析的追蹤代碼，而無需刪除程式碼片段。例如，你可以這樣做，如果你的網站的隱私政策包括訪問者選擇退出的google分析的追蹤。

ga.js 追蹤程式碼片段包括一個window property屬性，當設置他為true時，禁用將數據發送到google 分析。當谷歌Analytics（分析）設置了一個cookie，或將數據發送回Google 分析服務器，它會檢查是否該屬性設置為true。如果是的話，它會產生同樣的效果如果訪問者在google分析停用瀏覽器安裝插件。 要禁用追蹤，下面的window屬性設置為true：

 window['ga-disable-UA-XXXXXX-Y'] = true;  

這個window屬性必須設定在追蹤代碼被呼叫之前(before the tracking code is called.)。 此屬性必須被設置在每一頁你想禁用google分析的追蹤頁面上。如果屬性未設置或設置為false，那麼就會照常追蹤。


END.(終於看完...