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

SiteMonetization

次の.mdテキストを日本語に翻訳し、エスケープされた文字を保持して、結果が有効なJSON文字列になるようにします：サイトにRoktの配置を追加することは、Rokt Ecommerceのパートナーにとって最初のステップです。配置は、任意のタイプのRoktキャンペーンを表示するために使用される柔軟なiframeです。

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

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

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

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

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

アカウントマネージャーから統合コードを提供してもらうか、my.rokt.comで見つけることができます。

統合コードには、顧客識別子（生のメールアドレスをお勧めします）とコンテキストデータが含まれています。Roktが個人識別子とコンテキスト属性を求める理由について詳しく読むことができます。

サンプル統合コード​

統合のロード​

Roktとの統合を開始するための最初のステップは、Roktの統合ランチャーをサイトにロードすることです。最適なパフォーマンスのために、以下のスクリプトタグをHTMLのhead要素に直接追加することをお勧めします。

Google Tag Manager

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

注意

以下の例をコピーする場合は、roktAccountIdをアカウントの固有IDで置き換えてください。アカウントIDを見つける方法については、Rokt IDを見つける方法を参照してください。

<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: "rokt-account-id",
    sandbox: true,
  });
  await launcher.selectPlacements({
    attributes: {
      email: "",
      firstname: "",
      lastname: "",
      mobile: "",
      confirmationref: "",
      amount: "",
      currency: "",
      paymenttype: "",
      ccbin: "",
      zipcode: "",
      country: "",
      language: "",
    },
  });
</script>

これらの方法のいずれかを選択し、それが1回だけ実行されるようにする必要があります。

2. Roktの統合コードをサイトに追加する​

Roktの統合コードをRoktをロードするステップから取得し、Roktの配置を表示したい任意のページのHTML <head></head>タグの間に追加します。

統合コードをページに追加する際には、顧客とトランザクションデータを入力することを確認してください。Roktが顧客を識別し、関連するオファーを選択できるように、顧客のメールアドレスを設定してください。

顧客が表示するオファーをより適切にパーソナライズするために、トランザクションに関するコンテキスト属性を入力してください。

注記

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

3. ページと配置を設定する​

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

埋め込み配置​

サイトに埋め込み配置を追加する予定の場合は、配置をアンカーにするHTML要素を指定する必要があります。例：<div id="rokt-placeholder"></div>。配置が対象とする要素をRoktチームに伝えてください。

4. 統合をテストする​

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

統合をテストするガイドを読んでください。

事前準備のあるiframe

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

詳細情報​

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

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

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