自訂範本可讓你撰寫自己的代碼和變數定義, 機構中的其他成員可以同時使用這些範本 變數範本自訂範本以權限為中心、沙箱模式 讓您能以更安全有效率的方式編寫自訂代碼和變數 搭配自訂 HTML 代碼和自訂 JavaScript 變數。
您可以在 Google 代碼管理工具範本主要畫面會列出所有代碼或變數 您在容器中定義的範本您也可以建立 建立新範本
您可以匯出範本,與貴機構的其他人共用, 您可以運用如何開發更多範本 社群範本庫:
範本編輯器
範本編輯器可讓您建立、預覽及測試自訂範本。 這裡有四個主要區域,可協助您定義代碼範本:
- 資訊 - 定義範本的基本屬性,例如標記或 變數名稱和圖示
- 欄位 - 這個視覺編輯器可將輸入欄位新增至代碼範本。
- 程式碼:輸入採用沙箱機制的 JavaScript,定義代碼或變數的方式 應該能正常運作
- 權限:查看及設定代碼或變數的限制 來執行。
建立第一個自訂標記範本
這個範例將逐步說明如何建立基本的像素廣告代碼範例。時間 這個代碼在網頁上觸發後,該代碼就會傳送正確的帳戶命中 將相關資訊傳送給代碼供應商的伺服器
1. 如要開始建立第一個範本,請按一下左側導覽面板中的「範本」,然後 按一下「代碼範本」部分下方的「新增」按鈕。
2. 按一下「資訊」,然後定義代碼的名稱 (必填)、說明和 圖示。
名稱是使用者導入這個代碼時會看到的名稱 整個代碼管理工具使用者介面上的各個環節
說明顧名思義,就是簡短的「說明」(最多 200 個半形字元) 說明此代碼的用途
圖示可讓您選擇要在標記顯示內容時顯示的圖片 列出支援圖示屬性的清單圖示圖片應為正方形 PNG、JPEG 或 大小不超過 50 KB 且大小至少為 64 x 64 像素的 GIF 檔案。
3. 按一下「重新整理」即可預覽範本。
欄位輸入的右側會顯示「Template Preview」視窗。每次 每當在編輯器中進行變更時,系統就會顯示「重新整理」按鈕。按一下 重新整理即可查看您對代碼外觀所做的變更。
4. 按一下「欄位」,在代碼範本中新增欄位。
範本編輯器的「欄位」分頁可讓您建立及編輯代碼中的欄位 範本。欄位可用來輸入自訂資料,例如帳戶 ID。你可以 在文字欄位、下拉式選單、圓形按鈕等標準表單元素中 和核取方塊
5. 按一下「新增欄位」並選取「文字輸入」。替換預設名稱 (例如 "text1") 取代為 "accountId"。在「Template Preview」中,按一下「Refresh」。
這個欄位會有常用的變數選取器 () 圖示
。這個範本的使用者只要按一下變數選取器圖示,即可
選擇這個容器中有效的變數。
下一步是在欄位中加入標籤:
6. 按一下文字欄位旁邊的「展開」圖示 即可開啟更多內容
來為這個欄位選取適當的選項輸入「帳戶 ID」。的值。於
按一下「範本預覽」,然後按一下「重新整理」。
標題為「帳戶 ID」的文字標籤。
7. 按一下「Code」分頁標籤,然後在編輯器中輸入採用沙箱機制的 JavaScript:
// require relevant API
const sendPixel = require('sendPixel');
const encodeUriComponent = require('encodeUriComponent');
// capture values of template fields
const account = data.accountId;
// use the provided APIs to do things like send pixels
const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);
sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure);
第一行程式碼 const sendPixel = require('sendPixel') 會匯入
sendPixel API。
第二行程式碼 const encodeUriComponent =
require('encodeUriComponent') 會匯入 encodeUriComponent API。
下一行 const account = data.accountId; 會取得 accountId 的值
建立在步驟 5 中建立的,並儲存在名為 account 的常數中。
第三行程式碼
const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);,
設定 url 常數,用於串連記錄到
Analytics 資料和經過編碼的帳戶 ID
專案。
最後一行 sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure) 會執行
sendPixel() 函式搭配必要參數,然後向
指定網址。data.gtmOnSuccess 和 data.gtmOnFailure 值會指出
Google 代碼管理工具會在代碼完成或失敗工作時觸發
Google 代碼管理工具,用於執行代碼排序等功能
預覽模式。
8. 按一下「Save」(儲存) 即可儲存進度。這會載入所有偵測到的權限 複製到範本編輯器中
部分 Template API 具備相關聯的權限,而這些權限會決定哪些內容
能夠或不能執行的作業如果您將 sendPixel 等範本 API 用於
程式碼中,代碼管理工具會在「權限」分頁中顯示相關權限。
9. 按一下「權限」,修正「sendPixel」可傳送的網域
將資料傳送至在「Send Pixels」(傳送像素) 項目上,按一下展開圖示 () 然後
在「允許的網址比對模式」中輸入
https://endpoint.example.com/。
設定標記範本來傳送資料時,您必須指定允許
存取相關聯權限的網址格式,以限制資料的位置
。如果程式碼中指定的網址與允許的網址不符
比對模式,sendPixel 呼叫就會失敗。
網址比對模式必須使用 HTTPS,並同時指定主機和路徑模式。
主機可以是網域 (例如「https://example.com/」) 或特定子網域
(例如「https://sub.example.com/」)。路徑必須包含至少一個「/」。
使用星號 (*) 做為萬用字元來表示
任何長度 (例如「https://\*.example.com/test/」)。星號是萬用字元
字元,用於擷取各種可能模式,例如:
「\*.example.com/」將比對出「www.example.com」、「shop.example.com」
blog.example.com 等。星號必須使用反斜線逸出
字元:「\*」。沒有額外字元的網址 (例如
「https://example.com/」) 會視為結尾為萬用字元 (亦即相當於
「https://example.com/\*」。
分行指定額外的網址比對模式。
10. 按一下「Run Code」,然後查看「Console」視窗是否有任何問題。
所有偵測到的錯誤都會顯示在「Console」(控制台) 視窗中。
11. 按一下「儲存」,然後關閉範本編輯器。
代碼範本現在應該已可供使用。
使用新代碼
使用新定義的自訂標記範本建立新代碼的程序 就像任何其他代碼一樣:
- 在 Google 代碼管理工具中,按一下 [代碼] > 新功能:
- 新的代碼會顯示在「新增代碼」視窗的「自訂」部分。 按一下以開啟代碼範本。
- 填寫代碼範本設定的必填欄位。
- 按一下「觸發條件」,然後選取適當的代碼觸發時機 應會觸發。
- 儲存代碼並發布容器。
建立第一個自訂變數範本
自訂變數範本與標記範本類似,其實有幾個 差異:
自訂變數範本必須傳回一個值。
變數不要呼叫
data['gtmOnSuccess']表示完成 會直接傳回值。自訂變數範本在代碼管理工具的不同部分使用 第一種是使用無代碼解決方案 AutoML 透過使用者介面建立機器學習模型
而不是前往 新增:根據 請前往 [變數] > [自訂變數]新功能
如需建立自訂變數的完整指南,請參閱「建立自訂變數」一文 範本。
匯出及匯入
如要與貴機構共用自訂範本,請匯出自訂範本 並匯入其他代碼管理工具容器。如何匯出範本:
- 在代碼管理工具中,按一下「範本」。
- 在清單中按一下想要匯出的範本名稱。這將 在範本編輯器中開啟範本。
- 按一下 [更多動作] 選單 (more_vert),然後 選取「匯出」。
如何匯入範本:
- 在代碼管理工具中,按一下「範本」。
- 按一下 [新增],系統隨即會在範本編輯器中開啟空白範本。
- 按一下 [更多動作] 選單 (more_vert),然後 選取「匯入」。
- 選取要匯入的
.tpl檔案。