Last updated 2025年3月6日

SiteMonetization

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

ウェブサイトで配置を設定するには、Web SDK (以下の手順)を使用できます。Roktは、ネイティブなAndroid、iOS、React Native、およびFlutter アプリケーションに配置を設定するためのモバイルSDKも提供しています。

Shopify ストアは、Rokt Ecommerce app を使用して数秒でRokt配置を設定でき、コーディングは不要です！

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

このガイドは、マルチページアプリケーションとして構築されたウェブサイトを対象としています。サイトがシングルページアプリケーションの場合は、これらの instructions に従う必要があります。

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タグ -->

  <!-- パート#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",
```js
          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>

  <!-- HTML コンテンツをここに記載 -->
</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. 統合のテスト​

詳細情報​

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

サンプル統合コード

組み込み配置

3. 統合のテスト

詳細情報