คู่มือนักพัฒนาซอฟต์แวร์ Monitoring API

Monitoring API จะช่วยให้คุณสร้างเครื่องมือเพื่อตรวจสอบลักษณะการทำงานและประสิทธิภาพของแท็กได้ ซึ่งทำผ่านเมธอด API เทมเพลตที่กำหนดเองของ addEventCallback วิธีนี้ช่วยให้คุณระบุโค้ดเรียกกลับของเหตุการณ์ซึ่งจะมีการเรียกใช้เมื่อสิ้นสุดเหตุการณ์ได้ โค้ดเรียกกลับนี้จะได้รับข้อมูลเกี่ยวกับเหตุการณ์ ซึ่งช่วยให้คุณสร้างการติดตั้งใช้งานการตรวจสอบแท็กของคุณเองได้ นอกจากนี้คุณยังเพิ่มข้อมูลเมตาลงในแท็กได้เพื่อให้มีการตรวจสอบที่ละเอียดขึ้น

Monitoring API สามารถรองรับกรณีการใช้งานการตรวจสอบได้หลายแบบ เช่น สถานะแท็ก เวลาดำเนินการ และข้อมูลเมตา เป้าหมายสุดท้ายของพิกเซลการตรวจสอบเหล่านี้คือการส่งข้อมูลไปยังปลายทางที่คุณเลือก จากนั้นคุณจะเข้าถึงบันทึกจากปลายทางนี้เพื่อรวบรวมข้อมูลการตรวจสอบได้ จากนั้นข้อมูลดังกล่าวจะแสดงในหน้าแดชบอร์ดหรือใช้เพื่อทริกเกอร์ระบบการแจ้งเตือน

สถานะแท็ก

เทคนิคสถานะแท็กที่แสดงในตัวอย่างนี้ใช้ addEventCallback เพื่อรวมสถานะการเริ่มทำงานของแท็กในหน้าเว็บ การดำเนินการนี้จะวนซ้ำแท็กทั้งหมดที่เริ่มทำงานสำหรับเหตุการณ์ และนับจำนวนแท็กที่สำเร็จ ล้มเหลว มีข้อผิดพลาด หรือหมดเวลา จากนั้นจึงเพิ่มผลรวมเหล่านี้ลงใน URL พิกเซลการตรวจสอบเป็นพารามิเตอร์การค้นหา พิกเซลการตรวจสอบจะมี URL คล้ายกับด้านล่างนี้

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

URL ของพิกเซลสามารถตั้งค่าโดยใช้ตัวอย่างโค้ดต่อไปนี้

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

เวลาดำเนินการ

เทคนิคนี้ใช้ addEventCallback เพื่อช่วยคุณรวบรวมข้อมูลเกี่ยวกับเวลาการเรียกใช้แท็ก สำหรับทุกแท็กที่เริ่มทำงานสำหรับเหตุการณ์นี้ ระบบจะเพิ่มพารามิเตอร์การค้นหาลงใน URL พิกเซลซึ่งมีรหัสของแท็กและเวลาที่ดำเนินการ ซึ่งจะส่งพิกเซลที่มีลักษณะดังนี้

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

URL ของพิกเซลสามารถตั้งค่าโดยใช้ตัวอย่างโค้ดต่อไปนี้

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

คุณสร้างหน้าแดชบอร์ดที่มีประโยชน์ได้โดยใช้ข้อมูลฐานที่ Monitoring API มีให้ อย่างไรก็ตาม ในบางกรณีคุณอาจต้องการตรวจสอบเฉพาะบางส่วนของแท็ก เพื่ออำนวยความสะดวก ให้ใช้ส่วนข้อมูลเมตาของแท็กเพื่อระบุคู่คีย์-ค่าที่กำหนดเองในคำจำกัดความแท็ก ค่าเหล่านี้จะรวมอยู่ในออบเจ็กต์ข้อมูลเหตุการณ์เมื่อเกิดการเรียกกลับของเหตุการณ์

เช่น มีการเพิ่มแท็กในคอนเทนเนอร์สำหรับแคมเปญโฆษณาใหม่ คอนเทนเนอร์มีแท็กอยู่หลายรายการ แต่คุณเพียงต้องการตรวจสอบแท็กใหม่นี้เท่านั้น

หากต้องการระบุแท็กนี้จากโค้ดเรียกกลับของเหตุการณ์ ให้เพิ่มข้อมูลเมตาลงในแท็ก ดังนี้

1. ในคําจํากัดความของแท็ก ให้คลิกการตั้งค่าขั้นสูง > ข้อมูลเมตาแท็กเพิ่มเติม
2. คลิกรวมชื่อแท็กเพื่อให้ระบบเลือกไว้
3. ป้อนค่าในคีย์สำหรับชื่อแท็ก ตัวอย่างนี้ใช้ "name" เป็นค่า ซึ่งจะรวมชื่อแท็กในข้อมูลเหตุการณ์ที่ส่งไป
4. คลิก +เพิ่มข้อมูลเมตา แล้วป้อนคู่คีย์และค่า ตัวอย่างนี้ใช้คีย์ชื่อ "group" และค่าของ "Campaign 2019"
5. ใช้ +เพิ่มข้อมูลเมตาเพื่อเพิ่มแถวของคู่คีย์/ค่าอื่นๆ ตามต้องการ

ในเทมเพลตที่กำหนดเอง นักพัฒนาซอฟต์แวร์ระบุแท็กนี้ได้โดยตรวจสอบค่าที่กำหนดไว้ในข้อมูลเมตา ดังนี้

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

ซึ่งจะทําให้ URL ของพิกเซลมีลักษณะคล้ายกับตัวอย่างต่อไปนี้

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

คุณตรวจสอบแท็กทั้งหมดของกลุ่ม "แคมเปญ 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();

ซึ่งจะส่งผลให้พิกเซลการตรวจสอบมีลักษณะดังนี้

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