2015/4/21

Google Tag Manager 新版學習札記

先前稍微玩了一下 Google Tag Manager 但一直沒有正式放到網站上(主要是... 沒有人有時間再去研究,還有一堆 GA 調整的票掛在那邊沒時間做啊啊啊啊),但因為某顆布丁說要有光就有了光,於是我這星期又重新把沈寂數個月的「研究轉換到 GTM」那張票挖出來。

快速分享一些東西,或許能幫上跟我狀況 / 程度差不多的人。

這篇文:

  • 不是教學,是快速概覽:我是站在「如果是我的話,看了以後可以省一些摸索時間」來寫的,而介面選項在哪裡什麼的,自己摸吧 XD
  • 不是去技術文:GTM 本身雖然沒有限制是開發人員才能使用,但會不會 JavaScript 影響規劃時能用的把戲,我直接以小會一點 js 的角度來看

那就開始囉!

改名

如果你用過舊版的,有些名詞換了,個人認為是更好懂:

  • Rules 改稱為 Trigger
  • Macro 改稱 Variable

改名這種事情,其實對初學者來說超級重要的,因為在求助時,找到的文件可能都還是舊版。

概念

基本流程如下

  1. 新增 Container,就是... 意義上可以歸類的一組東西
  2. 請開發人員將 Container 產生的 GTM 程式碼放上網站。理想上無論你以後怎麼改設定,這就是少數幾次真的會動到網站程式碼的時候了。
  3. 在 Container 中可以新增各種 Tag,可以想為「要做的事」
  4. 每個 Tag 可以藉由多種 Trigger「觸發」
  5. 另外 Trigger 跟 Tag 中可以藉由各種 Variable 來設定雜七雜八的東西
  6. 設定完畢後,可以用 Preview / Debug 來測試
  7. 測試沒問題就發佈,相關設定就會直接套用到網站上
  8. 若以後有要改什麼,就從 Step 3 再走一遍,而開發人員理想上不用更動什麼程式碼

舉例:「使用者在進入這一頁點選『喝我喝我』按鈕後,就告訴 GA 這人在進來多久以後才按這個鈕」,這句話裡:

  • Tag 是「就告訴 GA 這人在進來多久以後才按這個鈕」
    • 其中「進來多久」很可能是 Variable
  • Trigger 是使用者「點選『喝我喝我』按鈕」

Tag 與 Trigger

Tag 的設定不盡相同。簡單的狀況:以設定「讀入此頁時,就在 GA 中記上一筆 pageview」這樣的事情來說,只要新增一個 GA 的 Tag、選擇 Pageview、並且設定在 All page 觸發就結束了。

但複雜的話就很複雜:一樣以 GA 為例,你有「一大堆」的欄位可以指定要傳送怎樣的資訊給 GA,舉凡 UserID、Enhanced eCommerce data 等等都可以(也必須)在這裡設定。這部分有必要搭配相關的開發文件來查閱該怎麼傳。

每個 Tag 都可以指定讓很多種 Trigger 觸發,這裡會是聯集,也就是說如果你設定了 3 個 Trigger,那只要符合 3 個中的任一種情形,都會觸發此 Tag。若想用「交集」,也就是要符合所有條件才會動,那設定上得自己兜成一個 Trigger(單一 Trigger 內的各條件是交集),或者另外新增 Exception。

舉例:我們希望在使用者登入的情況下(這裡有個 Variable 可以得知使用者是否登入),點擊某頁 A 上的某個連結 B 會觸發 Tag。有兩類設定方式:

  1. 在一個 Trigger 裡,設定在 A 頁啟用 Link Click 追蹤,並僅在使用者已登入點擊 B 連結時觸發
  2. 或者,也可以設定某個 Trigger 是在 A 頁啟用 Link Click 追蹤,並僅在點擊 B 連結時觸發。此時該 Tag 還要記得另外新增一個若使用者未登入則不觸發此 Tag 的 Exception

