Mẫu tuỳ chỉnh cho phép bạn viết định nghĩa biến và thẻ của riêng mình để những người khác trong tổ chức của bạn có thể sử dụng chúng cùng với thẻ và mẫu biến tích hợp. Nhờ tính chất tập trung vào quyền, dạng hộp cát của các mẫu tuỳ chỉnh, bạn có thể viết các thẻ và biến tuỳ chỉnh theo cách an toàn, hiệu quả hơn so với khi sử dụng thẻ HTML tuỳ chỉnh và biến JavaScript tuỳ chỉnh.
Bạn có thể xác định các mẫu biến và thẻ tuỳ chỉnh trong mục Mẫu của Trình quản lý thẻ của Google. Màn hình Mẫu chính sẽ liệt kê mọi mẫu thẻ hoặc biến đã được xác định trong vùng chứa của bạn. Bạn cũng có thể tạo các mẫu mới từ màn hình này.
Bạn có thể xuất một mẫu và chia sẻ mẫu đó với những người khác trong tổ chức của mình. Bạn có thể phát triển các mẫu đó để phân phối rộng hơn trong Thư viện mẫu cho cộng đồng.
Trình chỉnh sửa mẫu
Trình chỉnh sửa mẫu cho phép bạn tạo, xem trước và thử nghiệm các mẫu tuỳ chỉnh. Thẻ này có 4 vùng dữ liệu đầu vào chính để giúp bạn xác định mẫu thẻ:
- Thông tin – Xác định các thuộc tính cơ bản của mẫu, chẳng hạn như thẻ hoặc tên biến và biểu tượng.
- Trường – Đây là trình chỉnh sửa trực quan để thêm các trường nhập dữ liệu vào mẫu thẻ của bạn.
- Mã – Nhập JavaScript dạng hộp cát để xác định cách hoạt động của thẻ hoặc biến.
- Quyền – Xem và đặt các giới hạn về những gì thẻ hoặc biến của bạn được phép làm.
Tạo mẫu thẻ tuỳ chỉnh đầu tiên của bạn
Ví dụ này sẽ hướng dẫn bạn cách tạo một thẻ pixel cơ bản. Khi được kích hoạt trên một trang web, thẻ này sẽ gửi một lượt truy cập có thông tin tài khoản chính xác đến máy chủ của nhà cung cấp thẻ.
1. Để bắt đầu mẫu đầu tiên, hãy nhấp vào Mẫu trong bảng điều hướng bên trái, rồi nhấp vào nút Mới trong mục Mẫu thẻ.
2. Nhấp vào Thông tin rồi xác định Tên (bắt buộc), Mô tả và Biểu tượng của thẻ.
Tên là tên mà người dùng sẽ nhìn thấy khi họ triển khai thẻ này trên toàn bộ giao diện người dùng của Trình quản lý thẻ.
Mô tả chỉ là nội dung mô tả – nội dung mô tả ngắn gọn (200 ký tự trở xuống) về chức năng của thẻ này.
Biểu tượng cho phép bạn chọn hình ảnh sẽ xuất hiện khi thẻ hiển thị trong danh sách hỗ trợ thuộc tính biểu tượng. Hình ảnh biểu tượng phải là tệp PNG, JPEG hoặc GIF vuông có kích thước không lớn hơn 50 kB và tối thiểu là 64 px x 64 px.
3. Nhấp vào Làm mới để xem trước mẫu.
Ở bên phải trường nhập dữ liệu, bạn sẽ thấy cửa sổ Xem trước mẫu. Mỗi khi có thay đổi nào đó trong trình chỉnh sửa, nút Refresh (Làm mới) sẽ xuất hiện. Nhấp vào Làm mới để xem các thay đổi có tác động gì đối với giao diện của thẻ.
4. Nhấp vào Trường để thêm trường vào mẫu thẻ.
Thẻ Trường của Trình chỉnh sửa mẫu cho phép bạn tạo và chỉnh sửa các trường trong mẫu thẻ. Các trường được dùng để nhập dữ liệu tuỳ chỉnh (chẳng hạn như mã tài khoản). Bạn có thể thêm các thành phần biểu mẫu chuẩn như trường văn bản, trình đơn thả xuống, nút chọn và hộp đánh dấu.
5. Nhấp vào Thêm trường rồi chọn Nhập văn bản. Thay thế tên mặc định (ví dụ: "text1") bằng "accountId". Trong phần Xem trước mẫu, nhấp vào Làm mới.
Trường này sẽ có biểu tượng bộ chọn biến quen thuộc (
Bước tiếp theo là thêm nhãn vào trường:
6. Nhấp vào biểu tượng mở rộng (
Nhãn văn bản có tiêu đề "Mã tài khoản" sẽ xuất hiện phía trên trường này.
7. Nhấp vào thẻ Mã rồi nhập JavaScript dạng hộp cát vào trình chỉnh sửa:
// 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);
Dòng mã đầu tiên, const sendPixel = require('sendPixel'), nhập API sendPixel.
Dòng mã thứ hai, const encodeUriComponent =
require('encodeUriComponent'), nhập API encodeUriComponent.
Dòng tiếp theo, const account = data.accountId;, nhận giá trị của accountId đã được tạo ở bước 5 và lưu trữ giá trị đó trong một hằng số có tên là account.
Dòng mã thứ 3, const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);, thiết lập một hằng số url liên kết một điểm cuối URL cố định ghi lại dữ liệu phân tích và mã tài khoản được mã hoá mà thẻ đã được định cấu hình.
Dòng cuối cùng, sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure), chạy hàm sendPixel() với các tham số bắt buộc và gửi yêu cầu đến URL đã chỉ định. Các giá trị data.gtmOnSuccess và data.gtmOnFailure cho Trình quản lý thẻ của Google biết khi nào thẻ đã hoàn thành hoặc không hoàn thành nhiệm vụ, sau đó được Trình quản lý thẻ của Google sử dụng cho các tính năng như sắp xếp theo trình tự thẻ hoặc chế độ xem trước.
8. Nhấp vào Lưu để lưu tiến trình của bạn. Thao tác này sẽ tải mọi quyền phát hiện được vào Trình chỉnh sửa mẫu.
Một số API mẫu có liên kết với quyền cho biết những việc chúng có thể làm hoặc không thể làm. Khi bạn sử dụng API mẫu (chẳng hạn như sendPixel) trong mã, Trình quản lý thẻ sẽ hiển thị các quyền liên quan trong thẻ Quyền.
9. Nhấp vào Quyền để tinh chỉnh những miền mà sendPixel được phép gửi dữ liệu đến. Đối với mục Gửi pixel, hãy nhấp vào biểu tượng mở rộng (https://endpoint.example.com/ vào phần Mẫu so khớp URL được phép.
Khi định cấu hình mẫu thẻ để gửi dữ liệu, bạn phải chỉ định Mẫu so khớp URL được phép trong quyền được liên kết để hạn chế nơi có thể gửi dữ liệu. Nếu URL được chỉ định trong mã của bạn không khớp với mẫu khớp URL được cho phép, thì lệnh gọi sendPixel sẽ không thành công.
Mẫu so khớp URL phải sử dụng HTTPS, đồng thời chỉ định cả mẫu đường dẫn và máy chủ lưu trữ. Dấu hoa thị có thể là một miền (ví dụ: "https://example.com/").https://example.com/https://sub.example.com//*https://\*.example.com/test/\*.example.com/www.example.comshop.example.comblog.example.com\*https://example.com/\*
Chỉ định mẫu so khớp URL bổ sung trên các dòng riêng biệt.
10. Nhấp vào Run Code (Chạy mã) rồi xem cửa sổ Console (Bảng điều khiển) để tìm hiểu vấn đề.
Mọi lỗi được phát hiện sẽ xuất hiện trong cửa sổ Console (Bảng điều khiển).
11. Nhấp vào Lưu rồi đóng Trình chỉnh sửa mẫu.
Mẫu thẻ hiện đã sẵn sàng để sử dụng.
Sử dụng thẻ mới của bạn
Quy trình tạo một thẻ mới sử dụng mẫu thẻ tuỳ chỉnh mới được xác định cũng giống như bất kỳ thẻ nào khác:
- Trong Trình quản lý thẻ của Google, hãy nhấp vào Thẻ > Mới.
- Thẻ mới của bạn sẽ xuất hiện trong mục Tuỳ chỉnh của cửa sổ Thẻ mới. Nhấp vào nút đó để mở mẫu thẻ.
- Điền vào các trường cần thiết cho cấu hình mẫu thẻ.
- Nhấp vào Kích hoạt và chọn một điều kiện kích hoạt thích hợp để xác định thời điểm thẻ sẽ kích hoạt.
- Lưu thẻ và xuất bản vùng chứa.
Tạo mẫu biến tuỳ chỉnh đầu tiên của bạn
Các mẫu biến tuỳ chỉnh cũng tương tự như mẫu thẻ, có một số điểm khác biệt đáng chú ý:
Mẫu biến tuỳ chỉnh phải trả về một giá trị.
Thay vì gọi
data['gtmOnSuccess']để cho biết trạng thái hoàn thành, các biến trực tiếp trả về một giá trị.Các mẫu biến tùy chỉnh được sử dụng trong các phần khác nhau của giao diện người dùng Trình quản lý thẻ.
Thay vì chuyển đến Thẻ > Mới để tạo biến mới dựa trên biến tuỳ chỉnh, bạn hãy chuyển đến mục Biến > Mới
Xem bài viết tạo biến tuỳ chỉnh để biết hướng dẫn đầy đủ về cách tạo mẫu biến tuỳ chỉnh.
Xuất và nhập
Để chia sẻ một mẫu tuỳ chỉnh với tổ chức của mình, bạn có thể xuất mẫu tuỳ chỉnh và nhập mẫu đó vào các vùng chứa khác của Trình quản lý thẻ. Cách xuất mẫu:
- Trong Trình quản lý thẻ, hãy nhấp vào Mẫu.
- Nhấp vào tên của mẫu mà bạn muốn xuất trong danh sách. Thao tác này sẽ mở mẫu trong Trình chỉnh sửa mẫu.
- Nhấp vào trình đơn Thao tác khác (more_vert) rồi chọn Xuất.
Cách nhập một mẫu:
- Trong Trình quản lý thẻ, hãy nhấp vào Mẫu.
- Nhấp vào Mới. Thao tác này sẽ mở một mẫu trống trong Trình chỉnh sửa mẫu.
- Nhấp vào trình đơn Thao tác khác (more_vert) và chọn Import (Nhập).
- Chọn tệp
.tplmà bạn muốn nhập.