這篇文章主要是幫助完全不懂程式碼的新手,透過一款免費的?Google Tag Manager for WordPress?插件,來幫你的網站正確埋入 Google 提供的程式碼管理工具 Google Tag Manager ( GTM )。
在安裝完 GTM 之后,我也會帶你實際操作一次,如何埋入所有網站必備的分析工具 Google Analytics ( GA ),幫助你接將所有進入網站的流量數據一網打盡!
Google Tag Manager ( GTM )?是一款由 Google 推出的免費網站程式碼管理工具,它主要是設計給不懂程式碼的網站站長使用,讓他們能夠在不接觸任何程式碼的情況下,對自己的網站程式碼進行新增功能。
舉例來說,如果你想要在網站中啟用?Google Analytics ( GA )?的網站分析報表,那么你就必須在網站中埋入一段程式碼,這時候你只要透過 GTM,就可以在上面簡單的點點鼠標,將程式碼埋放好,完全不需要懂程式語言,非常方便!
而如果你想要投放 Facebook 廣告、Goolge Ads 廣告等,那你就不可不用 GTM 進行這些廣告的成效追蹤與分析,GTM 可以說是行銷人必會的 No.1 技能。
除此之外,GTM 是一個免費的工具,就跟 Gmail, Google Drive 一樣,只要你有一個 Google 帳號就能使用,所以基本上不具有任何使用門檻,請安心使用。
總之,使用 GTM 能夠幫助你更好的管理與維護網站的程式碼,省去工程上的許多麻煩。
前往 WordPress 后臺,安裝并啟用?Google Tag Manager for WordPress?這款插件。
啟用完之后,在 WordPress 后臺左邊工具列中的“設置”中點選“Google Tag Manager”。
接著就會進入到插件設置的主畫面,這時候它會要求你填寫一個“Google 代碼管理工具容器 ID”,如果你已經有用過 GTM 的話,就直接填寫你的 GTM 容器 ID,并繼續(xù)往下進行。
如果你還沒有設置過 GTM 的話,這邊我簡單的帶你設置一下:
在登入 Google 帳號的情況下,前往?Google Tag Manager 首頁,便可以開啟這個畫面。
點選圖中的紅框處,建立一個新的帳戶。
在帳戶設置的部分,請依序進行以下步驟:
接著就勾選同意合約,再按下右上角“是”。
會跳出一串密密麻麻的程式碼,這就是 GTM 的基底程式碼,但由于我們是用 WordPress 的插件安裝,因此用不到,直接按“確定”即可。。
接著在右上角找到一段GTM-xxxxxx
的編號,這就是你的 GTM 代碼容器 ID,將其復製下來。
如果你是比較怕寫程式碼的人,或是不懂得怎么使用子主題,在上方填寫?GTM 代碼
之后,直接選第一個選項頁面頁尾
,即可以輕松插入 GTM 完成!
但因為這個作法,作者有特別注明 Google 不建議這么做,不建議的原因可能是因為這個作法是將程式碼放在頁面尾端,可能會導致放在前面的程式碼沒有 load 到。
因此,我在下方又提供了作者建議的?自訂
?作法,如果很在意這點的人可以用我的方法試看看。
回到 WordPress 后臺,剛剛開啟 GTM 插件的地方,并依序輸入:
完成之后,回到后臺左邊工具列中的“外觀”,并點選“佈景主題編輯器”。
Child
?的字樣。( 注:不使用子主題的話,主題更新后就會消失,要特別注意!如果你沒有子主題,請去研究怎么使用子主題,或是使用我前面提到的安裝 GTM 的方法。 )functions.php
?的檔案。接著將下面這串程式碼復製,然后直接貼上回剛剛開啟的?functions.php
?檔案空白處。
add_action('wp_body_open','add_gtm_code');
function add_gtm_code(){
if ( function_exists( 'gtm4wp_the_gtm_tag' ) ) {
gtm4wp_the_gtm_tag();
};
}
貼上完之后,拉到最下面點選“更新檔案”。
這個步驟如果不行的話,可能是有些主題的寫法不支援,那就直接回插件設置選“頁面頁尾”即可。( 雖然作者說 Google 不建議這樣做,但我個人是覺得應該沒啥差。 )
接著回到 GTM 之中,我們要來檢查一下剛剛的設置有沒有生效,因此依序進行:
接著打開你的 WordPress 網站,刷新一下你的網頁瀏覽器,如果這時候下面有跳出這個畫框,就代表你的 GTM 已經成功生效了。
接著就讓我們來實際試試看,如何透過 GTM 來安裝?Google Analytics ( GA ),這套所有 WordPress 站長必裝的分析工具吧!
GA 是由 Google 開發(fā)的一套網站流量分析工具,它不僅是完全免費的,而且功能深入淺出,非常強大,可以說是所有網站都必裝的工具之一。
基本上,你想知道的任何關于網站上發(fā)生的行為與數據,透過 GA 都能找到解答,最簡單也最重要的 GA 數據分別是“使用者”、“工作階段”、“瀏覽量”,透過觀察 GA 這三個簡單的數據,我們便能對網站的使用者有初步的分析。
裝 GA 對于網站是百利而無一害的,建議所有網站一定要裝,太晚裝的話,之后你要看前面的資料就沒辦法了。
先登入你的 Google 帳號,再前往?GA 首頁,點選“開始測量”。
因為我們是 WordPress 網站,所以選擇“網站”的選項,并點選下一步。
接著你的 GA 就會成功建立了,依序進行:
回到 GTM 之中,依序進行:
接下來是一串比較繁復的設置,依序進行:
這邊是定義一個 GA 的變數,我們要將剛剛建立起的 GA 代碼 ID 貼在這里。
Google Analytics Setting
。完成之后,檢查一下設置是否都完成了,并進行。
Google Analytics Base
。接著在 GTM 右上角處按“提交”,然后一路按繼續(xù)到底就好了。
此時打開你的網站首頁,并再回到 GA 首頁的報表中檢視,如果有看到這邊的數字顯示?1
?的話,就代表 GA 成功蒐集到你的數據了,安裝完成!
如果你的網站是使用 Woocommerce 作為電商官網的話,還可以再另外開啟?GA 加強型電子商務報表 做更進一步的追蹤,比如說獲得銷售金額、轉換率、購物車放棄率等電商專屬數據,有興趣的話可以參考下面這篇文章。
用 GTM 去安裝 GA 算是一個最基本的搭配應用,其實 GTM 的世界是非常博大精深,GTM 可以幫你在網站上做到很多很多事情,基本上任何你想知道的網站信息,都可以透過 GTM 的進階功能“資料層 ( Data Layer )”來達成。
除了一開始提及的 Facebook 廣告、Google Ads 之外,也可以安裝 Email 行銷工具、Hotjar 視覺化網站監(jiān)聽工具…等等,讓你不需要再另外裝一堆 WordPress 的插件,就能啟用這些第三方服務,非常方便!
總之,如果你是不懂程式碼的 WordPress 站長,那么你一定要學會如何使用 GTM,它可以幫助你在沒有工程師的情況下,為網站安裝許多新的功能。
]]>