ゾーニングインサイトの計測

ゾーニングインサイトは、Amplitudeの自動キャプチャを基盤に動作します。Browser SDK、Google Tag Manager、Tealium iQ、または Segmentを通じて収集されるクリック、露出、スクロールイベントが対象です。1 つの方法を選択してください。 いずれも同じ自動キャプチャイベントを取得するため、計測の実装は一度だけで済みます。

ブラウザSDK

インストルメンテーションを最も直接的に実装するには、Browser SDKを使用してください。ゾーニングインサイトを使用するには、ブラウザSDKバージョン2.39.0以降が必要です。

SDKをインストールする

npm i @amplitude/analytics-browser@2.39.0

自動キャプチャを設定する

SDKをインストールした後、自動キャプチャを有効にしてAmplitudeを初期化します。 これにより、ゾーンインサイトに必要な2つの設定が構成されます。ページビューを追跡するpageViewsとクリックと要素の表示状態を追跡するelementInteractionsです。

import * as amplitude from '@amplitude/analytics-browser';
const AMPLITUDE_API_KEY = '<API_KEY>'; // replace with your project API key
const options = {
  autocapture: {
    pageViews: true,
    elementInteractions: {
      viewportContentUpdated: true,
  },
  frustrationInteractions: true,
},
}};
amplitude.init(AMPLITUDE_API_KEY, options);

高度な機能: 露出トラッキングを微調整

より多くの制御を行うには、オブジェクトをelementInteractionsに渡してviewportContentUpdatedを直接設定してください。たとえば、要素が露出とみなされるまでに表示される必要時間を制御するには、exposureDurationを設定します（デフォルト：150ミリ秒）。

import * as amplitude from '@amplitude/analytics-browser';
const AMPLITUDE_API_KEY = '<API_KEY>';
const options = {
  autocapture: {
    pageViews: true,
    elementInteractions: {
      viewportContentUpdated: {
        enabled: true,
        exposureDuration: 150,
      },
    },
  },
};
amplitude.init(AMPLITUDE_API_KEY, options);

APIキーを見つける

Amplitudeで、設定 → プロジェクト → [プロジェクト] → 一般 → APIキーに移動します。<API_KEY>をプロジェクトのAPIキーに置き換えます。

Googleタグマネージャー

GTMテンプレートギャラリーにある公式AmplitudeテンプレートまたはカスタムHTMLタグを使用してください。どちらのアプローチもSDKをロードし、ゾーニングインサイト用の自動キャプチャを有効にします。

オプションA：Amplitude GTM公式テンプレート（推奨）

Amplitude GTM公式テンプレートは、すべてのSDK設定に対してフォームベースのUIを提供します。 任意のコードを編集する必要はありません。

ステップ1: テンプレートを追加する

1. GTM ワークスペースで、ワークスペース → テンプレート → 検索ギャラリー に移動します。
2. 「Amplitude」を検索し、「Amplitude アナリティクス Browser SDK」を選択します。
3. [ワークスペースに追加] をクリックし、アクセス権を受け入れます。

ステップ 2: 初期化タグを作成する

1. タグ → 新規に移動し、Amplitudeテンプレートを選択します。
2. タグタイプをInitializeに設定します。 このタグは、他のすべてのAmplitudeタグよりも先に起動する必要があります。
3. Amplitude APIキーを入力します。
4. イベントの自動キャプチャの下で、ページビューと要素のインタラクションが有効になっていることを確認します。
5. トリガをすべてのページ — 初期化またはすべてのページ — DOM準備完了に設定します。

ステップ 3: プレビューと公開

GTMのプレビューモードを使用して、すべてのページでinitタグが配信されていることを確認してください。ブラウザーのネットワークタブでapi2.amplitude.comへのリクエストを確認し、[Amplitude] Viewport Content Updatedイベントが表示されることを確認します。確認したら、コンテナを公開します。

オプションB:カスタムHTMLタグ

単一サイトをより迅速にセットアップするには、カスタムHTMLタグを使用してください。タグ → 新規 → カスタムHTMLに移動し、下のスニペットを貼り付け、トリガーをすべてのページ、DOM準備完了に設定します。

