Google Tag Manager 標記管理工具 也可以運用在Google Analytics的JS程式碼上頭喔

Google Tag Manager 標記管理工具 也可以運用在Google Analytics的JS程式碼上頭喔

這次分享一個程式開發可能比較熟悉的工具 “Google Tag Manager 標記管理工具"

什麼是 Tag Manager 標記管理工具呢?  這裡的Tag指的是一段JavaScript 程式代碼,放在網站頁面中需要執行、呼叫的程式,例如執行Google Analytics網站分析、AdWords 關鍵字廣告的轉換追蹤程式…等等。

透過這個"Google Tag Manager 標記管理工具“,你可以方便統一用單獨界面來管理、發佈、並且還能做版本控制有效的管理需要安插在網頁上的各種程式代碼。

Google Tag Manager 標記管理工具 也可以運用在Google Analytics的JS程式碼上頭喔

雖然 Google Tag Manager 標記管理工具 的官方網站是英文介面說明,但這工具執行網頁已經有提供繁體中文的操作UI環境了喔~ 就讓我用這篇小小的介紹他一下~ 並且利用他來安裝Google Analytics 網站分析工具的方式做為使用案例說明了。

Google Tag Manager 官方網站

不過首先,先來看一下Google的官方介紹Google Tag Manager 標記管理工具這支影片,讓你有點基本認識,這段影片有簡體中文字幕翻譯,還滿不錯、值得參考喔~

Introduction to Google Tag Manager 官方介紹影片(有簡中字幕)

另外再推薦一支影片給大家做為延伸參考資料,他特別介紹說明 Google Tag Manager 標記管理工具 的使用優點,內容淺顯易懂,不過沒有中文翻譯字幕就是,但還是滿值得瞧瞧看的。

Google Tag Manager – Features, Benefits and Terminology 重點介紹(無字幕)

接著、就讓我安裝Google Tag Manager 標記管理工具WordPress部落格系統外掛插件上,來執行Google Analytics 分析 的驗證代碼做為介紹說明給朋友們認識一下他了。

(有別於以往使用Google Analytics 分析WordPress部落格系統外掛插件上的方式,通常使用的方式如 Google Analytics for WordPress 這外掛插件。)

Google Tag Manager 標記管理工具 也可以運用在Google Analytics的JS程式碼上頭喔

首先就是先建立一個獨立的Google Tag Manager 標記管理工具 中 帳戶,方便辨識、區分。

Google Tag Manager 標記管理工具 也可以運用在Google Analytics的JS程式碼上頭喔

接著 建立一個 “容器“用來專門建立和管理相關需要的JS程式碼用途。

Google Tag Manager 標記管理工具 也可以運用在Google Analytics的JS程式碼上頭喔

接下來類似使用Google Analytics分析工具時,系統要求你要把上面這段程式代碼放到你的網站程式之中,有別於Google Analytics分析工具的代碼,未來這ㄧ段程式code不只可以用來做為呼叫GA網站流量分析使用,各種需要安裝網頁的JS執行程式,通通可以用這ㄧ段Tag 標記 做為呼叫、執行之用。

講的更白話,以前你要使用Adwords啟用轉換追蹤功能,也需要另外埋一段特殊的程式代碼,想用Adwords再行銷工具也要安插一段特殊代碼、或者如使用Google Adsence時的廣告呼叫程式…. 通通都可以利用這ㄧ段Google Tag Manager 標記管理工具 執行程式code來完成他。

這對於相關JS程式的管理和運行效能都能有很棒的幫助喔!

Google Tag Manager 標記管理工具 也可以運用在Google Analytics的JS程式碼上頭喔

最後一個設定執行步驟,你也可以馬上就接著繼續下方有列出來的幾個項目功能,這裡我先選擇 “稍後再新增標記" 。

Google Tag Manager 標記管理工具 也可以運用在Google Analytics的JS程式碼上頭喔

接下來我選擇 “新增標記" 來開始相關Google Analytics的設定步驟了。

Google Tag Manager 標記管理工具 也可以運用在Google Analytics的JS程式碼上頭喔

設定標記可利用Google Tag Manager 標記管理工具當中的 “廣告代碼類型" 來方便的點選你要安裝的JS程式他的種類、功能,以這為例、我選用了 “Google Analytics 分析“項目。

Google Tag Manager 標記管理工具 也可以運用在Google Analytics的JS程式碼上頭喔

接著輸入Google Analytics 分析中的"網站資源標號" UA-XXXXXXX-1 這樣的代碼名稱。

下方還有個必須注意的地方,設定好要執行、安插的code資料,還要告訴Tag Manager 何時執行這ㄧ段code,以Google Analytics來說,基礎code必須是網站所有頁面都需要執行,所以"啟用規則“上,就直接選擇內定的"所有網頁“即可。

Google Tag Manager 標記管理工具 也可以運用在Google Analytics的JS程式碼上頭喔

最後還要按 “發佈" 這個按鈕,把設定好的程式代碼 “發佈“出去!

