Last updated 2024年12月5日

SiteMonetization

Roktプレースメントをあなたのサイトに追加することは、Rokt Ecommerceパートナーにとっての最初のステップです。プレースメントは、さまざまなタイプのRoktキャンペーンを表示するために使用される柔軟なiframeです。

あなたのウェブサイトにプレースメントを設定するには、Web SDK（以下の手順）を使用することができます。Roktはまた、ネイティブなAndroid、iOS、React Native、およびFlutterアプリケーションにプレースメントを設定するためのさまざまなモバイルSDKも提供しています。

Shopify店舗は、Rokt Ecommerceアプリを使用することで、数秒でRoktプレースメントを設定できます — コーディングは必要ありません！

シングルページアプリケーション

このガイドは、マルチページアプリケーションとして構築されたウェブサイトを対象としています。あなたのサイトがシングルページアプリケーションである場合は、これらの指示に従ってください。

1. ページにRoktをロードする

あなたのアカウントマネージャーが統合コードを提供するか、my.rokt.comで見つけることができます。

統合コードには、カスタマー識別子（生のメールカスタマーアドレスを推奨）とデータ属性が含まれています。Roktが個人識別子とデータ属性を要求する理由について詳しく読む。

統合コードのサンプル

Roktとの統合の最初のステップは、Web SDKをサイトにロードすることです。ベストなパフォーマンスを得るために、以下の構造を使用してRoktスクリプトをロードすることをお勧めします。

Google Tag Manager

Google Tag Managerを使用している場合は、document.writeフィールドがチェックされていることを確認し、推奨される実装ステップを参照してください。

注意

以下の例をコピーする場合は、rokt-account-idがアカウントのユニークIDに置き換わっていることを確認してください。Rokt IDはどこにありますか？を参照して指示を確認してください。

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Meta tags -->

  <!-- Part #1 - Load the 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>

  <!-- Other scripts and meta tags -->
</head>
<body>
  <!-- Your HTML content here -->

  <!-- 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: {
              email: "",
              firstname: "",
              lastname: "",
              confirmationref: "",
              billingzipcode: "",
              amount: "",
              paymenttype: "",
              ccbin: "",
              mobile: "",
              country: "",
              language: "",
              currency: "",
              billingaddress1: "",
              billingaddress2: "",
              age: "",
              gender: "",
              cartItems: JSON.stringify(cartItems),
          },
      });
  </script>

  <!-- Your HTML content here -->
</body>
</html>

最適なパフォーマンスを得るためには、Web SDK を早期に (例: <head></head> 内) 統合し、データ属性を統合できるようになった時点で selectPlacements 呼び出しを有効にします。

上記の例では、sandbox: true を使用して、サンドボックス環境で統合をテストしています。本番環境で運用する準備が整ったら、sandbox: false に設定するか、完全に削除します。

ページに Web SDK を追加する際は、データ属性を必ず統合してください。そうすることで、お客様にとって最も関連性の高いメッセージを提供できます。通常、これは顧客データとトランザクションデータの両方の組み合わせです。最適な属性の統合については、ビジネスの運営における垂直市場によりアカウントマネージャーがガイドします。

注記

Rokt はベストプラクティスとして直接統合を推奨していますが、タグマネージャーでの統合のオプションも利用可能です。

2. ページと配置の設定

RoktチームがOne Platformで関連するページと配置を設定します。ブランドガイドラインやUXのニーズに合わせて、配置をカスタマイズすることができます。

埋め込み配置

サイトに埋め込み配置を追加する予定がある場合、配置がアンカーされるべきHTML要素を指定する必要があります。例えば: <div id="rokt-placeholder"></div>。どの要素を配置のターゲットにするかをRoktチームにお知らせください。

3. 統合のテスト

Web SDKが正しいページで読み込まれ、正しい属性が含まれていることを確認してください。

統合のテストに関するガイドをお読みください。

準備用iframe

読み込み速度の問題がある場合、準備用iframeを使用してこれを解決することができます。準備用iframeの利点についてはこちらをご覧ください。

詳細情報

ネイティブモバイルアプリの統合

Rokt配置をiOS、Android、React Native、またはFlutterモバイルアプリケーションに追加します。

1. ページにRoktをロードする​

統合コードのサンプル​

2. ページと配置の設定​

埋め込み配置​

3. 統合のテスト​

詳細情報​