SPAでのワンタグ設定手順

Ver. 5.16.14

ワンタグをSPAで利用する場合の、トラッキングとレコメンドを行う際の設定手順概要補足情報等
掲載しています。

ワンタグをSPAで利用するには、管理画面の設定とサイト実装が必要です。

関連記事

管理画面の設定

1. 条件の設定

〔条件〕では、アクション(トラッキングやレコメンド)のタイミングや、対象となるページ等の条件を設定します。

SPAでは基本的に「カスタムイベントの呼び出し」条件を作成し、作成したカスタムイベントをサイト実装で呼び出すことによりアクションを実行します。

  1. 「その他」 > 「ワンタグ設定」 > 〔条件〕タブを選択して「条件を作成」をクリックします
  2. 条件編集画面で、任意の「条件名」を入力します
  3. 「タイプ」のプルダウンで「カスタムイベントの呼び出し」を選択します
  4. 任意の「イベント名」を入力します
    ※ここで設定した「イベント名」はサイト実装を行う際に使用します
  5. 必要に応じて「条件式」を設定します

《イベント名の例》

イベント名(例) 発動させたいタイミング
pageChange ユーザーがページ遷移したとき
login ユーザーがログインしたとき
viewItem ユーザーが商品を閲覧したとき
addToCart ユーザーがショッピングカートに商品を追加したとき
removeFromCart ユーザーがショッピングカートから商品を削除したとき
purchase ユーザーが購入手続きを完了したとき
removeHistory ユーザーが商品の閲覧履歴を削除したとき

《〔条件〕の制限事項》

SPAでは以下が利用できません。

  • タイプ:「要素のクリック」
  • 条件式:組み込み変数
    • URL(リファラ)
    • ドメイン(リファラ)
    • ページ(リファラ)
    • リクエストパラメータ(リファラ)

2. アクションの設定

〔アクション〕では、トラッキングやレコメンドなどの動作内容を設定します。

《アクションを設定する場合》

  • 必ずトラッキングの優先度がレコメンドの優先度よりも高くなるように設定してください

3. ルールの設定

〔ルール〕で「条件」と「アクション」を紐づけることで、
「条件」にマッチした場合に「アクション」が実行されるように設定します。

《「カスタムイベントの呼び出し」条件の制限事項》

  • ‌発動条件に「カスタムイベントの呼び出し」条件を複数設定する場合、異なるイベント名の「カスタムイベントの呼び出し」条件を利用することはできません

4. ワンタグの公開

ワンタグを新規設定/変更した場合、「公開」することで設定情報が反映されます。
「公開」するまで設定した内容は適用されません。

サイト実装

《サイト実装する際の注意点》

  • サイトで利用しているフレームワークやバージョンなどにより、実装方法が異なります
  • ワンタグをSPAで利用する際は実装状況をご確認のうえ、事前に動作検証を行ってください

1. ワンタグの読み込み

2. カスタムイベントの呼び出し

  • 1. 条件の設定で設定したカスタムイベントをSPAのページ遷移完了後に呼び出します
記述例:カスタムイベントの呼び出し方法
ワンタグを読み込んだページにグローバル変数 rt_event が追加されます
rt_event の push メソッドを使用してカスタムイベントの呼び出しを行うことができます

以下に代表的なSPAフレームワークで、ページ遷移完了後にカスタムイベントを呼び出す実装例を記載します。

記述例:React.js(バージョン18系)でページ遷移完了後にカスタムイベントを呼び出す
記述例:Vue.js(バージョン3系)でページ遷移完了後にカスタムイベントを呼び出す
記述例:Angular.js(バージョン17系)でページ遷移完了後にカスタムイベントを呼び出す

ページ遷移時にレコメンドコンテンツを削除する

SPAではポップアップなどのレコメンドコンテンツが、他のページに遷移した後も画面に残る場合があります。

  • ページ遷移時にレコメンドコンテンツを削除したい場合は、以下のような「JavaScript関数」のアクションを作成し、ページ遷移時に実行してください
記述例:エレメントID「popup」のレコメンドコンテンツを削除するJavaScript関数
  • レコメンドのエレメントIDに統一された接頭辞を使用している場合は、レコメンドコンテンツをまとめて削除することもできます
記述例:エレメントIDが「rt_」で始まるレコメンドコンテンツをまとめて削除するJavaScript関数
ページ内の「rt_」で始まる要素が全て削除されるため、レコメンドコンテンツ以外の要素が削除されないようご注意ください

データ変数を利用する

データ変数を利用する場合は以下の点にご注意ください。

  • データ変数は、「カスタムイベントの呼び出し」が実行される以前に呼ばれるように実装してください
記述例:トラッキング時に利用可能なデータ変数を設定する
  • データ変数はグローバル変数のため、一度設定すると他のページでも残り続けます
    不要になったデータ変数は、トラッキングやレコメンド実行後のコールバック関数などで忘れずに削除してください
記述例:不要になった「購買情報の学習」のデータ変数を削除するコールバック関数
「購買情報の学習」のデータ変数は "conversion_" が接頭辞になるため、"conversion_" から始まるデータ変数を削除します