メインコンテンツまでスキップ

直接統合

Web SDK​

Rokt Web SDK は、ウェブサイトのフロントエンドから自動的にコンバージョンを報告できるJavaScriptライブラリです。

Rokt Web SDKを追加する​

始める前に、RoktアカウントIDを確認してください。自分のIDを見つけるには、こちらの手順を参照してください。

  1. Roktアカウントマネージャーからユニークな統合コードを取得するか、my.rokt.comで自分で生成します。

    1. my.rokt.comにログインします。

    2. アカウントをクリックします。

    3. Integrationsをクリックします。

    4. Set up the Snippetをクリックします。

    5. Record conversionsを選択します。

    6. Roktがキャンペーンイベントをコンバージョンに正しくマッチングできるように、顧客識別子を選択します。以下をサポートしています：

      属性名属性の説明
      email生のメールアドレス
      emailsha256ハッシュ化された（SHA-256）メールアドレス
      passbackconversiontrackingidRokt ID

      顧客識別子として生のメールアドレスまたはハッシュ化された（SHA-256）メールアドレスを使用することをお勧めします。ハッシュ化されたメールや生のメールの代わりに、識別子としてRokt IDを使用することもできます。この方法は開発チームの作業が増えますが、個人を特定できる情報は必要ありません。

    7. 関連するコンテキスト属性を追加します。コンテキストデータは、Roktがあなたのビジネスに最も効果的なキャンペーンやオーディエンスについて学ぶのに役立ちます。これらの学習を使用して、獲得を最適化し、将来のキャンペーンのパフォーマンスを向上させます。推奨される属性は以下の通りです：

    • firstname
    • lastname
    • conversiontype
    • amount
    • currency
    • quantity
    • paymenttype
    • margin
    • confirmationref

統合例​

注意

以下のスニペットは統合の例です。統合コードは、顧客識別子および統合することに決めた追加属性に基づいて異なります。

以下は、ユーザーが次の項目を選択した統合の例です：

  • 顧客識別子としての生のメールアドレス。
  • 文脈属性としての名前、姓、金額、通貨、および支払いタイプ。
<!DOCTYPE html>
<html lang="en">
<head>
   <!-- Meta tags -->

   <!-- Part #1 - Load the Web SDK -->
   <script type="module">
      window.RoktLauncherScriptPromise = new Promise((resolve, reject) => {
         const target = document.head || document.body;
         const script = document.createElement("script");
         script.type = "text/javascript";
         script.src = "https://apps.rokt.com/wsdk/integrations/launcher.js";
         script.fetchpriority = "high";
         script.crossOrigin = "anonymous";
         script.async = true;
         script.id = "rokt-launcher";

         script.addEventListener('load', () => resolve());
         script.addEventListener('error', (error) => reject(error));

         target.appendChild(script);
      });
   </script>

   <!-- Other scripts and meta tags -->
</head>
<body>
<!-- Your HTML content here -->

<!-- Part #2 - As soon as the data attributes are available, execute the below script to display a Rokt placement -->
<script type="module">
   await window.RoktLauncherScriptPromise;

   const launcher = await window.Rokt.createLauncher({
      accountId: "rokt-account-id",
      sandbox: true,
   });

   await launcher.selectPlacements({
      attributes: {
         //customer identifier - at least one required
         email: "john.smith@gmail.com",
         emailsha256: "",
         passbackconversiontrackingid: "",
         firstname: "",
         lastname: "",
         conversiontype: "",
         billingzipcode: "",
         amount: "",
         mobile: "",
         currency: "",
         quantity: "",
         paymenttype: "",
         margin: "",
         confirmationref: "",
      },
   });
</script>

<!-- Your HTML content here -->
</body>
</html>

コード例の各部分の説明はWeb SDK ライブラリのドキュメントにあります。

  1. 統合コードを確認ページに追加します。

    1. コンバージョンイベントに続くページ、通常は確認ページやサンクスページに、統合コードを配置してください。提案された構造に従って、統合コードをページに直接貼り付けてください。

    2. 統合がサイト上のすべてのコンバージョンを記録することを確認してください。これにより、RoktはRoktキャンペーンイベントから生じたコンバージョンを特定するためのアトリビューションプロセスを処理できます。

      タグマネージャー

      タグマネージャーを使用してRokt統合コードをサイトに追加することもできますが、一部のコンバージョンイベントがドロップされるため、パフォーマンスが低下する可能性があります。最良の結果を得るためには、このページで説明されている直接統合をお勧めします。

  2. データ属性を入力します。顧客識別子（メールアドレスまたはRokt ID）が正しいデータで入力されていることを確認します。また、コンテキスト属性も設定します。

    1. 識別子としてハッシュ化されたメールアドレスを使用する場合は、Roktの事前構築されたハッシュ関数を使用できます。詳細はTwo Step Data Integration pageをご覧ください。

  3. 統合が効果的で正しいデータを含んでいることをテストします。testing instructionsをご覧ください。

最適なパフォーマンスを得るために、Event APIとWeb SDKの両方を統合することを検討してください。両方の方法を使用することで冗長性が生まれ、ブラウザやサーバーで発生する可能性のある異常を特定するのに役立ちます。

この記事は役に立ちましたか？