這樣~ 未來你需要安插其他的JS程式,都只需要再這個Google Tag Manager 標記管理工具 新增或是刪除即可,不需要找其他網頁開發人員了,是不是很方便呢~

另外、補充一下上面提到的要把這Google Tag Manager 標記管理工具的起動代碼安裝在Wordpress CMS系統裡,我們也不需要改任何WP的程式,有寫好的外掛可以直接選用喔~

Google Tag Manager 標記管理工具 也可以運用在Google Analytics的JS程式碼上頭喔

關鍵字就是 “Google Tag Manager" ,在WP的外掛工具中,有兩個可以讓你選擇。

WP Google Tag Manager  外掛介紹

Google Tag Manager and Webmaster Tools   外掛介紹

Google Tag Manager 標記管理工具 也可以運用在Google Analytics的JS程式碼上頭喔

WP Google Tag Manager 使用最簡單,但小缺點是安插Google Tag Manager的程式code為在網頁Body的下方位置,執行排序較慢。

我個人偏愛 Google Tag Manager and Webmaster Tools 這ㄧ支外掛,使用多了幾項其他功能,安插code的位置也較為上方。

利用這個WP的外掛,只要輸入Google Tag Manager啟動JS code中的 GTM-XXXX 這組代碼名稱即可,也是很簡單方便的。

最後這邊還有一個我個人遇到的"特殊狀況" 提供給朋友們參考了。

對於一個新的尚未申請過Google Analytics的網站,在第一次啟用GA 認證時,若我把這code交給Google Tag Manager取代時,這GA驗證狀態的地方怎麼樣都不會通過!

Google Tag Manager 標記管理工具 也可以運用在Google Analytics的JS程式碼上頭喔

始終都像上圖狀態這般,我只好先手動掛GA的JS code到Wordpress的網站上,等驗證通過後再把執行code更換成 Google Tag Manager 的JS code,之後才能正常的執行,GA也同時有資料了。

這ㄧ個問題不知道是不是Google Tag Manager 標記管理工具或是GA上的BUG,如果你也是第一次幫網站架上GA時,遇到這同樣問題時可以參考看看我的解決方式了。

說到這、個人覺得Google Tag Manager 標記管理工具是個很不錯的程式代碼管理工具,不過由於透過這Google Tag Manager 標記管理工具等於把許多JS程式code都"隱藏“到Google Tag Manager的代碼裡頭,對於網頁程式的debug和檢查會多了一些困難,因為網頁代碼中可是完全看不到這些要執行的程式到底有哪些了~ 在安全上有不錯的幫助,但也多了找問題時的難度~

而Google Tag Manager這管理工具並沒有提供本身的執行狀態檢查輔助,我覺得是個小小的遺憾,如果在他的管理介面上能再多個這樣的功能,讓我們知道到底這些委託他管理的code執行狀況如何,我想會更加友善且實用吧~~

最後、再推薦ㄧ些關於 Google Tag Manager 的參考網頁給大家:

Google Tag Manager 入门指南  纪杨的网站分析笔记

關於 Google 標記管理工具 官方說明網頁

Tag Manager -網站背後的好管家(上)

Tag Manager -網站背後的好管家(下)

 

吳 天元

溫厝的543大家長,平常沒時就愛碎碎唸,標準的阿宅。 平時就愛看電影、研究網路行銷,有時間當然也愛陪伴著家人! 總希望世界和平之外,更希望能看看外星人到底長啥模樣了!

在 “Google Tag Manager 標記管理工具 也可以運用在Google Analytics的JS程式碼上頭喔” 有 4 則留言

  1. 請問,如果我之前已經用了google 分析代碼在頁面中了
    我需要把google 分析代碼拿掉,換成tag manager 的代碼嗎?

  2. tag manager 和 GATC 是兩個不同的東西,tag manager是個代碼管理的工具/服務,不是用來取代GATC的,但你可以把GATC放到tag manager裡頭,若你已經做了這樣的功能,那原本網頁上的GATC就要拿掉,不然就變成埋了兩次了。

  3. 老師您好:
    不好意思打擾了,想請教GA操作的問題,我們的網站如下http://www.ibon.com.tw/default.aspx
    最近才剛改版完成,但明明每個頁面都有綁入GA追蹤碼,但GA就是無法抓到後面有標籤#的網址,以致於流量數據不精確,想請問這是要怎樣設定才能抓到流量數據呢? 再麻煩撥冗回覆,謝謝!

  4. “#" 符號有特定的意思,如果網站程式不能避開,則必須用"規則表達式"去改變網址中這類符號,不然會有滿多使用上的困擾的~
    這個網頁 報表資料檢視篩選器 提供你參考(不過GA很久沒更新這資訊了~)
    另外、一般網址有"#"都是錨點,你想要追"錨點"? 我不建議這個方式,這叫做"虛擬網頁"的追蹤方式,會讓報表"膨脹″,不容易分析相關數據的。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *