直接統合

Web SDK

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

Rokt Web SDKを追加する

始める前に、RoktアカウントIDを確認してください。アカウントIDの確認方法については、こちらをご覧ください。

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) メール
passbackconversiontrackingid Rokt Click ID

顧客のメールアドレスを生またはハッシュ化 (SHA-256) して識別子として使用することを推奨します。ハッシュ化または生のメールの代替として、名 + 姓 + 請求先郵便番号や携帯電話番号などの他の永続的な識別子を使用することもできます。これらはすべて生またはハッシュ化して統合できます。
1. 関連するデータ属性を追加します。コンテキストデータは、Roktがあなたのビジネスに最も効果的なキャンペーンやオーディエンスについて学ぶのに役立ちます。これらの学びを活用して、獲得を最適化し、将来のキャンペーンのパフォーマンスを向上させます。推奨する属性は以下の通りです：
- firstname
- lastname
- billingzipcode
- mobile
- conversiontype
- amount
- currency
- quantity
- paymenttype
- margin
- confirmationref

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

統合例

注意

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

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

顧客識別子としての生のメールアドレス
データ属性としての名前、姓、金額、通貨、および支払いタイプ

<!DOCTYPE html>
<html lang="en">
<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 ライブラリのドキュメントにあります。

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

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

Web SDK​

Rokt Web SDKを追加する​

統合例​

Web SDK

Rokt Web SDKを追加する

統合例