兩種方式主要看規劃,講簡潔好維護當然是 1,但或許某些時候還是會想用 2。

Exception 其實也是一種 Trigger,你可以想成「如果符合這個 Trigger 的條件,我就不觸發」。正所謂敵不動我不動,敵一動我亂動(此句意味不明。)

當然一個 Trigger 也可以觸發兩個以上的 Tag。

Variable

記得先進 Variable 把一些預設的 Built-In Variables 開起來,例如我開了 Page 跟 Click 的大部分。

這些做啥用?例如 Click Element 可以作為 Trigger 的條件,讓你做到「如果點選了 DIV.triggerme 底下的 A 元素,就觸發這個 Tag」,以此類推。

Variable 有許多類型,我覺得比較有用的東西例如:

  • Constant: 常數(固定值),例如 GAID 會用在很多 Tag 上,先拉出來做常數設定好。一個重點是在這邊設定好以後就會變成各欄位的下拉選單。
  • Custom JavaScript: 大概是變化最多最厲害的一種,可以用 JavaScript 抓/拼出各種想要的值交給 GTM。
    • 一行看熱鬧: function(){ return {{Click Element}}.getElementsByClassName("text")[0].getAttribute("data-event-label"); }
    • 其中 {{Click Element}} 是 Variable 的引用方式
    • GTM 高人 Zorro 曾指點,其實 GTM 內建 jQuery,所以不見得要像我那樣用原生 DOM API 抓東西。但... 我就習慣了... 然後沒有公開說支援的東西我也會擔心不告而別壞光光 :/
  • Data Layer Variable: 網頁上送來的 Data Layer 資訊要從這裡轉成變數給其他人用
  • Lookup Table: 如果你會 JavaScript 的話差不多就是 Switch ... Case 的精簡版,需求簡單又懶得寫程式時是蠻方便

Preview / Debug

GTM 內建的除錯工具,啟用後在瀏覽網頁時下半部會分割視窗顯示,平常測試起來會比用瀏覽器內建的 developer console 方便非常多。主要功能是查閱各種狀態(網頁載入、DOM 完備、網頁讀完、各種點擊事件)下:

  • 到底哪些 Tag 被觸發了
    • 以及,送出了什麼資訊
    • 而如果沒被觸發又因為哪些條件沒滿足(這個非常好用)
  • 各自訂變數值

由於他會把各狀態當下的所有數值記錄下來,所以你也可以在十幾個事件之後才回頭查第三次 click 觸發了什麼東西。下圖代表在剛載入的時機點由於網頁 URL 不符規則,於是沒有觸發。

Preview 時的 GTM 設定只有你才看得到,或者你也可以分享給其他特定人。總之,即使在 production 上測試也是沒問題的。

其他筆記

  • 瀏覽器相容性:寫 Custom JavaScript 要注意瀏覽器相容性,畢竟這段 js 碼是真的會在瀏覽器上跑。
  • 由於 GTM 的設計,只要你會寫 JavaScript 就幾乎可以不靠開發人員調整網頁,就能自幹所有的變數(例如,自己爬最終訂單畫面來解析出訂單內容資料)。
    • 不過基礎 Metadata 我會仍然傾向商請網站開發人員送 Data Layer 過來,以免網頁結構有些許更動時讓 GTM 死在路邊。
  • 閱讀文件後我認為 GTM for iOS / Android App 實際作用倒沒有像網站上那麼大,開發人員仍然得自己送出幾乎所有的事件(App 沒有 DOM 可以抓啊...),差異點是:
    1. 有些設定過的 Data Layer 值可以直接重複使用
    2. 可以在軟體發佈以後才透過 GTM 改一些設定值

小結

