この記事の対象

こちらではタグv2でのタグ配信を行う方向けにKARTE Liveのインストール〜セットアップの方法や注意点を記載します。
タグv2でのタグ配信詳細についてはこちらの記事をご確認ください。
タグv1からタグv2への移行についてはこちらの記事をご確認ください。

タグv1から"互換タグ付き計測タグv2"にタグを移行する場合では、こちらの設定は必要ありません。

KARTE Liveをインストールする

アクセス方法

グローバルメニュー > すべてのプロダクト > ストア > アプリストアをクリック、もしくはこちらのURLからアクセスが可能です。

null

なおKARTE Liveプラグインインストール以降は、Live設定画面からもアクセスが可能です。

null

内容

プラグインの概要

KARTE Liveプラグインの機能やできること、マスキング等の注意事項を記載しています。

null

同意事項の確認（インストール前に必須）

null

規約を確認してインストールボタンから進められます。
モーダル内で「(KARTE Live)利用規約」「利用ガイドライン」の2つを確認します。

※この確認作業・プラグインインストールはプロジェクトの管理者権限を持つユーザーのみ可能です。
管理者以外のユーザーの場合は、管理者ユーザーに連絡をして設定を進めてください。

利用規約と利用ガイドラインについては「新規タブで表示」ボタンより別タブで開いて全画面で見ることも可能です。また、別タブリンクURLを他のメンバーやご担当者様へ共有することもできます。例えば利用規約の法務部確認などが該当します。

一番下部までいくと、インストールボタンが押せるようになります。
インストール実施時にはその日時と該当アカウント名がログ保持の目的で記録されます。

インストールボタンを押すとLiveのプラグインインストールが完了します。

プラグインのアンインストール / 利用開始時の同意事項の確認

プラグインはアンインストールすることができます。
アンインストール時にはKARTE Liveの機能は使えなくなるため注意してください。

また、プラグインインストール後でもKARTE Liveの同意事項確認が可能です。ボタンをクリックすると、再度モーダルが開き、内容を確認することができます。
なお、モーダルのインストールボタンは既に「実施済み表示」となっていて、マウスホバーをすると同意事項に同意した日時とアカウント名を確認することができます。

null

インストール後のステップ

KARTE Liveでは行動記録用の読み込みと実行をするためのスクリプトを配信することが必要です。
ライブ設定画面上でセットアップを進めていきます。
動画保存の仕組みやプロダクトの仕様についてはこちらの記事をご参照ください。

[計測タグv2]　KARTE Liveをセットアップする

Step1：KARTE Action Viewerの導入(所用時間5分)

KARTEで用意しているChrome拡張機能をインストールしましょう

1-1. KARTE Action Viewerのインストール

KARTE Liveの設定に便利なKARTE専用のChrome拡張機能を、 こちらのchromeウェブストア からインストールします。すでに導入済みであれば、次のステップに進みましょう。

1-2. KARTE Action Viewerとは？

KARTE Action Viewerは、KARTEが提供するChrome拡張機能です。KARTEが導入されているサイト上で利用します。主に次のような機能があります。

  • 自分にどの接客サービスが配信されているか確認する
  • 自分にどのイベントが発生しているか確認する
  • サイト内の要素のCSSセレクタをコピーする

詳しい内容はこちらの記事をご覧ください

Step2：初期設定（所要時間10分）

ライブ設定画面からスクリプトをテスト配信してリアルタイム再生でLiveを実際に体験しましょう

2-1. 録画スクリプト設定画面の確認

  • グロナビのライブ>ライブ設定から録画スクリプト設定画面に遷移します。

null

2-2. スクリプトの編集

スクリプトの条件設定を進めていきます。

「配信ページ」の設定

  • こちらの 「よくあるLive対象ページ」紹介記事 を参考に、KARTE Liveの対象ページを決めましょう
  • 「条件を追加」から閲覧ページのパス・URL・クエリ文字列・URIアンカーで設定することができます
    ※現状、ユーザーセグメントは配信の条件設定には使えません

null

「テスト配信条件」の設定

  • 「条件を追加」から「URIアンカーで設定する」を選択します
  • こちらにテスト配信用のURIアンカーを追加します
  • キャプチャを参考に、エンドユーザーが通常アクセスしない任意の文字列を設定しましょう
    null

2-2. テスト配信

右上の「公開」ボタンを押して公開しましょう。

null

2-3. 配信先ページで配信の確認

テスト配信したKARTE Live動画の確認をします。

  • 配信先ページをブラウザで開きます。このとき、URLの最後に#live_test（設定したテスト配信条件）を付与して、テスト条件に合致した状態でページへアクセスします
  • KARTE Action Viewerを開き、「管理画面で自分を表示するURL」をクリックします

2-4. 動画の確認

KARTE Liveの動画計測ができていることを確認します。

ユーザーストーリー画面のライブリプレイをクリックします。
動画が表示されることを確認します。

null
null

※「ライブリプレイ」や「動画を再生する」が表示されない場合は、 こちらのチェックリスト をご確認ください。

Step3:マスキングの設定（所要時間10~60分）

対象ページのデフォルトマスキングを確認し、追加でマスキングが必要な場合は設定しましょう。

3-1. デフォルトマスキングの確認

テキストボックスなどは、デフォルトでマスキングされます。
null

3-2. 追加マスキングの設定

配信先ページに追加でマスキングしたい箇所がある場合は、個別に設定が可能です。設定が必要な場合は、作業の流れを動画で簡単に確認しましょう。
(※画質が悪い場合、動画右下の歯車アイコンから画質720p以上に設定を変更してください。)

  • 録画スクリプト設定画面に戻ります
  • 別タブで開いている配信先ページ上で、KARTE Action Viewerを使ってマスキングが必要な箇所のCSSセレクタをコピーします
  • コピーしたCSSセレクタを、同画面の「マスキング対象要素」にペーストします。複数箇所を指定する場合は、各CSSセレクタをカンマ区切りで入力します
  • 編集内容を右上のボタンで「保存」します

null

3-3. 全マスキング箇所の確認

  • 追加したマスキング設定を反映させるために、配信先ページを開いているタブを更新します
  • 先ほど(2-4)と同様の手順で、ユーザーストーリー上でKARTE Liveの「リアルタイム再生」画面を開きます
  • 隠したい要素が全てマスキングされていることを確認します
  • 導入サイトの仕様により「入力確認画面」などで個人情報詳細が表示される場合、必要に応じて追加でのマスキングの対応をお願いします

3-4. 録画用スクリプトの全体公開

  • 「配信ページ」に設定したテスト配信条件（URIアンカー）を削除します
  • 設定を保存します。これで、KARTE Live用スクリプトが対象範囲に全体配信されます

Webサイト側のマスキング対象/非対象要素の洗い出しは早い段階から着手することおすすめします。
なお、マスキングの仕様についてはこちらの記事をご確認ください。

また、録画用スクリプト設定では変更履歴が表示されます。
画面上段の「最終更新」部分をクリックすると、詳細情報として、誰がマスキング対象要素・配信ページ・公開/非公開をどう変更したか等の情報を見ることができます。

null

Step4:セットアップが完了したら

様々な軸で録画した、動画を確認しましょう。
なお、スクリプトを配信してから最初のユーザー行動が動画として保存されるまでは数分かかる場合があります。

FAQ

[計測タグv2]でのKARTE Live活用に関するFAQはこちらの記事をご確認ください。