Contents
このページで説明しているGoogle Analyticsの従来版(ユニバーサル アナリティクス)は2023年7月1日以降のデータが計測されません。今後の計測にはGoogle Analytics4 (GA4)をご利用ください。
Google Analyticsは、無料で使えるWebページのアクセス解析サービスです。
Live Commerceでサイトを制作したら、Google Analyticsを使えるように設定することをお勧めします。
設定の方法には以下の２つがありますので、どちらかを選択してください。
A: サイトに直接タグを設置する
PHPファイルに、直接タグを記述します。Analytics以外に利用する予定がなく、タグマネージャー導入の手間をかけたくない場合や、同期処理が必要などタグマネージャーが対応していないタグを利用する場合は、こちらの方法で設定します。
B: タグマネージャーを利用する
タグマネージャーはGoogleが提供する無料ツールで、HTMLを変更する必要がなく、管理画面でタグを一元管理できます。また、バージョン管理ができたり、Webページの読み込み速度が早いなどのメリットがあります。
【共通】 Google Analyticsの基本設定
Google Analyticsを初めて利用する場合は、申し込みページにアクセスします。
アカウントとプロパティを新規作成します。
・測定の対象は「ウェブ」を選択します。
・ウェブサイトのURLを入力し、タイムゾーンなどを選択して[作成]ボタンをクリックします。
ビュー列にある「eコマースの設定」 をクリックします。
「eコマースの有効化」をオンにします。「拡張eコマースのレポートを有効化」はオフにし、[保存]ボタンをクリックします。
ビュー列にある「ビューの設定」 をクリックします。
「通貨」でレポートに表示する通貨を指定します。
その他の設定については、Googleのマニュアルを参考にしてください。
【A】 サイトに直接タグを設置
Google広告やfacebook広告、その他の外部ツールなどを利用する予定がなく、Analyticsのみを利用する場合は、サイトに直接タグを設置することで簡単にスタートできます。
事前に、以下の設定を行います。
Google Analyticsのプロパティ列にある「プロパティ設定」 をクリックします。
UA-で始まるトラッキングIDをコピーします。
Live Commerceの管理画面にログインし、上部メニューのサイト設定 > サイト設定 > Google Analytics & Trackingを選択します。
Gooogle Analytics欄に、コピーしたトラッキングIDを貼り付けます。
サイトにタグを設置
Google Analyticsのプロパティ列にある「トラッキング情報 > トラッキングコード」をクリックします。
トラッキングコードをコピーします。
Live Commerceの管理画面にログインし、サイト設定 > テーマ管理 > オンラインのテーマ の[テーマ編集]ボタンをクリックします。
複数のテーマがインストールされている場合は、利用するテーマをリストから選択します。
header.phpを開き、タグの直後にコピーしたトラッキングコードを貼り付けて保存します。
|
1 2 3 4 5 6 7 8 9 10 11 |
<head> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxx-xx"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-xxxxxxxx-xx'); </script> |
header_checkout.phpにも同様にタグを追加します。
PCとスマホで別のテーマを利用している場合は、両方のテーマのheader.php, header_checkout.phpにタグを追加してください。
ページビューを計測
グローバル サイトタグ（gtag.js）の場合は、ページビューは自動で計測されるため、設定は不要です。
デザインテーマによっては、footer.phpおよびfooter-checkout.phpに以下のページビュー計測用コードが記述されている場合があります。こちらはコメントアウトまたは削除してください。
|
1 |
<? php echo c::googleAna(); ?> |
eコマーストラッキングを計測
checkout-success.phpの以下のコードで、eコマーストラッキング用のデータを出力します。
|
1 |
echo c::gaEcommerce($this->orderId); |
デザインテーマによっては、checkout-success.phpに以下の古いコードが記述されている場合があります。こちらは削除し、新しいコードに変更してください。
|
1 2 3 |
echo c::googleEcommerce($this->orderId); ↓以下に変更します echo c::gaEcommerce($this->orderId); |
Google Analyticsでデータを確認します。
「コンバージョン > eコマース > 商品の販売状況」 をクリックします。
プライマリ ディメンションを切り替えて、商品・商品のSKU・商品カテゴリ・商品ブランドごとのデータを確認できます。
商品カテゴリタブにデータを表示するには、左下の管理アイコンをクリックし、ビュー列にある「eコマースの設定」 をクリックします。「eコマースの有効化」と「拡張eコマースのレポートを有効化」をどちらもオンにし、[保存]ボタンをクリックします。
【B】 タグマネージャーを利用
サイトにタグを設置
タグマネージャーを初めて利用する場合は、申し込みページにアクセスします。
タグマネージャーのマニュアルを参考に、アカウントとコンテナを新規作成します。
・アカウント名（通常は社名)を入力し、国で[日本]を選択します。
・コンテナ名(通常はサイトURL)を入力し、ターゲットプラットフォームで「ウェブ」を選択し、[作成]ボタンをクリックします。
表示される2つのタグをそれぞれコピーしておきます。
タグは、管理画面のワークプレース上部にあるコンテナID（GTM-XXXXXX）をクリックしてコピーすることも可能です。
Live Commerceの管理画面にログインし、サイト設定 > テーマ管理 > オンラインのテーマ の[テーマ編集]ボタンをクリックします。
複数のテーマがインストールされている場合は、利用するテーマをリストから選択します。
header.phpを開き、タグを追加します。
1つめのタグは</head>より上、2つめのタグは<body>タグの下に入れます。
タグ中にある’GTM-xxxxxxx’の部分はサイトによって異なります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!-- 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','GTM-xxxxxxx');</script> <!-- End Google Tag Manager --> </head> <body> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-xxxxxxx" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> |
header_checkout.phpにも同様にタグを追加します。
PCとスマホで別のテーマを利用している場合は、両方のテーマのheader.php, header_checkout.phpにタグを追加してください。
なお、この他にLive Commerceからタグマネージャーへ値を渡すためのコードを追加する必要があります。設定をご希望の場合は、メールにてお問い合わせください。
ページビューを計測
テーマのfooter.php、footer-checkout.phpで以下のページビュー計測用コードが記述されている場合は、コメントアウトまたは削除してください。
|
1 |
<?php echo c::googleAna();?> |
次に、タグマネージャーのワークスペースを開きます。
1) トラッキングIDを定義する変数を作成
左側のメニューで変数を選択し、ユーザー定義変数の[新規]ボタンをクリックします。
変数の設定画面の鉛筆アイコンをクリックし、リストから「定数」を選択します。
変数名に「tracking id」を入力し、値にAnalyticsのトラッキングIDを入力して保存します。
トラッキングIDはAnalyticsの管理画面にログインし、メニューから管理 > プロパティ設定 > トラッキングID で確認できます。
2) Googleアナリティクス設定変数を作成
左側のメニューで変数を選択し、ユーザー定義変数の[新規]ボタンをクリックします。
変数の設定画面の鉛筆アイコンをクリックし、「Google アナリティクス設定」を選択します。
・トラッキングIDの値として、1)で定義した変数(tracking id)を選択します。
・変数名に「universal analytics settings – pageview」 と入力して保存します。
3) ページビュー計測用のタグを作成
左側のメニューでタグを選択し、[新規]ボタンをクリックします。
タグの設定画面の鉛筆アイコンをクリックし、リストから「Google アナリティクス： ユニバーサル アナリティクス」を選択します。
・トラッキングタイプは「ページビュー」を選択します。
・Google アナリティクス設定は2)で定義した変数(universal analytics settings – pageview)を選択します。
・タグ名に「Universal Analytics Pageview」 と入力します。
トリガー画面の鉛筆アイコンをクリックし、リストから「All Pages」を選択して保存します。
4) プレビューモードでタグを検証
タグマネージャーのプレビューモードを使って、タグが正しく設置されたことを確認します。
ワークスペース右側にある[プレビュー]ボタンをクリックします。
オレンジ色のバナーが表示されたら、プレビュー機能が有効になっています。
タグマネージャーを開いているのと同じブラウザの別タブで、サイトにアクセスします。
ページ下部のタグマネージャーのコンソールで、発火タグ(Tags Fired)のエリアに設定したタグが表示されることを確認します。
プレビューを終了するには、オレンジ色のバナー下部の「プレビューモードの終了」をクリックします。
5) タグを公開
タグが正しく動作することを確認できたら、公開します。
ワークスペース右側の[公開]ボタンをクリックし、バージョン名とバージョンの説明を入力して、[公開]ボタンをクリックします。
eコマーストラッキングを計測
eコマーストラッキングを設定すると、商品の売れ行きやユーザーがサイト訪問から購入に至るまでにかかった日数などを把握することができます。
テーマのcheckout-success.phpで以下の関数を実行している場合は、コメントアウトまたは削除してください。
|
1 2 3 |
c::googleEcommerce($this->orderId); または c::gaEcommerce($this->orderId); |
次に、タグマネージャーのワークスペースを開きます。
1) データレイヤー変数を作成
左側のメニューで変数を選択し、ユーザー定義変数の[新規]ボタンをクリックします。
変数の設定画面の鉛筆アイコンをクリックし、「データレイヤーの変数」を選択します。
・データレイヤーの変数名に、「currencyCode」と入力します。
・データレイヤーのバージョンは、デフォルト値(バージョン2)のままにします。
・変数名に「ga-currencyCode」 と入力して保存します。
2) トリガーを作成
左側のメニューでトリガーを選択し、[新規]ボタンをクリックします。
トリガーの設定画面の鉛筆アイコンをクリックし、トリガーのタイプで「ページビュー」を選択します。
・このトリガーの発生場所に「一部のページビュー」を選択します。
・「Page URL」、「含む」を選択し、「/checkout/success」と入力します。
・トリガー名に「購入完了画面」と入力して保存します。
3) タグを作成
左側のメニューでタグを選択し、[新規]ボタンをクリックします。
タグの設定画面の鉛筆アイコンをクリックし、リストから「Google アナリティクス： ユニバーサル アナリティクス」を選択します。
・トラッキングタイプは「トランザクション」を選択します。
・Google アナリティクス設定は、ページビューの測定で定義済みの変数(universal analytics settings – pageview)を選択します。
・タグ名に「Analytics eコマーストラッキング」 と入力します。
・「このタグでオーバーライド設定を有効にする」をチェックします。
・詳細設定 > 設定するフィールドを開き、フィールド名に「currencyCode」と入力します。値は1)で登録した「ga-currencyCode」を選択します。
トリガー画面の鉛筆アイコンをクリックし、リストから「購入完了画面」を選択して保存します。
4) プレビューモードでタグを検証
タグマネージャーのプレビューモードを使って、タグが正しく設置されたことを確認します。
ワークスペース右側にある[プレビュー]ボタンをクリックします。
タグマネージャーを開いているのと同じブラウザの別タブで、サイトにアクセスします。
ページ下部のタグマネージャーのコンソールで、発火していないタグ(Tags Not Fired)のエリアに
「Analytics eコマーストラッキング」タグが表示されます。
サイトで商品を購入します。
[注文]ボタンをクリックすると表示されるThank Youページで、タグマネージャーコンソールの発火タグ(Tags Fired)のエリアに「Analytics eコマーストラッキング」タグが表示されることを確認します。
Data Layerタブをクリックすると、値を確認できます。
プレビューを終了するには、オレンジ色のバナー下部の「プレビューモードの終了」をクリックします。
5) タグを公開
ワークスペース右側の[公開]ボタンをクリックし、バージョン名とバージョンの説明を入力して、[公開]ボタンをクリックします。