網站分析師善用 GTM 的話可以省很多「等開發人員有空」的時間,有什麼要調整的東西時開發人員也比較不會覺得很煩。站在「網站企劃分析人員多少都得懂點網頁技術」的角度上,是蠻推薦每個人都可以學學。不過相較 GA 已經深入行銷人的領域、在用詞與操作上幾乎只要懂網路基本原理就可以用,GTM 就還是很技術人的工具。

當然,即使你完全不會寫 JavaScript,也還是可以用 GTM 快樂做些事情、不用等 RD 幫你處理,但會寫 JavaScript 的情況下,用起來根本不是同個級別的。無論如何,Google 提供不少範例,或可作為一個入口。

有打算下個月或下下個月在摩茲工寮弄個簡單的 GTM 分享,有興趣的下面留言一下吧。

3 則留言:

  1. 我一直部署失敗耶,怎麼辦

    回覆刪除
  2. 前輩,你寫的超棒! 期待GTM分享活動

    回覆刪除
  3. 小茉莉貼心外約+賴:app669 SK/即時:xxoo6789純兼職MM外送茶

    ☆品地:台北 台中 新竹 高雄 彰化 南投 桃園 台南 嘉義 小姐 情人...

    ☆ 混血妹妹 高檔外國正妹 下面淫水多多 小穴緊緊 床上淫蕩悶騷欠幹的正妹

    小茉莉論壇看妹選妹網址:

    http://www.1411tube.com/forum.php

    http://site-1366003-3456-8262.strikingly.com/

    https://www.youtube.com/watch?v=W3tT8MrttXw

    http://site-1201969-523-9048.strikingly.com/

    http://sdffgfdhg.weebly.com/about.html

    ①.約旅館旅館(自選)避免惹麻煩回家

    ②.全套服務(不跟MM私人聯絡方式)

    ③.滿意在現金消費維護客人消費權利

    交易方式:不刷卡✿不轉帳✿不買點數✿一律現金✿

    約會地點:住家✿飯店✿汽旅✿外約✿滿意現金消費

    PS.無須運費送去您休息的旅館飯店或是住家(熟客)

    PS.偏遠地區需加200.400不等;給大家帶來不便請諒^^

    ☆ 消費方式:一律見面滿意後再現金交易/不喜歡可換可退絕不勉強唷~

    ☆ 品茶效果:做愛對身體好 讓你緩解壓力去除疲勞 多喝茶有益身心健康

    ☆ 品茶質量:100%享用 值得再次回顧~~讓你盡情享用~(365天全年在線)

    找刺激一夜情 兩腿直接的啪啪啪 浴室做愛 面對鏡子愛愛 在沙發愛愛 在樓梯口愛愛找別人的老婆愛愛 找處女愛愛 口爆 顏射 內射 找護士空姐啪啪啪 找色女 哈拉聊天 長腿正妹伊利論壇 小女人論壇 男人色色論壇 大奶玫瑰身材 找女人找小茉莉茶坊 找宅男女神小茉莉女大生彆扭的國語叫你歐巴 西方國際金髮兒尺度大開 香港車模爆乳來襲 馬來西亞雙胞胎3P服務 本月台灣正妹開趴比基尼秀 機會不容錯過 加入會員 你就是引領國際的那個 更多的斯杯秀 更多熱情的肉搏服務 跨國際的技術尺度 貼心的小禮物贈送小茉莉外送茶坊line:app669

    地點自選:外約汽旅/飯店/商旅(台北台中熟客可約住家喔) ╭特殊服務:可伴遊→過夜→69式→口爆→與妹妹互動良好可以Ns唷~ 人生無需掙扎 小頭無需痛苦 欲火焚身找歡歡外送茶 歡歡幫你排憂解痛苦 找滿意的好茶 趕快點擊進入垂生欲死的天堂吧~ 小茉莉正妹 : 【各種類型純兼職正妹/本土/混血/任你挑選】 ╰★悶騷女秘書★狂野人妻★展場ShowGirl★清純學生妹╰★╰★性感小護士★性感小蘿莉★豪放夜店妹★氣質專櫃妹╰★╰★巨乳美女★展場麻豆★火辣夜店妹★嫵媚家教╰★╰★萌系靚女★風騷護士★清涼酒促妹★外拍麻豆╰★╰★性感櫃姐★車展辣妹★亮麗檳榔西施★鄰家小茉莉╰★╰★精挑細選★配合度高★頂級服務~★台灣美眉兼職 ~ 中兼職妹妹外約外送/竹 北好茶外送/高雄鐘點情人/ 中山區一夜情絕色正妹外送/大同區約妹/松山區找茶喝/大安區找 女人/南港區叫妹/萬華區約妹打炮/ 信譽區美女外送/士林區酒店外送一夜情/北投旅館約妹愛愛/內湖 區喝茶找女人/文山區找茶外送/ 土城找茶妹/汐止正妹外送/中和探索約妹愛愛/泰山兼職美女外 送/永和住家叫小姐/新莊motel外送/ 板橋學生妹兼職外送/新店性感美女外送/蘆洲區愛愛茶/三重性感 茶/淡水風騷茶/林口技術茶/龜山嬌小茶/中區正妹兼職/ 北區找炮妹/ 東區叫雞/西區全套外送服務/南區淫蕩茶/西屯區美艷茶/南屯區白皙茶/北屯區熟女茶/大理人妻茶/大雅看照約妹/ 豐原約妹打炮/沙鹿外約兼職美女 /彰化美腿茶/南投口碑茶/員林氣質茶/前金區喝茶/ 苓雅區外送茶/鼓山區看照約妹/前鎮區美腿茶/三民區火辣茶/新興區惹火嫵媚茶/左營區MT外送/小港青澀茶 /鳳山領薪必 喝茶/汽車旅館約妹/火車站叫茶/伊莉喝茶吃魚論壇/玩美情人魚 訊論壇/成人夜遊魚訊茶訊交流討論區/男人的性福天堂/完美戀人 魚茶漁會論壇, BJ論壇網/小女人俱樂部/141香港論壇/ 歡樂茶訊魚訊/ YouTube/FT茶魚論壇/八大娛樂網/台情綜合論壇 台灣情色網/伊魚網/美人魚外送/援交妹網站/男人 幫論壇香港論壇/美女外送/傳播妹/情色AV/台中應召站/成人性愛/口交/喝茶論壇/ 援交/兼職美媚/正妹辣妹包你爽//台中叫小姐/色情/台中買茶/茶莊外送/ 鐘點情人/情色自拍/無碼/全套外送/台灣正妹/辣妹 兼職/台中好茶/台中外送茶/援助交際留言板/UT聊天室/包養/男女愛愛/辣妹宅配/好茶外送/台北清涼茶 莊/更多優質妹妹/台北外 送茶莊/高雄外送茶/新竹外送茶/洗澡/愛愛/口交/夜總會俱樂部/激情A片網站/喝茶討論區/大雅外送茶/烏日外送旅館飯店/新店全 套外送茶/南屯外送茶/西屯叫小姐/北屯一夜情/中區東區外送茶莊/東海外約鐘點情人/大理板橋金色年代一夜情侶/中山外送茶/ 文山絕色正妹/松山援交全 套妹妹/大同大安找女人五股喝茶服務外送一夜情鐘點情/台北市外送茶/士林區內湖外送茶夜店嗨妹激 情四射/北投外送茶/信義區外送茶/南港外送茶/萬 華區外送茶/三重外送茶/土城外送茶/永和外送茶/汐止外送茶/新莊外送茶/ 樹林外送茶/板橋外送茶/瀘州外送茶/新興區外送茶/前金區外送茶/苓雅區外送茶/ 鼓山區外全套服/外送茶/外送服務/學生妹兼職line:app669

    回覆刪除

歡迎留下您的意見