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 ペアを指定すると、簡単に目的のタグを識別することができます。指定した値は、イベントコールバックの発生時にイベントデータオブジェクトに含まれます。

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

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

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

Monitoring API デベロッパー ガイド

タグ ステータス

実行時間

メタデータ

Monitoring API デベロッパーガイド

タグステータス