Hướng dẫn cho nhà phát triển về Monitoring API

API giám sát cho phép bạn xây dựng các công cụ để theo dõi hành vi và hiệu suất của thẻ. Bạn có thể thực hiện việc này thông qua phương thức API mẫu tuỳ chỉnh addEventCallback. Phương thức này cho phép bạn chỉ định một lệnh gọi lại sự kiện. Lệnh gọi lại này sẽ được gọi khi một sự kiện kết thúc. Lệnh gọi lại này sẽ nhận thông tin về sự kiện, cho phép bạn tạo các hoạt động triển khai giám sát thẻ của riêng mình. Bạn cũng có thể thêm siêu dữ liệu vào thẻ để cho phép theo dõi chi tiết hơn.

API giám sát có thể hỗ trợ một số trường hợp sử dụng tính năng giám sát, chẳng hạn như trạng thái thẻ, thời gian thực thi và siêu dữ liệu. Mục tiêu cuối cùng của các pixel theo dõi này là gửi dữ liệu tới điểm cuối do bạn chọn. Sau đó, có thể truy cập nhật ký từ điểm cuối này để thu thập dữ liệu giám sát. Sau đó, dữ liệu đó có thể hiển thị trong trang tổng quan hoặc dùng để kích hoạt hệ thống cảnh báo.

Trạng thái thẻ

Kỹ thuật trạng thái thẻ minh hoạ trong ví dụ này sử dụng addEventCallback để kiểm tra trạng thái kích hoạt của các thẻ trên một trang. Thao tác này sẽ lặp lại trên tất cả các thẻ đã kích hoạt cho sự kiện và đếm số lượng thẻ thành công, không thành công, có ngoại lệ hoặc hết thời gian chờ. Sau đó, các dữ liệu tổng số này được thêm vào URL pixel giám sát dưới dạng tham số truy vấn. Pixel giám sát sẽ có URL tương tự như sau:

https://www.example.com/monitoring?ctid=GTM-XXXXXX&success=4&failure=1&exception=1&timeout=0

Bạn có thể thiết lập URL pixel bằng đoạn mã ví dụ sau:

const addEventCallback = require('addEventCallback');
const sendPixel = require('sendPixel');

addEventCallback(function(containerId, eventData) {
  let successCount = 0;
  let failureCount = 0;
  let exceptionCount = 0;
  let timeoutCount = 0;

  const tagData = eventData['tags'];
  const timingData = [];
  for (let i in tagData) {
    let entry  = tagData[i];
    switch (entry.status) {
      case 'success':
        successCount++;
        continue;
      case 'failure':
        failureCount++;
        continue;
      case 'exception':
        exceptionCount++;
        continue;
      case 'timeout':
        timeoutCount++;
        continue;
    }
  }
  let url = 'https://www.example.com/monitoring?ctid=' + containerId +
      '&success=' + successCount +
      '&failure=' + failureCount +
      '&exception=' + exceptionCount +
      '&timeout=' + timeoutCount;
  sendPixel(url);
});
data.gtmOnSuccess();

Thời gian thực thi

Kỹ thuật này sử dụng addEventCallback để giúp bạn thu thập dữ liệu về thời gian thực thi của các thẻ. Đối với mỗi thẻ đã kích hoạt cho sự kiện này, thông số truy vấn được thêm vào URL pixel bao gồm ID của thẻ và thời gian thực thi. Thao tác này sẽ gửi một pixel tương tự như sau:

https://www.example.com/monitoring?ctid=GTM-XXXXXX&tag12=1200&tag50=400&tag1=6000

Bạn có thể thiết lập URL pixel bằng đoạn mã ví dụ sau:

const addEventCallback = require('addEventCallback');
const sendPixel = require('sendPixel');

addEventCallback(function(containerId, eventData) {
  let url = 'https://www.example.com/monitoring?ctid=' + containerId;
  const tagData = eventData['tags'];
  const timingData = [];
  for (let i in tagData) {
    let entry = tagData[i];
    timingData.push('&tag' + entry['id'] + '=' + entry['executionTime']);
  }
  url += timingData.join('');
  sendPixel(url);
});
data.gtmOnSuccess();

Metadata

Bạn có thể xây dựng trang tổng quan hữu ích bằng cách sử dụng dữ liệu cơ sở do API giám sát cung cấp. Tuy nhiên, có thể có những trường hợp bạn chỉ muốn theo dõi một nhóm nhỏ thẻ. Để hỗ trợ việc này, hãy sử dụng mục Siêu dữ liệu thẻ để chỉ định các cặp khoá-giá trị tuỳ ý trong định nghĩa thẻ. Các giá trị này sẽ được đưa vào đối tượng dữ liệu sự kiện khi lệnh gọi lại sự kiện xảy ra.

Ví dụ: Thẻ được thêm vào vùng chứa cho một chiến dịch quảng cáo mới. Vùng chứa có nhiều thẻ hiện tại, nhưng bạn chỉ muốn theo dõi thẻ mới này.

Để xác định thẻ này từ một lệnh gọi lại sự kiện, hãy thêm siêu dữ liệu vào thẻ:

1. Trong phần định nghĩa thẻ, hãy nhấp vào Cài đặt nâng cao > Siêu dữ liệu thẻ bổ sung.
2. Nhấp vào Bao gồm tên thẻ để đánh dấu.
3. Trong mục Khoá cho tên thẻ, hãy nhập một giá trị. Ví dụ này sử dụng "name" làm giá trị. Thông tin này sẽ bao gồm tên thẻ trong dữ liệu sự kiện khi thẻ được gửi.
4. Nhấp vào +Thêm siêu dữ liệu rồi nhập cặp Khoá và Giá trị. Ví dụ này sử dụng Khoá có tên là "nhóm" và Giá trị là "Chiến dịch 2019".
5. Sử dụng nút +Thêm siêu dữ liệu để thêm các hàng bổ sung của cặp khoá/giá trị, nếu muốn.

Trong mẫu tùy chỉnh, nhà phát triển có thể xác định thẻ này bằng cách kiểm tra các giá trị được đặt trong siêu dữ liệu:

const addEventCallback = require('addEventCallback');
const sendPixel = require('sendPixel');

addEventCallback(function(containerId, eventData) {
  let url = 'https://www.example.com/monitoring/campaignPixel?ctid=' + containerId;
  const tagData = eventData['tags'];
  for (let i in tagData) {
    let entry = tagData[i];
    if (entry['name'] === 'Conversion Pixel 2019') {
      url += '&status=' + entry['status'];
      break;
    }
  }
  sendPixel(url);
});
data.gtmOnSuccess();

Kết quả là sẽ tạo ra một URL pixel giống như sau:

https://www.example.com/monitoring/campaignPixel?ctid=GTM-XXXXXX&status=success

Nếu muốn, bạn có thể theo dõi tất cả các thẻ cho nhóm "Chiến dịch 2019":

const addEventCallback = require('addEventCallback');
const encode = require('encodeUriComponent');
const sendPixel = require('sendPixel');

addEventCallback(function(containerId, eventData) {
  let url = 'https://www.example.com/monitoring/campaign2019?ctid=' + containerId;
  const tagData = eventData['tags'];
  for (let i in tagData) {
    let entry = tagData[i];
    if (entry['group'] === 'Campaign 2019') {
      url += '&' + encode(entry['name']) + '=' + entry['status'];
      break;
    }
  }
  sendPixel(url);
});
data.gtmOnSuccess();

Điều này sẽ tạo ra một pixel giám sát tương tự như sau:

https://www.example.com/monitoring/campaign2019?ctid=GTM-XXXXXX&Conversion%20Pixel%202019=failure