ウェブ実験を実施する

Web 実験には、ウェブサイトに追加するスタンドアロンのスクリプトが必要です。スクリプトをサイトの<head>要素に貼り付けます。ちらつきを避けるため、できるだけ高い位置に貼り付けてください。

このスクリプトは、サイトにすでにインストールされているブラウザ SDK またはサードパーティのアナリティクス SDK を使用してインプレッション イベントを追跡します。

実験スクリプトを追加する

お使いのリージョンに対応する以下の同期スクリプトのいずれかで、API_KEYをプロジェクトのAPIキーに置き換えてください。

<script src="https://cdn.amplitude.com/script/API_KEY.experiment.js"></script>

Content-Security-Policy: script-src *.amplitude.com unsafe-inline;

アンチフリッカースニペットを使用した非同期スクリプト

上記の同期スクリプトは、ユーザーにとって最高の体験を提供します。 スクリプトを非同期にロードするには、次のアンチフリッカー スニペットを含めます。 このスニペットは、Amplitudeがすべての変更を適用するまでページ上の要素をマスクします。 API_KEYをプロジェクトのAPIキーに置き換え、アンチフリッカーマスクがクリアされるタイミングを制御するためにタイムアウトを設定してください。

<script>
  (function (d, h) {
    // TODO: Replace API_KEY with your API key.
    var apiKey = "API_KEY";
    // TODO: Set a timeout in milliseconds for the anti-flicker.
    var timeout = 1000;
    // Hides the page and loads the script. Shows page if script fails to load,
    // otherwise the script shows the page.
    var id = "amp-exp-css";
    try {
      if (!d.getElementById(id)) {
        var st = d.createElement("style");
        st.id = id;
        st.innerText =
          "* { visibility: hidden !important; background-image: none !important; }";
        h.appendChild(st);
        window.setTimeout(function () {
          st.remove();
        }, timeout);
        var sc = d.createElement("script");
        sc.src =
          "https://cdn.amplitude.com/script/" + apiKey + ".experiment.js";
        sc.async = true;
        sc.onerror = function () {
          st.remove();
        };
        h.insertBefore(sc, d.currentScript || h.lastChild);
      }
    } catch (e) {
      console.error(e);
    }
  })(document, document.head);
</script>

サードパーティのカスタマーデータプラットフォームとの統合

イベントを送信するためにAmplitude以外のカスタマーデータプラットフォーム（CDP）を使用している場合は、ユーザーID情報を提供し、イベントを追跡するための連携を設定してください。連携がない場合、このスクリプトはAmplitude Browser SDKが同じサイトにインストールされていることを前提としています。

ウェブ実験スクリプトは、スクリプトURL内のintegrationクエリパラメータを通じて、一般的なCDP統合をサポートしています。

Segment 連携

Web 実験はデフォルトで Segment をサポートしています。スクリプトURLにクエリパラメータとしてintegration=segmentを追加します。例えば、Amplitudeの米国リージョンでは次のようになります。

<!-- Replace API_KEY with your project's API key -->
<script src="https://cdn.amplitude.com/script/API_KEY.experiment.js?integration=segment"></script>

Tealiumとの連携

Tealium iQまたはTealium AudienceStream & Universal Data Hubを使用してTealium経由でイベントを送信する場合、連携を設定する必要はありません。TealiumはAmplitude アナリティクスのSDKをサイトにロードし、このSDKはウェブ実験スクリプトと直接統合されます。

カスタム統合

IntegrationPluginインターフェイスを実装し、カスタム連携を追加するためにexperimentIntegrationwindow変数を設定します。プラグインスクリプトを「Web実験」スクリプトタグの前に配置します。

• getUser(): object：実験ユーザーオブジェクトを返します。
• track(): boolean: サードパーティを通じてイベントを追跡します。 追跡に成功した場合にtrueを返します。falseが返されると、Amplitudeはイベントを永続化し、一定の間隔で再試行を行います。
• setup(): Promise<void>: (オプション) 連携を非同期にセットアップします。連携がgetUser()からユーザー情報を返せる状態になったときに解決されるPromiseを返します。

<script>
  window.experimentIntegration = {
    getUser: () => {
      // TODO: Return user
      return {
        user_id: "user",
        device_id: "device",
      };
    },
    track: (e) => {
      // TODO: Track event
      analytics.track(e.eventType, e.eventProperties);
      return true;
    },
  };
</script>
// TODO: Add the Web Experiment script tag

お客様のCDPのカスタム連携に関するサポートについては、サポートまでお問い合わせください。

コンテンツ管理システム

Amplitude Web 実験は、カスタムスクリプトをサポートするあらゆるコンテンツ管理システム（CMS）をサポートしています。AmplitudeはWordpressとShopify用のプラグインを提供しています。

WordPress

AmplitudeのWordpressプラグインは、Amplitude アナリティクス、実験、セッションリプレイを有効にします。

Shopify

AmplitudeのShopifyアプリは、ShopifyサイトでAmplitude アナリティクス、実験、セッションリプレイを有効にします。

タグマネージャー

Google Tag Managerなどのタグマネージャーは、スクリプトを非同期にロードするため、フリッカーが発生します。タグマネージャーを使用すると、Web実験スクリプトをページに直接追加する作業中に、ビジュアルエディタを使用してバリアントを作成できるようになります。Amplitudeは、本番環境でのタグマネージャの使用を推奨していません。

Googleタグマネージャー（GTM）

カスタムHTMLタグを使用して、GTM経由でスクリプトを追加してください。