Panduan Developer Monitoring API

Monitoring API memungkinkan Anda membuat alat untuk memantau perilaku dan performa tag. Hal ini dilakukan melalui metode API Template Kustom addEventCallback. Metode ini memungkinkan Anda menentukan callback peristiwa yang akan dipanggil di akhir peristiwa. Callback ini akan menerima informasi tentang peristiwa, yang memungkinkan Anda membuat penerapan pemantauan tag Anda sendiri. Anda juga dapat menambahkan metadata ke tag untuk mengizinkan pemantauan yang lebih mendetail.

Monitoring API dapat mendukung beberapa kasus penggunaan pemantauan seperti status tag, waktu eksekusi, dan metadata. Tujuan akhir piksel pemantauan ini adalah untuk mengirim data ke endpoint yang Anda pilih. Log dari endpoint ini kemudian dapat diakses untuk mengumpulkan data pemantauan, dan data tersebut kemudian dapat ditampilkan di dasbor atau digunakan untuk memicu sistem peringatan.

Status tag

Teknik status tag yang ditampilkan dalam contoh ini menggunakan addEventCallback untuk menghitung status pengaktifan tag di halaman. Tindakan ini akan berulang pada semua tag yang diaktifkan untuk peristiwa tersebut dan menghitung jumlah tag yang berhasil, gagal, menampilkan pengecualian, atau habis waktunya. Jumlah ini kemudian ditambahkan ke URL piksel pemantauan sebagai parameter kueri. Piksel pemantauan akan memiliki URL yang mirip dengan URL ini:

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

URL piksel dapat disiapkan menggunakan contoh kode berikut:

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();

Waktu eksekusi

Teknik ini menggunakan addEventCallback untuk membantu Anda mengumpulkan data tentang waktu eksekusi tag. Untuk setiap tag yang diaktifkan untuk peristiwa ini, parameter kueri ditambahkan ke URL piksel yang menyertakan ID tag dan waktu eksekusi. Tindakan ini mengirim piksel yang menyerupai yang berikut ini:

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

URL piksel dapat disiapkan menggunakan contoh kode berikut:

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

Anda dapat membuat dasbor yang berguna dengan data dasar yang disediakan oleh Monitoring API. Namun, mungkin ada kasus saat Anda hanya ingin memantau subset tag. Untuk memfasilitasi hal ini, gunakan bagian Metadata Tag untuk menentukan pasangan nilai kunci arbitrer dalam definisi tag. Nilai ini akan disertakan dalam objek data peristiwa saat callback peristiwa terjadi.

Misalnya: Tag ditambahkan ke penampung untuk kampanye iklan baru. Penampung ini memiliki banyak tag, tetapi Anda hanya tertarik untuk memantau tag baru ini.

Untuk mengidentifikasi tag ini dari callback peristiwa, tambahkan metadata ke tag:

1. Di definisi tag, klik Setelan Lanjutan > Metadata Tag Tambahan.
2. Klik Sertakan Nama Tag agar dicentang.
3. Di Kunci untuk nama tag, masukkan nilai. Contoh ini menggunakan "name" sebagai nilai. Contoh ini akan menyertakan nama tag dalam data peristiwa saat dikirim.
4. Klik +Tambahkan Metadata dan masukkan pasangan Kunci dan Nilai. Contoh ini menggunakan Kunci yang disebut "group" dan Nilai "Campaign 2019".
5. Gunakan +Tambahkan Metadata untuk menambahkan baris pasangan kunci/nilai tambahan, sesuai keinginan.

Pada template kustom, developer dapat mengidentifikasi tag ini dengan memeriksa nilai yang ditetapkan dalam metadata:

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();

Hasilnya adalah URL piksel yang menyerupai yang berikut ini:

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

Jika diinginkan, Anda dapat memantau semua tag untuk grup "Campaign 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();

Tindakan ini akan menghasilkan piksel pemantauan yang mirip dengan berikut ini:

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