Last updated 2024年12月5日

直接統合

Web SDK

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

Rokt Web SDKを追加する

始める前に、あなたのRoktアカウントIDを持っていることを確認してください。あなたのIDを見つけるには、こちらの指示をご覧ください。

Roktアカウントマネージャーからユニークな統合コードを取得するか、自分でmy.rokt.comで生成してください。
1. my.rokt.comにログインします。
2. あなたのアカウントをクリックします。
3. 統合をクリックします。
4. スニペットを設定するをクリックします。
5. コンバージョンを記録を選択します。
6. Roktがキャンペーンイベントをコンバージョンに正しくマッチさせるための顧客識別子を選択します。以下の識別子をサポートしています：
  属性名 属性の説明
  email 生のメール
  emailsha256 ハッシュ化された（SHA-256）メール
  passbackconversiontrackingid Rokt ID
  生のまたはハッシュ化された（SHA-256）顧客メールアドレスを識別子として使用することをお勧めします。ハッシュ化されたまたは生のメールの代わりに、Rokt IDを識別子として使用できます。この方法は開発チームの作業が増えますが、個人を特定できる情報は必要ありません。
7. 関連データ属性を追加します。コンテクスチュアルデータは、Roktがあなたのビジネスにとって最も効果的なキャンペーンとオーディエンスをより深く理解するのに役立ちます。私たちはこれらの学びを活用して獲得を最適化し、将来的にあなたのキャンペーンがより良く機能するようにします。おすすめする属性は以下の通りです：
- firstname
- lastname
- conversiontype
- amount
- currency
- quantity
- paymenttype
- margin
- confirmationref

属性名	属性の説明
`email`	生のメール
`emailsha256`	ハッシュ化された（SHA-256）メール
`passbackconversiontrackingid`	Rokt ID

統合例

注意

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

以下は、ユーザーが選択した統合の例です。

顧客識別子として生のメールを使用しています。
データ属性として名前、姓、金額、通貨、および支払いタイプを使用しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- メタタグ -->

  <!-- パート #1 - 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>

  <!-- その他のスクリプトとメタタグ -->
</head>
<body>
  <!-- ここにあなたの HTML コンテンツを追加 -->

  <!-- パート #2 - データ属性が利用可能になるとすぐに、以下のスクリプトを実行して Rokt プレースメントを表示します -->
  <script type="module">
     await window.RoktLauncherScriptPromise;

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

     await launcher.selectPlacements({
        attributes: {
           // 顧客識別子 - 少なくとも1つが必要
           email: "john.smith@gmail.com",
           emailsha256: "",
           passbackconversiontrackingid: "",
           firstname: "",
           lastname: "",
           conversiontype: "",
           billingzipcode: "",
           amount: "",
           mobile: "",
           currency: "",
           quantity: "",
           paymenttype: "",
           margin: "",
           confirmationref: "",
        },
     });
  </script>

  <!-- ここにあなたの HTML コンテンツを追加 -->
</body>
</html>

コード例のさまざまな部分の説明は、Web SDK Library documentation で見ることができます。

確認ページに統合コードを追加します。
1. あなたは、コンバージョンイベントに直後に続く任意のページ、通常は確認ページやお礼ページに統合コードを配置する必要があります。推奨される構造に従って、ページに直接統合コードを貼り付けてください。
2. 統合があなたのサイト内のすべてのコンバージョンを記録することを確認してください。Roktは、その後、Roktキャンペーンイベントからどのコンバージョンが発生したかを特定するためのアトリビューションプロセスを処理します。
  タグマネージャー
  あなたは、タグマネージャーを使用してRoktの統合コードをサイトに追加できますが、いくつかのコンバージョンイベントがドロップされるため、パフォーマンスが低下する可能性があります。最良の結果を得るために、こちらのページで説明されている直接統合を推奨します。
データ属性を設定します。少なくとも顧客識別子（メールアドレスまたはRokt ID）が正しいデータで設定されていることを確認してください。また、任意のデータ属性も設定してください。
1. ハッシュ化されたメールアドレスを識別子として使用したい場合、Roktの事前構築されたハッシング機能を使用できます。詳細情報は、二段階データ統合ページを参照してください。
統合がエンゲージメントを持ち、正しいデータを含んでいることをテストします。テスト手順を参照してください。

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

Web SDK​

Rokt Web SDKを追加する​

統合例​

Web SDK

Rokt Web SDKを追加する

統合例