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

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タグマネージャ

Googleタグマネージャを使用している場合は、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 - 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>内）、データ属性が統合可能になったらすぐにselectPlacementsの呼び出しを有効にしてください。

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

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

注記

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

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

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

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

サイトに埋め込みプレースメントを追加する予定がある場合、プレースメントがアンカーすべきHTML要素を指定する必要があります。例: <div id="rokt-placeholder"></div>。プレースメントがターゲットとする要素をRoktチームに知らせてください。

3. インテグレーションのテスト​

Web SDK が正しいページでロードされ、正しい属性を含んでいることを確認してください。

インテグレーションのテストガイドをお読みください。

Preparative iframe

ロード速度の問題がある場合は、これを解決するために準備用の iframe を使用することができます。準備用 iframe の利益についてこちらで詳しく読むことができます。

詳細情報​

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

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

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