Last updated 2025年4月9日

ダイレクトインテグレーション

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）して識別子として使用することをお勧めします。ハッシュまたは生のメールの代わりに、ファーストネーム＋ラストネーム＋請求郵便番号や携帯電話番号などの他の永続的な識別子を使用することもできます。これらはすべて生またはハッシュ化して統合できます。
7. 関連するデータ属性を追加します。コンテキストデータは、どのキャンペーンやオーディエンスがあなたのビジネスに最も効果的であるかについてRoktに学ばせるのを助けます。これらの学習を利用して、顧客獲得を最適化し、将来のキャンペーンのパフォーマンスを向上させます。推奨される属性は以下の通りです:
- firstname
- lastname
- billingzipcode
- mobile
- conversiontype
- amount
- currency
- quantity
- paymenttype
- margin
- confirmationref

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

統合例

注意

以下のスニペットは、統合の例です。お客様の識別子や統合する追加属性に応じて、統合コードは異なります。

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

生のメールを顧客識別子として選択。
名前、姓、金額、通貨、支払いタイプをデータ属性として選択。

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

  <!-- Part #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コンテンツ -->

  <!-- Part #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ライブラリドキュメントにあります。

確認ページに統合コードを追加します。
1. 統合コードは、通常、コンバージョンイベントに続く確認ページやサンキューページに配置する必要があります。提案されている構造に従って、統合コードを直接ページに貼り付けてください。
2. 統合がサイト上のすべてのコンバージョンを記録することを確認してください。これにより、Rokt はアトリビューションプロセスを処理し、Rokt キャンペーンイベントによってどのコンバージョンが発生したかを判断できます。
  タグマネージャー
  タグマネージャーを使用して、サイトにRokt統合コードを追加することもできますが、一部のコンバージョンイベントが失われるため、パフォーマンスが低下する可能性があります。最良の結果を得るには、このページで説明されている直接統合をお勧めします。
データ属性を入力します。少なくとも永続的な識別子に正しいデータを入力してください。また、データ属性を構成します。
統合が関与しており、正しいデータが含まれていることをテストします。テスト手順を参照してください。

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

Web SDK​

Rokt Web SDKの追加​

統合例​

Web SDK

Rokt Web SDKの追加

統合例