EC-CUBE4にGoogle Analyticsを埋め込んでアクセス解析を行おう！

本記事ではEC-CUBEにGoogle Analyticsを埋め込んで、アクセス解析を行う方法をいちから説明します。対象は以下の方になります。

- すでにEC-CUBE4でECサイトを運営している
- Googleのアカウントを持っていない or　持っているがGoogle Analyticsを使っていない

これらの方を対象に、運営しているEC-CUBE4のサイトでGoogle Analyticsを使う方法を説明します！

# そもそもGoogle Analyticsとは？
> Google Analytics（グーグルアナリティクス）は、Googleが無料で提供するWebページのアクセス解析サービス。

>元々はGoogleが2005年に買収した、米国のWeb解析ソリューションプロバイダー・Urchin社の技術を利用している[1][2]。 [https://ja.wikipedia.org/wiki/Google_Analytics より引用]

Google Analyticsを利用することで、どこの地域の人が、どんな端末でどのページをどれだけ見たのかの情報を収集することができます！

ECサイトの運営において、ユーザがどれだけの頻度でどのページにアクセスしているか解析するのは非常に重要です。受注情報と合わせて、サイト改善に繋げることができるからです。

# Google Analyticsを使いましょう
Google Analyticsは無料で利用することができます。サイト運営にあたり、これ利用しない手はありません。早速アカウントの作成から説明していきます。

## Google アカウントの作成
すでにアカウントをお持ちの方は飛ばしていただいて結構です。
Google Analyticsを使うには、Googleのアカウントを作る必要があります。[こちら](https://accounts.google.com/signup/v2/webcreateaccount?hl=ja&continue=https%3A%2F%2Fmyaccount.google.com%2Fintro&flowName=GlifWebSignIn&flowEntry=SignUp)からGoogleアカウントの作成を行えます。

### 基本情報の入力
名前、メールアドレス、パスワードの設定を行います。メールアドレスがすでに使用されている場合は他の文字列に変更しましょう。入力したら、次へを押します。
![キャプチャ1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264209/7c611085-344d-78ab-3e7f-efb6ced82a84.png)

### 携帯電話番号の入力
Google アカウントの作成には、携帯電話の番号が必要です。入力して、次へを押します。
![キャプチャ2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264209/33fe6239-c4ae-c290-b089-5165c5739128.png)

### 認証番号の入力
携帯電話番号を入力すると認証番号が送られてくるので入力します。
![キャプチャ3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264209/5e3fa69c-8977-9641-ac4e-15c6abe0ccc8.png)


### 生年月日などの情報入力
生年月日・性別などを入力します。携帯電話とメールアドレスの入力は任意です。
![キャプチャ4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264209/72083eda-2668-01f1-766f-4256165e3aae.png)

### 利用規約に同意する
一番下までスライドして、「同意する」を押します。
![キャプチャ5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264209/24750edb-ff91-f677-a43d-973a49b74799.png)

### アカウント作成完了！
お疲れさまでした、この画面が表示されれば、アカウントが作成されています。
![キャプチャ6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264209/4210c221-6ff3-0e4c-7a76-b490bd64f25b.png)

## Google Analyticsの設定
**この時点で、EC-CUBE4のサイトのURL(ユーザがアクセスするTOPページのhttps://から始まる文字列のことです)を用意してある必要があります！**
下の画像で黒く塗りつぶしてある文字列です。
![キャプチャ7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264209/76a2997c-d624-5086-0ffc-7ba7ce381f75.png)

### トラッキングIDを取得する
Google Analyticsを使うには、解析対象となるサイトのURLを登録する必要があります。[こちら](https://analytics.google.com/analytics/web/provision/?authuser=0#/provision/create)から登録できるので、情報を入力していきます。

- 「アカウント」には解析するサイトを複数紐づけることができますので、管理者名としての名前を付けましょう
- 「ウェブサイトの名前」は今回登録するEC-CUBE4のサイト名を入れるとよいでしょう
- ウェブサイトのURLには「http://」または「https://」を除いた文字列を入力します
- 業種は扱っている商品にあったものを選びましょう
- レポートのタイムゾーンは住んでいる国を選びましょう

![キャプチャ8.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264209/6fd5bbe2-9b73-ab0f-ec23-4511feb6814c.png)

「トラッキングIDを取得」を押して、すべての規約同意にチェックをいれると、登録完了です！

### 解析するためのスクリプトを取得する
ユーザがアクセスした際にその情報をGoogle Analyticsが取得するには、アクセスが行われるたびに情報を取得するスクリプトと呼ばれるプログラムを、EC-CUBE4に設定する必要があります。
そのスクリプトは、下の写真の部分から取得できます。これをコピーしておきます。

```javascript:スクリプトの例
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=アカウントによって値が異なります"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'アカウントによって値が異なります');
</script>


```

![キャプチャ9.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264209/5c1822d5-d7f5-74c9-c08a-648ae2c563b1.png)


Google Analyticsの設定はこれでおわりです！

## EC-CUBE4の管理画面でコピーしたスクリプトを埋め込む
先ほどコピーしたスクリプトをEC-CUBE4の設定画面で埋め込んでいきます！

### コピーしたスクリプトを実行するブロックの作成
管理画面 > コンテンツ管理 > ブロック管理をクリックします。
![キャプチャ91.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264209/1681fca1-0526-dbbf-6c6b-95f2f0dfdc47.png)

新規作成を押して、下写真のようにします。コードはコピーしたものをそのまま貼り付けてください。登録ボタンを押します。

![キャプチャ92.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264209/85f95029-7559-4787-fd15-fa4f96f76904.png)

ブロックの作成はこれで完了です。

### 各ページへの埋め込み
次は、先ほど作成したブロックを各ページに埋め込むための設定を行います！
管理画面 > コンテンツ管理 > レイアウト管理をクリックします。

![キャプチャ93.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264209/95e8c00f-831f-7770-db7d-4ef1517b2d6e.png)

全レイアウトで、下の写真のように<head></head>タグ内のところにGoogle Analyticsブロックが登録されているようにしてください。登録ボタンを押すのも忘れないように:sunglasses:

![キャプチャ96.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264209/6d08d02b-2328-d7b6-82da-e828d302705f.png)




# 設定完了です！
お疲れさまでした、これで初期設定は完了です。今、ご自身のEC-CUBEサイトのトップページを開いた状態でAnalyticsの「ホーム」を押してみてください。リアルタイムで1人以上がアクセスしている様子がわかるはずです。

![キャプチャ94.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264209/291ec717-1c54-0ffe-3a52-fc2d0b3cd809.png)

Google Analyticsはたくさんの項目があり、使いこなすのはとても大変ですが、サイト改善に必ず役に立ちます。
アクセス解析には以下の記事が参考になります。Google Analyticsを使いこなすのにぜひご活用ください！

-  [ネットショップ運営者は覚えておきたい！GoogleAnalyticsを理解するための用語集](https://shop-pro.jp/yomyom-colorme/64602)
- [小規模ネットショップのアクセス解析にGoogle Analyticsを使ってみよう](https://markezine.jp/article/detail/21141)
- [ネットショップ集客に必要不可欠。活用できるツールとは？](https://www.ocnk.net/column/2018/12/14/%E3%83%8D%E3%83%83%E3%83%88%E3%82%B7%E3%83%A7%E3%83%83%E3%83%97%E9%9B%86%E5%AE%A2%E3%81%AB%E5%BF%85%E8%A6%81%E4%B8%8D%E5%8F%AF%E6%AC%A0%E3%80%82%E6%B4%BB%E7%94%A8%E3%81%A7%E3%81%8D%E3%82%8B%E3%83%84/)