【教程】- GTM模板來了,定制你自己的個性化標籤

Photo of author
Written By CMO

Google Tag Manager的開發團隊一直在努力打造更易用的標籤部署環境。本篇HubSpot One就將通過一個實例介紹GTM模板的應用。先看效果:

GTM終於有Google統計標籤啦!
GTM終於有Google統計標籤啦!

上圖實例中,只需填寫你的Google統計ID就可以輕鬆建立一個Google統計的標籤。對於還未為GTM建立定制自帶標籤的第三方來說,我們使用這個方法可以解決許多重用性問題,在各個Container(容器)中都可以使用。

只需填寫ID就可以生成Google統計代碼
只需填寫ID就可以生成Google統計代碼

接下來我們就看看,如何使用GTM的標籤模板來自定義我們的常用標籤。

從左側菜單進入Templates,在Tag Templates右側點擊New進入Template Editor。

為模板添加基本訊息和圖標
為模板添加基本訊息和圖標

圖片推薦正方形。你可以在右側看到預覽效果。接下來我們為這個標籤模板添加一個必填字段,點擊Info旁的Fields。再點擊Add Field按鈕。

添加參數baid(Baidu Analytics ID)
添加參數baid(Baidu Analytics ID)

你還可以對這個參數進行設置,比如設置一個默認的值,又比如規定不能為空等等。

接下來我們就要進入代碼編寫的階段了,這也是本教程最重要的部分。

我們需要了解的是這裡用到的JavaScript腳本在GTM的沙盒中,因此一些我們常用的全局變量並不可用。換之而已,我們必須使用GTM提供的API來實現。

Google統計必須調用來自Google的外部腳本,在此我們使用injectScript方法。

使用require導入injectScript
使用require導入injectScript

上面就是完整代碼,你可能注意到,我們調用了data.baid。這就可以把參數傳入其中。 injectScript(url, onSuccess, onFailure);最終會調用Google腳本並把ID傳給Google。

你可能還注意到我們使用了queryPermission方法。這是為了保證安全性。我們可以在Permissions中設置允許調用的腳本的域。

設置允許調用的腳本的域
設置允許調用的腳本的域

隨後我們就大功告成了,Save後點擊Test看效果。當然也可以使用Preview然後在開發者工具(F12)中查看Google統計的pixel是否被調用。

完成後填入ID測試效果
完成後填入ID測試效果

那麼這個實例教程我們就完成了。你可以將這個模板應用於所有容器。當未來Google統計代碼調用發生改變時,你並不需要對每一個容器進行更新,而只需要對模板進行調整即可。

最後,還記得我們層級介紹過正則表達式嗎? 。你可以驗證用戶是否輸入正確的Google統計ID。

為輸入值添加正則表達式校驗
為輸入值添加正則表達式校驗

如果你感興趣,GTM大神Simo Ahava為此提供了更為詳盡GTM Template的教程。 Save按鈕旁邊的菜單還有導入導出功能,你可以點擊這裡下載,直接導入本篇HubSpot One演示的例子。好了,本篇HubSpot One為你帶來的教程的完整代碼如下:

// Enter your template code here.
var log = require(‘logToConsole’);
log(‘data =’, data);
// Require the necessary APIs
const logToConsole = require(‘logToConsole’);
const injectScript = require(‘injectScript’);
const queryPermission = require(‘queryPermission’);
const url = ‘https://hm.baidu.com/hm.js?’ + data.baid;
// If the script loaded successfully, log a message and signal success
const onSuccess = () => {
log(‘Maxket.com: Script ‘+ url +’ loaded successfully.’);
data.gtmOnSuccess();
};
// If the script fails to load, log a message and signal failure
const onFailure = () => {
log(‘Maxket.com: Script ‘+ url +’ load failed.’);
data.gtmOnFailure();
};
// If the URL input by the user matches the permissions set for the template,
// inject the script with the onSuccess and onFailure methods as callbacks.
if (queryPermission(‘inject_script’, url)) {
injectScript(url, onSuccess, onFailure);
} else {
log(‘Maxket.com: Script ‘+ url +’ load failed due to permissions mismatch.’);
data.gtmOnFailure();
}
// Call data.gtmOnSuccess when the tag is finished.
data.gtmOnSuccess();