Last updated 2024年10月11日

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に置き換えてください。手順についてはWhere can I find my 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 - As soon as the data attributes are available, execute the below script to display a Rokt placement -->
  <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>内）し、データ属性が利用可能になった時点で即座に実行することです。上記の例では、統合をサンドボックス環境でテストするために 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の利点についてはこちらをご覧ください。

詳細情報

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

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

1. ページにRoktを読み込む​

統合コードのサンプル​

2. ページとプレースメントの設定​

埋め込みプレースメント​

3. 統合のテスト​

詳細情報​