自訂範本可讓你撰寫自己的代碼和變數定義, 機構中的其他成員可以同時使用這些範本 變數範本自訂範本以權限為中心、沙箱模式 讓您能以更安全有效率的方式編寫自訂代碼和變數 搭配自訂 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
檔案。