<!-- GTM → Tags → New → Custom HTML -->
<!-- Trigger: All Pages, DOM Ready -->
<script src="https://cdn.amplitude.com/libs/analytics-browser-2.39.0-min.js.gz"></script>
<script>
  window.amplitude.init('YOUR_API_KEY', {
    autocapture: {
      pageViews: true,
      elementInteractions: true,
    },
  });
</script>

コンテンツセキュリティポリシー

サイトでCSPヘッダーを使用している場合は、script-srcにcdn.amplitude.comを、connect-srcにapi2.amplitude.comを追加します。

Tealium iQ

Tealium iQのJavaScript拡張機能を使用して、自動キャプチャを有効にした状態でAmplitude SDKをロードします。

JavaScript 拡張機能を作成する

1. Tealium iQで、拡張機能を追加 → 拡張を追加 → JavaScriptコードに移動します。
2. 範囲を読み込み前のルールに設定し、条件をすべてのページに設定します。
3. 以下のコードを貼り付けます。
4. YOUR_API_KEYを、AmplitudeプロジェクトのAPIキーに置き換えてください。

// Tealium iQ → Extensions → JavaScript Code
// Scope: Before Load Rules | Condition: All Pages
(function() {
  var s = document.createElement('script');
  s.src = 'https://cdn.amplitude.com/libs/analytics-browser-2.39.0-min.js.gz';
  s.async = false;
  s.onload = function() {
    if (!window.amplitude) return;
    window.amplitude.init('YOUR_API_KEY', {
      autocapture: {
        pageViews: true,
        elementInteractions: true,
      },
    });
  };
  document.head.appendChild(s);
})();

5. TealiumのQAモードを使用して、すべてのページで拡張機能が起動していることを確認し、プロファイルを公開してください。

Tealium EventStreamと並行して実行する

Tealiumのサーバー側Amplitudeコネクタをこのクライアント側の拡張機能と並行して実行できます。 EventStreamはサーバー側のビジネスイベントを処理し、拡張機能はゾーニングインサイトの自動キャプチャを処理します。どちらも同じAPIキーを使用して同じAmplitudeプロジェクトに書き込みます。

セグメント

Segmentと一緒にAmplitude Browser SDKをロードします。 ゾーニングインサイトを使用するには、クライアント側で実行されている SDK が必要です。 セグメントのサーバー側Amplitudeの送信先だけでは不十分です。

両方のSDKを並行してロードします。Amplitudeはゾーニングインサイトの自動キャプチャを処理し、Segmentは既存のカスタムイベントパイプラインを処理します。この2つのSDKは競合しません。

import * as amplitude from '@amplitude/analytics-browser';
import { AnalyticsBrowser } from '@segment/analytics-next';
// Amplitude: handles Zoning Insights autocapture
amplitude.init('YOUR_AMPLITUDE_API_KEY', {
  autocapture: {
    pageViews: true,
    elementInteractions: true,
  },
});
// Segment: your existing event pipeline
const analytics = AnalyticsBrowser.load({
  writeKey: 'YOUR_SEGMENT_WRITE_KEY',
});
// Keep user identity in sync
function identify(userId, traits = {}) {
  analytics.identify(userId, traits);
  amplitude.setUserId(userId);
  const evt = new amplitude.Identify();
  Object.entries(traits).forEach(([k, v]) => evt.set(k, v));
  amplitude.identify(evt);
}

設定を確認する

上記の任意のメソッドを設定した後、自動キャプチャイベントがAmplitudeプロジェクトに流れていることを確認してください。

オプションA：イベントセグメンテーションチャート

Amplitudeでは、データを送信したプロジェクトについてイベントセグメンテーションチャートを作成します。 イベントを検索します。

[Amplitude] Viewport Content Updated

データが表示された場合、自動キャプチャは正常に機能しており、Zoning Insightsはメトリックの計算を開始できます。

オプションB：Amplitude Chrome拡張機能

Amplitude Chrome拡張機能をインストールし、インストルメント済みのサイトに移動します。この拡張機能は、リアルタイムで追跡されているイベントを表示します。 スクロールしてクリックすると表示される[Amplitude] Viewport Content Updatedおよび[Amplitude] Element Clickedイベントを探します。

注目のポイント

プロジェクトに流入する[Amplitude] Viewport Content Updatedイベントを確認すると、ゾーニングインサイトは必要なデータを取得できます。ゾーンには、クリック率、露出率、スクロールリーチ、レイジクリック率などの指標が入力され始めます。