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 を使用して、タグの実行時間に関するデータを収集します。このイベントで呼び出されたタグごとに、タグの ID と実行時間を含むクエリ パラメータがピクセル 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();

メタデータ

Monitoring API で提供されるベースデータを基に、便利なダッシュボードを構築できます。ただし、状況によっては、モニタリングの対象を一部のタグのみに限定したい場合もあります。そのような場合は、[追加のタグメタデータ] 欄で任意の Key-Value ペアを指定すると、簡単に目的のタグを識別することができます。指定した値は、イベント コールバックの発生時にイベントデータ オブジェクトに含まれます。

たとえば、新しい広告キャンペーンのコンテナにタグを追加するとします。コンテナには多くの既存のタグがありますが、この新しいタグだけをモニタリングしたい場合があります。

イベント コールバックでこのタグを識別するには、タグにメタデータを追加します。

  1. タグの定義で、[詳細設定] > [追加のタグメタデータ] をクリックします。
  2. [タグ名を含める] をクリックして、オンにします。
  3. [タグ名のキー] に値を入力します。この例では、値として「name」を使用します。これで、送信されるイベントデータにタグ名が含まれます。
  4. [+ メタデータを追加] をクリックして、キーのペアを入力します。この例では、「group」というキーと「Campaign 2019」という値を使用します。
  5. 必要に応じて、[+ メタデータを追加] を使用して、Key-Value ペアの行を追加します。

タグ マネージャーの管理画面のスクリーンショット([追加のタグメタデータ] の場所を示している)

カスタム テンプレートでは、デベロッパーはメタデータに含まれる値のセットを確認して、このタグを識別できます。

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

必要に応じて、「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();

この場合、モニタリング ピクセルは次のようになります。

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