この記事では、立ち上げたばかりのECサイトに『Google Analytics 4』を設定する方法について紹介しています。
![](https://noveblo.com/wp-content/uploads/2023/07/xserver-eccube-install-eyecatch-400x210.jpg)
Google Analytics 4とは?
Googleの最新のウェブサイトとアプリの分析ツールで、略してGA4と呼ばれます。
以前のバージョン(Universal Analytics)から大幅に進化し、次のような特徴を持っています。
- クロスプラットフォーム対応
-
ウェブサイトとモバイルアプリのユーザー行動を一元化して追跡できます。
→ ユーザーがウェブとアプリ間でどのように移動するか、全体像を把握できます。 - 機械学習と予測分析
-
機械学習によってデータ分析し、未来のユーザー行動を予測できます。
→ ユーザーが製品を購入する可能性や、逆にサービスをやめる可能性を予測できます。 - イベントトラッキングとパラメータ
-
ユーザーの行動(ページビュー、ボタンクリックなど)を「イベント」として捉えます。
→ それぞれのイベントにパラメータ(追加情報)を付与することで、より詳細な分析できます。 - プライバシーファースト
-
Cookieに頼らないデータ測定を行う設計が採用されています。
→ ユーザープライバシーの保護と規制への対応を強化するための措置です。 - 無料
-
一部の高度な機能を除き、どの規模の企業や個人でも自由に利用できます。
Google Analytics 4の設定手順
全体の流れは以下の通りです。
- Google Analyticsのアカウントを作成する。
- プロパティ、データストリームを作成し、測定IDを取得する。
- GoogleタグをEC-CUBEのTwigテンプレート(default_frame.twig)に挿入する。
Google Analyticsのアカウントを作成する
![Googleアナリティクスを設定するための初期画面](https://noveblo.com/wp-content/uploads/2023/08/43-1.jpg)
まず、Googleで「Google Analytics」と検索します。
「Google Marketing Platform」が上位に表示されるので、そちらを開きます。
こちらにリンクも貼っておきます↓
![Googleアカウントのログイン画面](https://noveblo.com/wp-content/uploads/2023/08/43-2.jpg)
Googleアカウントにログインしていない場合、ログイン画面が表示されます。
自身のアカウントにログインし、次に進みます。
![Google Analyticsの初期画面](https://noveblo.com/wp-content/uploads/2023/08/43-3.jpg)
ログインすると、Googleアナリティクスの画面が開きます。
中央にある「測定を開始」ボタンをクリックして次に進みます。
![Google Analyticsのアカウント作成画面](https://noveblo.com/wp-content/uploads/2023/08/43-4.jpg)
まず最初にアカウントを作成します。
アカウント名(運営サイトの名称や会社名、個人名にすることが多い)を半角で入力します。
![Google Analyticsのアカウント作成画面(スクロール後)](https://noveblo.com/wp-content/uploads/2023/08/43-5.jpg)
画面をスクロールすると、共有設定に関する4つのチェック項目があります。
不要な項目や共有したくない項目があればチェックを外しますが、基本的には全部にチェックを入れておいて問題ありません。
チェック後、次へをクリックします。
プロパティ、データストリームを作成し、測定IDを取得する
![Google Analyticsのプロパティ作成画面](https://noveblo.com/wp-content/uploads/2023/08/43-6.jpg)
次にプロパティを作成します。
まずプロパティ名(サイト名などにすることが多い)を入力し、日本国内で使用されるサイトであれば、タイムゾーンと通貨は「日本」に設定します。
プロパティとは、データ収集や解析の基本単位のこと
プロパティには固有のIDが与えられ、これを使ってウェブサイトやアプリに設置する追跡コード(測定ID)が生成されます。
![Google Analyticsのビジネスの説明選択画面](https://noveblo.com/wp-content/uploads/2023/08/43-7.jpg)
プロパティ作成後、ビジネス詳細について該当する項目を選択します。
![Google Analyticsのビジネス目標選択画面](https://noveblo.com/wp-content/uploads/2023/08/43-8.jpg)
続いてビジネス目標を選択します。
こだわりなど無ければ、全てチェックしておきましょう。
![Google Analyticsの利用規約同意画面](https://noveblo.com/wp-content/uploads/2023/08/43-9.jpg)
利用規約のダイアログボックスが表示されます。
最初は地域がアメリカ合衆国(規約は英語表示)になっているので、サイトの運用エリアに変更します。
規約を確認したらチェックを入れ、「同意する」をクリックします。
![Google Analyticsのデータ収集を開始する表示画面](https://noveblo.com/wp-content/uploads/2023/08/43-10.jpg)
データ収集先を「ウェブ」「Androidアプリ」「iOSアプリ」から選択します。
EC-CUBEはWebサイトなので「ウェブ」を選択します。
![Google Analyticsのデータストリームの設定画面](https://noveblo.com/wp-content/uploads/2023/08/43-11.jpg)
データストリームを設定します。
ECサイトのURLとストリーム名(サイト名などにすることが多い)を入力し、ストリームを作成します。
データストリームとは、GA4で導入された概念で、Webサイトやアプリからのデータの流れのこと。
データストリームを作成すると、「測定ID」が生成されます。これをサイトやアプリに設置すると、ユーザーの行動などのデータを収集できるようになります。
![](https://noveblo.com/wp-content/uploads/2023/08/43-12.jpg)
データストリームを作成すると、測定IDが表示されます。
この測定IDをサイトに埋め込むため、画面上部もしくは下部にある「タグの実装手順を表示する」をクリックします。
![](https://noveblo.com/wp-content/uploads/2023/08/43-13.jpg)
「手動でインストールする」のタブを開くと、Googleタグが表示されます。
このコードをコピーします。
以上で、Google Analytics側での操作は終了です。
![データ収集前のGoogle Analyticsの画面](https://noveblo.com/wp-content/uploads/2023/08/43-14.jpg)
ちなみに、Googleタグを実装する前はこのような表示になっています。
GoogleタグをEC-CUBEのTwigテンプレート(default_frame.twig)に挿入する
最後に、STEP 2でコピーしたGoogleタグをECサイトに埋め込みます。
埋め込む方法はいくつかあるのですが、今回はEC-CUBEの全ページに影響を与える基本のテンプレート「default_frame.twig」に埋め込む方法を紹介します。
まずファイルサーバーを開き、「src/Eccube/Resource/template/default」の「default_frame.twig」を「app/template/default」に複製します。
『default_frame.twig』の格納場所
![default_frame.twigの格納場所_FTP](https://noveblo.com/wp-content/uploads/2022/08/24914c8a592b747ce52b5e72e7cb9d4f.jpg)
ファイルをapp下にコピー
![default_frame.twigのコピー先_FTP](https://noveblo.com/wp-content/uploads/2022/08/49fa86fbc931492bd882ac2ca7c4d453.jpg)
ファイルを複製せず、オリジナルを修正しても対応できますが、記述ミスなどで取り返しがつかなくなる可能性があります。
基本的にはオリジナルファイルはそのままにしておき、コピーしたものを修正した方が安全です。
コピーしたファイルを開き、40行目付近({% block stylesheet %}{% endblock %}の下)にGoogleタグを挿入します。
これで、初期設定はすべて完了です。
タグ挿入後、約48時間で無事データ収集が始まりました。
![Google Analytics 4の画面(Googleタグをサイトに埋め込んだ直後で、まだデータ収集が行われていない状態)](https://noveblo.com/wp-content/uploads/2023/08/43-15.jpg)
![Google Analytics 4の画面(Googleタグをサイトに埋め込み、データ収集が開始された状態)](https://noveblo.com/wp-content/uploads/2023/08/43-16.jpg)
以上、EC-CUBEでGA4を導入する手順を紹介しました。
Webサイトを改善し、売上アップを目指すためにはユーザー行動のチェックは必須です。
EC-CUBEインストール後、早めに設定しておきましょう!