Contents
Google Analyticsは、無料で使えるWebページのアクセス解析サービスです。
Live Commerceでサイトを制作したら、Google Analyticsを設定してサイトのアクセス状況を把握することをお勧めします。
従来のバージョンのGoogle Analyticsは2023年6月末で計測を終了しますので、2023年7月以降はGoogle Analytics４ (GA4)をご利用ください。
タグマネージャーを利用して、GA4の各イベントを計測する手順は以下の通りです。
GA4の基本設定
GA4を初めて利用する場合は、申し込みページにアクセスします。
アカウントとプロパティを新規作成します。
・データ収集のプラットフォームは「ウェブ」を選択します。
・タイムゾーン・通貨などを選択し、ウェブサイトのURLを入力して[ストリームを作成]ボタンをクリックします。
ウェブストリームの詳細に表示される、G- で始まる測定IDをコピーしておきます。
その他のGA4設定については、Googleのマニュアルを参考にしてください。
GA4にサイトのアクセスデータを送信するためには、以下の設定を行います。
タグマネージャーのコンテナを作成
タグマネージャーを初めて利用する場合は、申し込みページにアクセスします。
タグマネージャーのマニュアルを参考に、アカウントとコンテナを新規作成します。
・アカウント名（通常は社名)を入力し、国で[日本]を選択します。
・コンテナ名(通常はサイトURL)を入力し、ターゲットプラットフォームで「ウェブ」を選択し、[作成]ボタンをクリックします。
表示される2つのタグをそれぞれコピーしておきます。
タグは、管理画面のワークプレース上部にあるコンテナID（GTM-XXXXXX）をクリックしてコピーすることも可能です。
Live Commerceのテーマを確認
複数のテーマがインストールされている場合は、管理画面のサイト設定 > テーマ管理 オンラインのテーマ で、現在利用中のテーマを確認します。
PC用のテーマの他に、スマホ専用のテーマを利用している場合は、コンテンツ管理 > スマートフォン設定 > テーマ設定タブで、利用中のスマホ専用テーマを確認できます。
(PCとスマホで共通のレスポンシブテーマを利用している場合は、スマートフォン設定メニューが表示されません)
テーマの編集
Live Commerceの申し込み時にお知らせしたID・パスワードを利用してFTP接続し、テーマファイルを編集します。
header.phpを開き、タグを追加します。
1つめのタグは</head>より上、2つめのタグは<body>タグの下に入れます。
タグ中にある’GTM-xxxxxxx’の部分はサイトによって異なります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','<span style="color: #ff0000;">GTM-XXXXXXX</span>');</script> <!-- End Google Tag Manager --> </head> <body> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=<span style="color: #ff0000;">GTM-XXXXXXX</span>" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> |
PCとスマホで別のテーマを利用している場合は、各テーマのheader.phpに加え、 header_checkout.php、 header_simple.php(スマホテーマ)にもタグを追加します。
テーマのfooter.php、footer-checkout.phpで以下のページビュー計測用コードが記述されている場合は、コメントアウトまたは削除してください。
|
1 |
<?php echo c::googleAna();?> |
タグマネージャーの設定
測定ID用の変数を作成
左側のメニューで変数を選択し、ユーザー定義変数の[新規]ボタンをクリックします。
変数の設定画面の鉛筆アイコンをクリックし、リストから「定数」を選択します。
ユーザーID用の変数を作成
変数の設定画面の鉛筆アイコンをクリックし、リストから「データレイヤーの変数」を選択します。
トリガーを作成
左側のメニューでトリガーを選択し、[新規]ボタンをクリックします。
トリガーの設定画面の鉛筆アイコンをクリックし、リストから「初期化」を選択します。トリガー名を「初期化」と入力して保存します。
タグを作成
左側のメニューでタグを選択し、[新規]ボタンをクリックします。
タグの設定画面の鉛筆アイコンをクリックし、リストから「Google アナリティクス： GA4設定」を選択します。
・測定IDに、「GA4 Measurement ID」を選択します。
・設定フィールドを開きます。フィールド名に「user_id」と入力し、値に「user_id」を選択します。
ワークスペース右側の[公開]ボタンをクリックし、バージョン名とバージョンの説明を入力して、[公開]ボタンをクリックします。
計測の確認
サイトにアクセスし、GA4のレポート > リアルタイムでサイトへのアクセスが計測されることを確認します。
GA4イベントの計測
Googleの推奨イベントのうち、Live Commerceでは以下のGA4イベントを計測できます。
| イベント名 | 計測のタイミング |
|---|---|
| view_item | 商品ページの閲覧 |
| add_to_cart | 商品をカートに追加 |
| add_to_wishlist | 商品をウィッシュリストに追加 |
| view_cart | カートページの閲覧 |
| remove_from_cart | カートから商品を削除 |
| begin_checkout | 購入手続きの開始 |
| add_payment_info | 決済方法の選択 |
| purchase | 購入 |
| login | ログイン |
| sign_up | 会員登録 |
| generate_lead | 問い合せを送信 |
| view_homepage | トップページの閲覧 |
G-10桁の英数字)を入力して保存します。
イベントを計測するには、まずLive Commerceのプラグインを有効化してテーマを編集し、タグマネージャーで設定を行います。
プラグインを有効化
Live Commerce管理画面のサイト設定 > 機能管理 > プラグイン管理 で、イベントデータの右側にある[有効化]ボタンをクリックします。有効化されると、イベントデータプラグインの行が薄いグリーン色になります。
テーマの編集
Live Commerceの申し込み時にお知らせしたID・パスワードを利用してFTP接続し、利用中のテーマファイルを編集します。
header.phpを開き、タグを追加します。
タグマネージャーの計測タグの上に、以下のコードを追加します。
|
1 2 3 4 5 |
<!-- Google Tag Manager (dataLayer) --> <?php c::doAction('action_event'); ?> <!-- Google Tag Manager (dataLayer) --> |
PCとスマホで別のテーマを利用している場合は、各テーマのheader.phpに加え、 header_checkout.php、 header_simple.php(スマホテーマ)にもタグを追加します。
タグマネージャーの設定
各イベントを計測するために、変数とトリガー、タグを追加します。
変数名・トリガー名・タグ名は変更可能です。
データレイヤー変数を作成
左側のメニューで変数を選択し、ユーザー定義変数の[新規]ボタンをクリックします。
変数の設定画面の鉛筆アイコンをクリックし、「データレイヤーの変数」を選択します。
・データレイヤーの変数名に、「currency」と入力します。
・データレイヤーのバージョンは、デフォルト値(バージョン2)のままにします。
・変数名に「currency」 と入力して保存します。
同じ手順で、計3つの変数を作成してください。
| 変数名 | 変数のタイプ | データレイヤーの変数名 |
|---|---|---|
| currency | データレイヤーの変数 | currency |
| value | データレイヤーの変数 | value |
| method | データレイヤーの変数 | method |
トリガーを作成
左側のメニューでトリガーを選択し、[新規]ボタンをクリックします。
変数の設定画面の鉛筆アイコンをクリックし、「カスタムイベント」を選択します。
・イベント名に「view_item」と入力します。イベント名は変更せず、正確に入力してください。
・このトリガーの発生場所は、「すべてのカスタムイベント」を選択します。
・トリガー名に「custom – view_item」 と入力して保存します。
同じ手順で、計12のトリガーを作成してください。
| トリガー名 | トリガーのタイプ | イベント名 (変更不可) |
|---|---|---|
|
custom – view_item |
カスタムイベント |
view_item |
|
custom – add_to_cart |
カスタムイベント |
add_to_cart |
|
custom – add_to_wishlist |
カスタムイベント |
add_to_wishlist |
|
custom – view_cart |
カスタムイベント |
view_cart |
|
custom – remove_from_cart |
カスタムイベント |
remove_from_cart |
|
custom – login |
カスタムイベント |
login |
|
custom – sign_up |
カスタムイベント |
sign_up |
|
custom – begin_checkout |
カスタムイベント |
begin_checkout |
|
custom – add_payment_info |
カスタムイベント |
add_payment_info |
|
custom – purchase |
カスタムイベント |
purchase |
|
custom – generate_lead |
カスタムイベント |
generate_lead |
|
custom – view_homepage |
カスタムイベント |
view_homepage |
タグを作成
左側のメニューでタグを選択し、[新規]ボタンをクリックします。
タグの設定画面の鉛筆アイコンをクリックし、リストから「Google アナリティクス：GA4 イベント 」を選択します。
・設定タグは「GA4 Configuration」を選択します。
・イベント名に「view_item」と入力します。
・タグ名に「GA4 – 商品ページ閲覧」 と入力します。
・イベントパラメーターをクリックして開きます。
[行を追加]をクリックし、パラメーターに「currency」と入力し、値に「 currency」を選択します。選択した値は自動で {{ と }} で囲まれます。
再度[行を追加]をクリックし、パラメーターに「 value」と入力し、値に「 value」を選択します。選択した値は自動で {{ と }} で囲まれます。
・詳細設定 > eコマース をクリックして開きます。「eコマースデータを送信」にチェックを入れ、データソースに「Data Layer」を選択します。
・トリガー画面の鉛筆アイコンをクリックし、リストから「custom – view_item」を選択して保存します。
同じ手順で、計12のタグを作成してください。
タグの種類は「Googleアナリティクス：GA4 イベント」、設定タグは「GA4 Configuration」を選択します。
| タグ名 | イベント名
(変更不可) |
イベントパラメーター パラメータ名 ： 値 |
詳細設定 > eコマース | データソース | トリガー |
|---|---|---|---|---|---|
|
GA4 – 商品ページ閲覧 |
view_item |
currency : {{currency}} value : {{value}} |
eコマースデータを送信 | Data Layer | custom – view_item |
|
GA4 – カート追加 |
add_to_cart |
currency : {{currency}} value : {{value}} |
eコマースデータを送信 | Data Layer | custom –
add_to_cart |
|
GA4 – ウィッシュリスト追加 |
add_to_wishlist |
currency : {{currency}} value : {{value}} |
eコマースデータを送信 | Data Layer | custom –
add_to_wishlist |
|
GA4 – カート閲覧 |
view_cart |
currency : {{currency}} value : {{value}} |
eコマースデータを送信 | Data Layer | custom –
view_cart |
|
GA4 – カートから削除 |
remove_from_cart |
currency : {{currency}} value : {{value}} |
eコマースデータを送信 | Data Layer | custom –
remove_from_cart |
|
GA4 – ログイン |
login |
user_id : {{user_id}} |
custom –
login |
||
|
GA4 – 会員登録 |
sign_up |
user_id : {{user_id}}
method: {{method}} |
custom –
sign_up |
||
|
GA4 – 購入手続き開始 |
begin_checkout |
currency : {{currency}} value : {{value}} |
eコマースデータを送信 | Data Layer | custom –
begin_checkout |
|
GA4 – 決済情報追加 |
add_payment_info |
currency : {{currency}} value : {{value}} |
eコマースデータを送信 | Data Layer | custom –
add_payment_info |
|
GA4 – 購入 |
purchase |
currency : {{currency}} value : {{value}} |
eコマースデータを送信 | Data Layer | custom –
purchase |
|
GA4 – 問い合わせ |
generate_lead |
currency : {{currency}} value : {{value}} |
custom –
generate_lead |
||
|
GA4 -トップページ閲覧 |
view_homepage |
custom – view_homepage |
プレビューモードで検証
タグマネージャーのプレビューモードを使って、タグが正しく設置されたことを確認します。
ワークスペース右側にある[プレビュー]ボタンをクリックします。
ブラウザで新しいタブが開き、サイトのトップページを表示します。
元のタブに戻り、 [Continue]ボタンをクリックし、プレビューモード画面を開きます。
「GA4 Configuration」タグと「GA4 – トップページ」タグが発火していることを確認します。
サイトのトップページを表示したタブに戻り、商品ページを開きます。
プレビューモードのタブに戻ると、「GA4 – 商品ページの閲覧」タグが発火していることを確認します。
Data Layerタブをクリックすると、商品名・カテゴリ名・価格などの商品情報を取得したことが分かります。
同様に、カート追加やログインなどのタイミングで設定したイベントが発火し、Data Layerタブで商品情報などのパラメーターが計測されていることを確認します。
プレビューを終了するには、プレビューモード左上にある「X」をクリックします。
タグを公開
ワークスペース右側の[公開]ボタンをクリックし、バージョン名とバージョンの説明を入力して、[公開]ボタンをクリックします。
計測の確認
GA4のレポート > エンゲージメント > イベントでイベントが計測されていることを確認します。
(データが反映されるまで1日程度かかる場合があります）
