Interfejs Monitoring API umożliwia tworzenie narzędzi do monitorowania zachowania i skuteczności tagów. Można to zrobić za pomocą metody addEventCallback Custom Template API. Ta metoda pozwala określić wywołanie zwrotne zdarzenia, które będzie wywoływane na końcu zdarzenia. Będzie ono otrzymywać informacje o zdarzeniu, co umożliwi Ci utworzenie własnych implementacji monitorowania tagów. Aby zwiększyć szczegółowość, możesz też dodać do tagów metadane.
Interfejs Monitoring API obsługuje kilka przypadków użycia związanych z monitorowaniem, takich jak stan tagu, czasy wykonywania i metadane. Zadaniem tych pikseli monitorowania jest wysyłanie danych do wybranego przez Ciebie punktu końcowego. Logi z tego punktu końcowego można następnie uzyskiwać w celu zbierania danych monitorowania. Dane te można następnie wyświetlać w panelu lub używać do aktywowania systemu alertów.
Stan tagu
W tym przykładzie metoda stanu tagu korzysta z metody addEventCallback, by zliczać stan uruchamiania tagów na stronie. Spowoduje to zapętlenie wszystkich tagów, które uruchomiły się w związku z danym zdarzeniem, oraz zliczenie tagów, które zakończyły się powodzeniem, niepowodzeniem, zgłoszeniem wyjątku lub przekroczeniem limitu czasu. Są one następnie dodawane do adresu URL piksela monitorowania jako parametry zapytania. Piksel monitorowania będzie miał adres URL podobny do tego:
https://www.example.com/monitoring?ctid=GTM-XXXXXX&success=4&failure=1&exception=1&timeout=0
Adres URL piksela możesz skonfigurować, korzystając z tego przykładowego kodu:
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();
Czasy wykonywania
Ta metoda korzysta z parametru addEventCallback, aby ułatwić Ci zbieranie danych o czasie wykonania tagów. W przypadku każdego tagu, który został uruchomiony dla tego zdarzenia, do adresu URL piksela dodawany jest parametr zapytania zawierający identyfikator tagu i czas wykonania. Spowoduje to wysłanie piksela podobnego do tego:
https://www.example.com/monitoring?ctid=GTM-XXXXXX&tag12=1200&tag50=400&tag1=6000
Adres URL piksela możesz skonfigurować, korzystając z tego przykładowego kodu:
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();
Metadane
Korzystając z danych dostarczanych przez interfejs Monitoring API, możesz tworzyć przydatne panele. Może się jednak zdarzyć, że zechcesz monitorować tylko część tagów. Aby ułatwić sobie to, w sekcji Metadane tagu możesz określić dowolne pary klucz-wartość w definicji tagu. Wartości te zostaną uwzględnione w obiekcie danych zdarzenia po wywołaniu wywołania zwrotnego zdarzenia.
Przykład: tag jest dodawany do kontenera nowej kampanii reklamowej. Kontener ma wiele dotychczasowych tagów, ale chcesz monitorować tylko ten nowy tag.
Aby zidentyfikować ten tag w wywołaniu zwrotnym zdarzenia, dodaj do niego metadane:
- W definicji tagu kliknij Ustawienia zaawansowane > Dodatkowe metadane tagu.
- Kliknij Dołącz nazwę tagu, aby ta opcja była zaznaczona.
- W polu Klucz nazwy tagu wpisz wartość. W tym przykładzie jako wartości użyto elementu „name”. Spowoduje to uwzględnienie nazwy tagu w wysyłanych danych zdarzenia.
- Kliknij +Dodaj metadane i wpisz parę Klucz i Wartość. W tym przykładzie używamy klucza o nazwie „grupa” i wartości „Kampania 2019”.
- Aby w razie potrzeby dodać kolejne wiersze par klucz-wartość, kliknij +Dodaj metadane.
W szablonie niestandardowym deweloper może zidentyfikować ten tag, sprawdzając wartości ustawione w metadanych:
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();
W rezultacie otrzymasz adres URL piksela podobny do tego:
https://www.example.com/monitoring/campaignPixel?ctid=GTM-XXXXXX&status=success
W razie potrzeby możesz monitorować wszystkie tagi w grupie „Kampania 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();
Da to piksel monitorowania podobny do tego:
https://www.example.com/monitoring/campaign2019?ctid=GTM-XXXXXX&Conversion%20Pixel%202019=failure