1.0Jui-Nan Lin's Bloghttps://jnlin.orgjnlinhttps://jnlin.org/author/jnlin/Google Tag Manager 簡介 (2) - 建立變數與自訂事件<a href="http://jnlin.org/2015/08/23/737/">上一篇文章</a>中，我們建立了簡單的事件。但除了 PV 之外，我們還要追蹤網站上元素的點擊，或是其他特殊的事件。Google Tag Manager 已經有內建一些變數，可以指定條件，讓我們不需要寫程式就能追蹤部份的事件。
我們必須到「變數」這個 Tab 去啟用這些內建的變數。
目前支援的變數列表如下：
<ul>
<li>Page URL<ul>
<li>Page Hostname</li>
<li>Page Path</li>
<li>Referrer</li></ul>
</li><li>公用程式<ul>
<li>Event</li>
<li>Container ID</li>
<li>Container Version</li>
<li>Random Number</li>
<li>HTML ID</li></ul>
</li><li>錯誤<ul>
<li>Error Message</li>
<li>Error URL</li>
<li>Error Line</li>
<li>Debug Mode</li></ul></li>
<li>點擊<ul>
<li>Click Element</li>
<li>Click Classes</li>
<li>Click ID</li>
<li>Click Target</li>
<li>Click URL</li>
<li>Click Text</li></ul></li>
<li>表單<ul>
<li>Form Element</li>
<li>Form Classes</li>
<li>Form ID</li>
<li>Form Target</li>
<li>Form URL</li>
<li>Form Text</li></ul></li>
<li>歷史紀錄<ul>
<li>New History Fragment</li>
<li>Old History Fragment</li>
<li>New History State</li>
<li>Old History State</li>
<li>History Source</li></ul></li>
</ul>
以下我們以「當使用者點擊頁面上 id 為 "to-be-clicked" 的物件」為例，建立一個事件：
1. 首先到「變數」，啟用「Click ID」這個變數。
<a href="http://jnlin.pixnet.net/album/photo/154068874-%e8%9e%a2%e5%b9%95%e6%88%aa%e5%9c%96-2015-10-06-17.40.32.png"><img src="//ext.pimg.tw/jnlin/1444124532-3618959194_m.png?v=1444124548"/></a>
2. 新增一個「觸發條件」，事件類型為「點擊」，觸發條件為「所有元素」，啟動時機為「部分點擊」。接著在啟動時機內設定條件為「Click ID 等於 "to-be-clicked"」。
<a href="http://jnlin.pixnet.net/album/photo/154068886-%e8%9e%a2%e5%b9%95%e6%88%aa%e5%9c%96-2015-10-06-17.45.42.png"><img src="//ext.pimg.tw/jnlin/1444124768-624705331_m.png?v=1444124777"/></a>
3. 新增一個「代碼」，指定該「觸發條件」要發出的 Event 內容與要記錄到的 Google Analytics ID。
如果我們想設定的變數不在預設列表中，也可以用程式自訂一個變數。作法如下：
1. 新增一個「使用者定義的變數」，類型選擇「自訂 javascript」。
2. 輸入一個 javascript 函式，傳回值為變數值。例如：
<code>
function () {return $('body').data('state'); }
</code>
表示傳回 <body> 的 state 這個 data attribute。
另外，我們也可以在程式裡面觸發 Tag Manager 的自訂事件。首先先建立一個觸發條件，選擇「自訂事件」：
<a href="http://jnlin.pixnet.net/album/photo/154073059-%e8%9e%a2%e5%b9%95%e6%88%aa%e5%9c%96-2015-10-07-08.20.23.png"><img src="//ext.pimg.tw/jnlin/1444177261-1874735117_m.png?v=1444177269"/></a>
接著在程式內觸發此事件：
<code>
dataLayer.push({"event": "custom-event"});
</code>rich