導入¶
注釈
ネイティブアプリのWebViewでSDKを動作させる場合は、 こちら を実装し、Repro Webは導入しないようにしてください。
Repro webを導入する¶
アカウントにログインする¶
はじめにRepro webの利用申し込みをするとご連絡いただいたメールアドレスへ招待メールが届きます。 メール内の「今すぐ確認」リンクから、Repro webの管理画面へログインしてください。
すでに企業内で他のメンバーの方がRepro webを利用している場合は、 Repro web管理者権限を持つメンバーの方に 左メニューの設定 > メンバー管理 からメールアドレスを登録し、 アカウントへ招待していただく事もできます。
導入方法を選択する¶
Repro webはタグマネージャーを使って導入することができます。
Repro webではGoogle Tag Manager(GTM)とYahoo Tag Manager(YTM)の動作を確認していますが、 YTMは「タグの実行順序がコントロールできない」という問題があるため、 Google Tag Manager(GTM)での導入を推奨しています。
その他の計測タグマネージャーでも動作実績はございますが動作確認の上ご利用ください。
本マニュアルではGoogle Tag Manager(GTM)を使った場合とウェブページに直接埋め込む場合の導入方法をご紹介します。
また、以下の条件に該当する場合はサポート担当へお問合せ下さい。 適切な導入方法をご案内します。
- 複数ドメインをまたいで計測する
- ASPサービスやカートシステムを利用しているサイトへ導入する
- SPA(SinglepageApplication)サイトへ導入する
Google Tag Manager(GTM)で導入する¶
Google Tag Manager(以下GTM)を使ってRepro webを導入する方法を説明します。
セットアップ計測タグを導入する¶
セットアップ計測タグを準備する¶
サイトに設置するセットアップ計測タグを準備します。
まず、導入サイトでユーザーIDを取得するか否かをご判断下さい。
注釈
ユーザーIDとは、Repro webでユーザーを同定するための識別子です。 通常Repro webはブラウザ(cookie)をベースにユーザーを同定しますが、異なるブラウザやプラットフォームを跨いでユーザを識別するためには、ユーザーIDにDB上の会員IDなど固有の識別子をセットする必要があります。
例えば、以下のようなケースを実現するためにはユーザーIDの設定が必要です。
- PC、スマホといったデバイスを跨いだ計測やセグメント施策を実施する場合
- WebとAppなどプラットフォームを跨いだ計測やセグメント施策を実施する場合
- 会員ID等をキーとしてDB、DMP等のサーバーデータとRepro webを直接連携する場合
ECサイトなどログイン機能があるサイトではユーザーIDの設定を推奨します。 ユーザーIDを設定する場合、セットアップ計測タグに会員IDユーザ同定ができる値を動的に埋め込みます。 この作業は基礎的なプログラムの知識が必要ですので、サイト管理者様など、適切なご担当者様へ本マニュアルを連携し作業を進めてください。
以下、ユーザーIDを取得する場合は ユーザーID実装あり のタグを利用し、ユーザーIDを取得しない場合は ユーザーID実装なし のタグを利用してください。
セットアップ計測タグ(ユーザーID実装あり)
// SET_USER_ID の部分に貴社のユーザーIDが取得できる実装をしてください
<script>
!function(o,e,n){var r=[];if(window.reproio)console.info("Repro Web SDK was loaded more than once");else{window.reproio=function(){r.push(arguments)};var i=o.createElement(e),t=o.getElementsByTagName(e)[0];i.src="https://cdn.reproio.com/web/v2/repro-sdk.min.js",i.async=!0,i.crossOrigin="",i.onload=function(){window.reproio("setSnippetVersion","2.1"),r.forEach(function(o){window.reproio.apply(window.reproio,o)})},t.parentNode.insertBefore(i,t)}}(document,"script");
reproio("setUserID", "SET_USER_ID");
reproio("setup", "YOUR_REPRO_SDK_TOKEN");
reproio("track","PageView");
</script>
セットアップ計測タグ(ユーザーID実装なし)
<script>
!function(o,e,n){var r=[];if(window.reproio)console.info("Repro Web SDK was loaded more than once");else{window.reproio=function(){r.push(arguments)};var i=o.createElement(e),t=o.getElementsByTagName(e)[0];i.src="https://cdn.reproio.com/web/v2/repro-sdk.min.js",i.async=!0,i.crossOrigin="",i.onload=function(){window.reproio("setSnippetVersion","2.1"),r.forEach(function(o){window.reproio.apply(window.reproio,o)})},t.parentNode.insertBefore(i,t)}}(document,"script");
reproio("setup", "YOUR_REPRO_SDK_TOKEN");
reproio("track","PageView");
</script>
次に、招待されたRepro webの管理画面にログインし、 左メニューの設定 > アプリ設定 よりSDKトークンをコピーして下さい。
コピーしたSDKトークンの値をセットアップ計測タグ記述内の下から3行目、 YOUR_REPRO_SDK_TOKEN 部分に張り付けてください。
例えばSDKトークンが「asefpuh1jbnnvadi」の場合、以下のようになります。
以上でセットアップ計測タグの準備は完了です。
ユーザーIDを取得しない場合は、 セットアップ計測タグを設置する のステップへお進み下さい。
ユーザーIDを設定する¶
ユーザーID実装ありのセットアップ計測タグを設定した場合は、
セットアップ計測タグ記述内の指定部分( SET_USER_ID )に動的に会員ID等の値を埋め込んでください。
こちらの詳細な実施方法はGTMのドキュメントをご参照ください。 ここでは設定例をご紹介します。
まず、ログイン時、サイト上に データレイヤー変数 等で会員IDを吐き出すようにしてください。
- 現在会員IDが吐き出されていない場合は軽微なサイト改修が必要です
- プログラムの基礎知識があるサイトご担当者様へ改修をご依頼下さい
次にGTMのユーザー定義変数としてサイト上の会員IDを登録します。
最後にセットアップ計測タグの所定箇所に二重波括弧で会員IDを埋め込みます。
セットアップ計測タグを設置する¶
準備したセットアップ計測タグをGTM経由でサイトに設置します。
GTMの管理画面にアクセスしていただき、以下の手順を行って下さい。
- 左メニュー > タグ を選択して下さい
- 新規ボタンをクリックして下さい
3.タグ名にはわかりやすい名前をつけてください。今回は「Repro Web SDK - setup」としています
4.タグの種類は カスタムHTML を選択して下さい
5.HTML部分に、セットアップ計測タグを準備する項目で作成したセットアップ計測タグをコピーしてペーストして下さい
6.詳細設定の下にある「タグ呼び出しオプション」を １ページにつき１度 に設定して下さい
7.トリガーには計測対象全てのページで実行される DOM Ready を設定して下さい
トリガーが存在しない場合、下記の手順でトリガーを新規作成してください
1.「トリガー」の項目をクリックして下さい
2.画面右上の「+」をクリックしてください
3.トリガー名には、わかりやすい名前をつけてください。今回「DOM Ready」とします4.トリガーのタイプにはDOM Readyを設定して下さい5.このトリガーの発生場所はすべてのDOM Ready イベントを選択して下さい6.保存をクリックして、トリガーを保存して下さい
セットアップ計測タグの動作確認をする¶
セットアップ計測タグの設置状況を確認する¶
セットアップ計測タグが設置されているかどうかを確認する場合は、公開ボタンの左隣の「プレビュー」ボタンを押下してください。
プレビュー押下後、設置サイトを閲覧するとサイト内で動作しているタグが確認できます。
Repro webへデータが上がったか確認する¶
Repro webが動作しているかを確認します。
左メニューの設定 > イベント設定
セットアップ計測タグの公開¶
GTMにて公開をクリックし、設定したセットアップ計測タグをサイトに反映させてください。
コンバージョン計測タグを導入する¶
コンバージョン計測タグとは購入、予約、資料請求といったサイト成果を計測するためのタグです。
完了ページ等の成果地点で動作させることでサイト成果やその際の付帯情報を計測できます。
コンバージョン計測タグを準備する¶
コンバージョンのみを取得する場合¶
コンバージョン計測タグ記述内の ここに~ 部分を管理画面へ反映させたい名称に差し替えてください。
コンバージョン計測タグ
<script>
reproio("track", "ここに「/complete 購入完了」のようなイベント名を入力してください");
</script>
コンバージョン付帯情報も取得する場合¶
例えばECサイトで、購入経験、前回購入日、前回購入金額、前回購入商品カテゴリ、といった値を等を取得する場合、購入完了時点で以下のような記述を行う事で取得可能です。
コンバージョン計測タグ記述内の ここに~ 部分を管理画面へ反映させたい名称に差し替え、取得したい情報に応じて計測タグ内の記述を編集してください。
※埋め込む値はGTMの変数で用意する必要があります
コンバージョン計測タグ(付帯情報を取得する場合)
<script>
reproio("track", "ここに「/complete 購入完了」のようなイベント名を入力してください");
reproio("setStringUserProfile", "購入経験", "あり");
reproio("setDateUserProfile", "最終購入日", new Date());
reproio("setIntUserProfile", "前回購入合計金額", "ここに動的に合計金額を埋め込んでください");
reproio("setStringUserProfile", "前回購入商品カテゴリ", "ここに動的に商品カテゴリを埋め込んでください");
</script>
取得する値やその利用方法について相談したい場合は、Reproカスタマーサクセス担当までご連絡ください。
コンバージョン計測タグの設置¶
DOM Ready を選択して下さい一部のDOM Readyイベント を設定して下さいPage path 含む /complete を設定して下さい
次にタグの設定をします。
カスタムHTML を選択して下さい
- 備考１：合計購入金額等、動的な値を取得する場合は事前にGTMのユーザー定義変数で値を用意し、コンバージョン計測タグの所定箇所に二重並み括弧"{{}}"で括って埋め込んでください。
- 備考２：この際、タグの詳細設定で以下2点の設定を忘れずに行ってください。
- タグの呼び出しオプションを
1回のイベントにつき1度を設定 - タグの順序付けでコンバージョン計測タグが発効する前にセットアップ計測タグを配信するよう設定
最後に、先の手順で設定したコンバージョン計測用トリガーを選択し保存して、GTMを公開してください。
注釈
イベント計測タグを導入する¶
ページビューに加えてWebサイト上のユーザー行動を計測できます。
例えばカート投入クリック、特定要素の表示、といった行動を計測できます。
イベント計測タグを準備する¶
取得したいイベント名を ここに~ の部分へ記述してください。
イベント計測タグ
<script>
reproio("track", "ここにイベント名を入力してください");
</script>
注釈
イベント計測タグを設置する¶
クリック-すべての要素 を選択して下さい一部のクリック を設定して下さいClick Text 含む カートに追加 を設定して下さい
その他GTMでは特定要素の表示、タイマー、スクロール、youtube動画再生開始、等の様々なイベントを設定することができます。
次にタグの設定をします。
カスタムHTML を選択して下さい
- タグの呼び出しオプションを
1回のイベントにつき1度を設定 - タグの順序付けでコンバージョン計測タグが発効する前にセットアップ計測タグを配信するよう設定
最後に、先の手順で設定したイベント計測用トリガーを選択し保存して、GTMを公開してください。
イベント計測タグの動作を確認する¶
左メニューの設定 > イベント設定 より取得したイベントが登録されているかを確認してください。
注釈
ユーザープロフィールを取得する¶
ユーザープロフィールを取得する方法としては以下2種類の方法があります。
設定する際には基礎的なプログラミング知識が必要な場合があります。 サイト管理者様等、適切な方へ本マニュアルを連携し作業を進めてください。
1.サイト上のデータをGTM経由で取得する¶
ユーザープロフィール計測タグを準備する¶
ユーザープロフィール計測タグを設置し、所定箇所に取得したい値を埋め込んでください。
以下のタグの中から、取得するデータ型の種類に応じて適切なタグを利用してください。
ユーザープロフィール計測タグ(文字列型)
<script>
reproio("setStringUserProfile", "男女", "ここに値を埋め込んでください");
reproio("setStringUserProfile", "会員ランク", "ここに値を埋め込んでください");
reproio("setStringUserProfile", "ログイン状態", "ここに値を埋め込んでください");
reproio("setStringUserProfile", "ニックネーム", "ここに値を埋め込んでください");
</script>
ユーザープロフィール計測タグ(整数型)
<script>
reproio("setIntUserProfile", "年齢", "ここに値を埋め込んでください");
reproio("setIntUserProfile", "保有ポイント残高", "ここに値を埋め込んでください");
</script>
ユーザープロフィール計測タグ(日付型)
<script>
reproio("setDateUserProfile", "会員登録日", "ここに値を埋め込んでください");
reproio("setDateUserProfile", "お誕生日", "ここに値を埋め込んでください");
</script>
ユーザープロフィール計測タグを設置する¶
準備したユーザープロフィール計測タグをGTMで設置します。
まず、GTMのトリガーでイベントの発火条件を作成します。
例えば、ログイン状態(≒「ID+8桁数字」の会員IDがサイトに吐き出されている時)のページビューで会員情報を取得したい場合は、下記のような設定となります。
ページビュー を選択して下さい一部のページビュー を設定して下さい会員ID 先頭が一致 ID を設定して下さい
次にタグの設定をします。
カスタムHTML を選択して下さい
この際、タグの詳細設定で以下2点の設定を忘れずに行ってください。
- タグの呼び出しオプションを
1回のイベントにつき1度を設定 - タグの順序付けでユーザープロフィール計測タグが発効する前にセットアップ計測タグを配信するよう設定
最後に、先の手順で設定したイベント計測用トリガーを選択し保存して、GTMを公開してください。
2.自社DBやDMPからRepro webへ直接APIでデータを連携する方法¶
はじめに、この方法はセットアップ計測タグでのユーザーID設定が必須です。
サイト上に存在する情報だけでなく自社のデータベースにのみ保持しているユーザーの属性情報を、直接ユーザープロフィールに登録できます。
このAPIを利用して更新したユーザープロフィールの情報を基にして、対象となるユーザーを絞り込んだメッセージを送信することができます。
APIの種類が4つありますので、Reproサポート担当と相談し適切なAPIを選んでください。
ユーザープロフィール取得の動作確認方法¶
登録されたユーザープロフィールは、左メニューの設定 > ユーザープロフィール設定 に表示されます。
こちらで正しくデータが反映されているかを確認してください。
Repro web管理画面 > 左メニューの設定 > ユーザープロフィール設定
尚、取得された値が意図通りであるかどうかについては、左メニューのアナリティクス > アクセス分析 のフィルターより所定の値をクリックしてご確認をお願いします。
注釈
Webページに直接タグを埋め込み導入する¶
Webページに直接Repro webのタグを埋め込む導入方法を説明します。
セットアップ計測タグを導入する¶
セットアップ計測タグを準備する¶
サイトに設置するセットアップ計測タグを準備します。
まず、導入サイトでユーザーIDを取得するか否かをご判断下さい。
注釈
ユーザーIDとは、Repro webでユーザーを同定するための識別子です。 通常Repro webはブラウザ(cookie)をベースにユーザーを同定しますが、異なるブラウザやプラットフォームを跨いでユーザを識別するためには、ユーザーIDにDB上の会員IDなど固有の識別子をセットする必要があります。
例えば、以下のようなケースを実現するためにはユーザーIDの設定が必要です。
- PC、スマホといったデバイスを跨いだ計測やセグメント施策を実施する場合
- WebとAppなどプラットフォームを跨いだ計測やセグメント施策を実施する場合
- 会員ID等をキーとしてDB、DMP等のサーバーデータとRepro webを直接連携する場合
ECサイトなどログイン機能があるサイトではユーザーIDの設定を推奨します。 ユーザーIDを設定する場合、計測タグに会員IDユーザ同定ができる値を動的に埋め込みます。 この作業は基礎的なプログラムの知識が必要ですので、サイト管理者様など、適切なご担当者様へ本マニュアルを連携し作業を進めてください。
以下、ユーザーIDを取得する場合は ユーザーID実装あり のタグを利用し、
ユーザーIDを取得しない場合は ユーザーID実装なし のタグを利用してください。
セットアップ計測タグ(ユーザーID実装あり)
// SET_USER_ID の部分に貴社のユーザーIDが取得できる実装をしてください
<script>
!function(o,e,n){var r=[];if(window.reproio)console.info("Repro Web SDK was loaded more than once");else{window.reproio=function(){r.push(arguments)};var i=o.createElement(e),t=o.getElementsByTagName(e)[0];i.src="https://cdn.reproio.com/web/v2/repro-sdk.min.js",i.async=!0,i.crossOrigin="",i.onload=function(){window.reproio("setSnippetVersion","2.1"),r.forEach(function(o){window.reproio.apply(window.reproio,o)})},t.parentNode.insertBefore(i,t)}}(document,"script");
reproio("setUserID", "SET_USER_ID");
reproio("setup", "YOUR_REPRO_SDK_TOKEN");
reproio("track","PageView");
</script>
セットアップ計測タグ(ユーザーID実装なし)
<script>
!function(o,e,n){var r=[];if(window.reproio)console.info("Repro Web SDK was loaded more than once");else{window.reproio=function(){r.push(arguments)};var i=o.createElement(e),t=o.getElementsByTagName(e)[0];i.src="https://cdn.reproio.com/web/v2/repro-sdk.min.js",i.async=!0,i.crossOrigin="",i.onload=function(){window.reproio("setSnippetVersion","2.1"),r.forEach(function(o){window.reproio.apply(window.reproio,o)})},t.parentNode.insertBefore(i,t)}}(document,"script");
reproio("setup", "YOUR_REPRO_SDK_TOKEN");
reproio("track","PageView");
</script>
次に、招待されたRepro webの管理画面にログインし、左メニューの設定 > アプリ設定 よりSDKトークンをコピーし下さい。
コピーしたSDKトークンの値をセットアップ計測タグ記述内の、
YOUR_REPRO_SDK_TOKEN 部分に張り付けてください。
以上でセットアップ計測タグの準備は完了です。
セットアップ計測タグを設置する¶
セットアップ計測タグを計測対象サイト全てのページビューで発火するように設置してください。
セットアップ計測タグはサイトのheadタグへの挿入をお願いします。
SPAサイトでの導入を実施される場合はReproサポート担当までお問合せ下さい。
ユーザーID実装ありのセットアップ計測タグを設定する場合は、
セットアップ計測タグ記述内の指定部分(SET_USER_ID )に動的に会員ID等の値を埋め込んでください。
コンバージョン計測タグの導入¶
コンバージョン計測タグとは購入、予約、資料請求といったサイト成果を計測するためのタグです。
完了ページ等の成果地点で動作させることでサイト成果やその際の付帯情報を計測できます。
コンバージョン計測タグを準備する¶
コンバージョンのみを取得する¶
コンバージョン計測タグ記述内の ここに~ 部分を管理画面へ反映させたい名称に差し替えてください。
コンバージョン計測タグ
<script>
reproio("track", "ここに「/complete 購入完了」のようなイベント名を入力してください");
</script>
コンバージョンと一緒に付帯情報も取得する¶
例えばECサイトで、購入経験、前回購入日、前回購入金額、前回購入商品カテゴリ、 といった値を等を取得する場合、購入完了時点で以下のような記述を行う事で取得可能です。
コンバージョン計測タグ記述内の ここに~ 部分を管理画面へ反映させたい名称に差し替え、
取得したい値を埋め込むようにした上で、成果地点でタグを動作させてください。
コンバージョン計測タグ(付帯情報を取得する場合)
<script>
reproio("track", "ここに「/complete 購入完了」のようなイベント名を入力してください");
reproio("setStringUserProfile", "購入経験", "あり");
reproio("setDateUserProfile", "最終購入日", new Date());
reproio("setIntUserProfile", "前回購入合計金額", "ここに動的に合計金額を埋め込んでください");
reproio("setStringUserProfile", "前回購入商品カテゴリ", "ここに動的に商品カテゴリを埋め込んでください");
</script>
コンバージョン計測タグを設置する¶
準備したタグをheadもしくはbody内で発火するように設定してください。
また、このタグは必ずセットアップ計測タグより後に動作するよう、 HTML内でセットアップ計測タグより下方に設置する様にしてください。
取得する値や利用方法について相談したい場合は、 Reproカスタマーサクセス担当までご連絡ください。
注釈
イベント計測タグの導入¶
ページビュー以外のWebサイトにおけるユーザーの行動をトラックできます。
例えばカート投入クリックアクション、特定要素の表示などがあげられます。
イベント計測タグを設置する¶
ここに~ の部分を取得したいイベント名に書き換え、イベントを取得したいタイミングで以下のタグを動作させてください。
また、このタグは必ずセットアップ計測タグより後に動作するよう、設置してください。
イベント計測タグ
<script>
reproio("track", "ここにイベント名を入力してください");
</script>
尚、GoogleTagManager(GTM)ではリンクのクリックや特定要素の出現、といったイベント計測が容易に設定できます。
複数のイベントを同時に取得する場合、以下のように<script>タグ内に、取得するイベントをまとめて記述してください。
複数のイベント計測タグ
<script>
reproio("track", "ここにイベント1を入力してください");
reproio("track", "ここにイベント2を入力してください");
</script>
イベント計測タグの動作確認方法¶
左メニューの設定 > イベント設定 より取得したイベントが登録されているかを確認してください。
注釈
ユーザープロフィールを取得する¶
ユーザープロフィールを取得する方法としては以下2種類の方法があります。
設定する際には基礎的なプログラミング知識が必要な場合があります。 サイト管理者様等、適切な方へ本マニュアルを連携し作業を進めてください。
1.サイトからユーザープロフィール計測タグで取得する¶
ユーザープロフィール計測タグを設置し、所定箇所に取得したい値を埋め込んでください。
以下のタグの中から取得するデータ型の種類に応じて適切なタグを利用してください。
また、このタグは必ずセットアップ計測タグより後に動作するよう、 HTML内でセットアップ計測タグより下方に設置する様にしてください。
ユーザープロフィール取得タグ(文字列型)
<script>
reproio("setStringUserProfile", "男女", "ここに値を埋め込んでください");
</script>
ユーザープロフィール取得タグ(整数型)
<script>
reproio("setIntUserProfile", "購入金額", "ここに値を埋め込んでください");
</script>
ユーザープロフィール取得タグ(日付型)
<script>
reproio("setDateUserProfile", "最終購入日", ココにnew Date()等の値を埋め込んでください);
</script>
2.自社DBやDMPからRepro webへ直接APIでデータを連携する¶
はじめに、この方法はセットアップ計測タグでのユーザーID設定が必須です。
サイト上に存在する情報だけでなく自社のデータベースにのみ保持しているユーザーの属性情報を、 直接ユーザープロフィールに登録できます。
このAPIを利用して更新したユーザープロフィールの情報を基にして、 対象となるユーザーを絞り込んだメッセージを送信することができます。
APIの種類が4つありますので、Reproサポート担当と相談し適切なAPIを選んでください。
ユーザープロフィール取得の動作確認方法¶
登録されたユーザープロフィールは、左メニューの設定 > ユーザープロフィール設定 に表示されます。
こちらで正しくデータが反映されているかを確認してください。
左メニューの設定 > ユーザープロフィール設定
尚、取得された値が意図通りであるかどうかについては、左メニューのアナリティクス > アクセス分析 のフィルターより所定の値をクリックしてご確認をお願いします。
注釈