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

ダイレクト統合

Web SDK​

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

Rokt Web SDKの追加​

始める前に、Roktのアカウント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

統合の例​

注意

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

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

  • 顧客識別子として生のメールアドレスを選択しました。
  • コンテキスト属性として、名前、姓、金額、通貨、および支払い方法を選択しました。
<script type="module">
  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";
  target.appendChild(script);
  await new Promise((resolve) =>
    window.Rokt
      ? resolve()
      : document
          .getElementById("rokt-launcher")
          .addEventListener("load", () => resolve())
  );

  const launcher = await window.Rokt.createLauncher({
    accountId: "roktAccountId",
  });

  await launcher.selectPlacements({
    attributes: {
      /// お客様は生のメールアドレスを統合しました。統合を設定する際には、この値を選んだお客様識別子に変更してください。
      email: "john.smith@gmail.com",
      /// お客様は以下の追加属性を選択しました。統合を設定する際には、これらの値を統合する追加属性に変更してください。
      firstname: "",
      lastname: "",
      amount: "",
      currency: "",
      paymenttype: "",
  });
</script>

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

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

    1. 変換イベントの直後に表示されるページ（通常は確認またはお礼のページ）に統合コードを配置する必要があります。統合コードをHTMLの<head></head>タグの間に直接貼り付けます。

    2. サイト上のすべての変換を統合が記録するようにしてください。Roktは、Roktキャンペーンイベントからどの変換が生じたかを判断するための帰属プロセスを処理します。

      タグマネージャ

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

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

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

  3. 統合が適切なデータを含んでいるかどうかをテストしてください。テストの手順を参照してください。

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

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