Last updated 2025年3月6日

直接統合

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 生Email
  emailsha256 ハッシュ化（SHA-256）されたEmail
  passbackconversiontrackingid Rokt ID
  識別子として生またはハッシュ化（SHA-256）された顧客のEmailを使用することをお勧めします。ハッシュ化または生のEmailの代替として、識別子としてRokt IDを使用できます。この方法は開発チームの作業が多くなりますが、個人を特定できる情報を必要としません。
7. 関連するデータ属性を追加します。コンテキストデータは、Roktがどのキャンペーンやオーディエンスがあなたのビジネスに最も効果的かを学習するのに役立ちます。これらの知識を使用し、将来のキャンペーンのパフォーマンスを向上させるために最適化します。お勧めの属性は以下です：
- firstname
- lastname
- conversiontype
- amount
- currency
- quantity
- paymenttype
- margin
- confirmationref

属性名	属性説明
`email`	生Email
`emailsha256`	ハッシュ化（SHA-256）されたEmail
`passbackconversiontrackingid`	Rokt 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ライブラリのドキュメントにあります。 2. 確認ページに統合コードを追加します。

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

最適なパフォーマンスを得るために、イベントAPIとWeb SDKの両方を統合することをお勧めします。どちらの方法も使用することで、冗長性を作り出し、ブラウザやサーバーで発生する可能性のある異常を特定するのに役立ちます。

Web SDK​

Rokt Web SDKを追加する​

統合例​

Web SDK

Rokt Web SDKを追加する

統合例