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