【初心者】Shopifyの2種類のGoogleアナリティクスを設定する方法(GA4とUA)

ShopifyストアでGA4(Googleアナリティクス4)とUA(ユニバーサルアナリティクス)の2種類の導入方法を紹介します。今回はGoogleタグマネージャーを利用した導入方法を各ステップごとに画像を利用して説明します。
また、Shopify以外のサイトでもほぼ同様の手順になりますので、ぜひ本記事をご覧ください。

2021年9月時点では、Shopifyストアの設定画面からUA(ユニバーサルアナリティクス)を設置することができます。GA4を導入するには別途手動対応が必要になります。
拡張性のあるタグマネージャーを利用することで、ShopifyでGA4を導入することができます。

ShopifyでGoogleタグマネージャーを導入する方法

ShopifyにGoogleタグマネージャーを設置していない方は、以下の記事を参考にGoogleタグマネージャーの設置をお願いします。

ShopifyでGoogleタグマネージャーを10分で設定する方法
この記事ではShopifyでGoogleタグマネージャー(Google Tag Manager, GTM)を10分で設定する方法を2つ紹介します。 1.Shopifyのテーマのコードを編集する方法、2.Shopifyのアプリを利用する方法。注意点としては関係のないコードを編集しないようにお気をつけください。心配な方は2番目の方法であるShopifyアプリの利用をご検討ください。

 

GoogleタグマネージャーでのGA設定方法

分析ツールのGoogleアナリティクスをタグマネージャーで設定する方法は2パターンあります。
詳細なデータ分析や広告配信にこだわりたい方はアプリの使用をオススメします。

  1. Googleタグマネージャーで手動設定するパターン
  2. Shopifyアプリ「Pafit Tag Management」を利用するパターン

手動設定:GA4のプロパティを作成

まずはShopifyのオンラインストアでGoogleアナリティクス4を手動設定する方法をご紹介します。

Googleアナリティクスにログイン

Googleアナリティクスアカウントにログインします。(Googleアカウントをお持ちでない方はアカウントの作成を行います)
ログインできると、以下のようなホーム画面が表示されます。
また、画面左下の「管理」をクリックし、管理画面に移動します。

ユニバーサルアナリティクスのホーム画面

ここまでの作業ができたら、次のステップに移ります。
現在Googleアナリティクスを利用しているかどうかで作業が変わります。

  • A:UA(旧Googleアナリティクス)を利用したことがなく、新規サイトを作成した方などはこちらをご覧ください
  • B:すでにサイトを運営中かつUA(旧Googleアナリティクス)を利用中の方はこちらをご覧ください

UAを利用中かどうかは管理画面からも確認できます。(UA-XXXXX)などUAから始まるプロパティを利用している場合は、UA利用中となります。

Googleアナリティクス(UA)の管理画面1
Googleアナリティクス(UA)の管理画面2

A:新しいプロパティを作成(UA未利用で新規サイトの場合)

動画でも作業手順をご紹介しています。

Googleアナリティクスの管理画面で「プロパティを作成」をクリックします。

ユニバーサルアナリティクスの設定画面(新規プロパティを作成)

プロパティを作成する画面で以下のように設定します。

  • プロパティ名:ドメイン名 (Shopify)
    • お好きな名称を設定できます
  • レポートのタイムゾーン:日本
    • 日本で運営しているサイトの場合はタイムゾーンは日本を選択します
  • 通貨:日本円(JPY)
    • サイトで利用している通貨が日本円の場合、日本円を選択します
  • 詳細オプション
    • ユニバーサルアナリティクスプロパティの作成トグル:オン
    • ウェブサイトのURL:ドメイン名
    • Googleアナリティクス4とユニバーサルアナリティクスのプロパティを両方作成する:オン
ユニバーサルアナリティクスの設定画面(新規プロパティの設定内容)

上記の設定が完了できたら、画面株の「次へ」をクリックします。


次にビジネスの概要を入力します。
入力は必須ではないため、任意入力を行います。ShopifyでECサイトを運営されている方は「オンライン販売を分析する」などピンクの枠で囲まれた項目にチェックを入れると良いと思います。

次に「作成」ボタンをクリックします。

ユニバーサルアナリティクスの設定画面(ビジネスの概要の設定)

タグマネージャーでGA4を設定

プロパティ作成後に以下の画面が表示されます。「測定IDをコピー」します。
この測定IDはタグマネージャーに後ほど入力します。

Googleアナリティクス4の設定画面(測定IDのコピー方法)

タグマネージャーのワークスペース画面に移動し、タグの「新規」をクリックします。
タグマネージャーを導入していな方はこちらをご覧ください。

Googleタグマネージャーの新規タグの追加ボタン

タグの設定をクリックし、タグタイプを選択で「Googleアナリティクス:GA4設定」を選択します。

GoogleタグマネージャーのGA4設定追加方法

タグ名を「GA4 – Configuration – All Pages」にし、測定IDに先程コピーしたGA4プロパティのIDを貼り付けます。
次にトリガーの部分をクリックします。

GoogleタグマネージャーのGA4タグの最終設定内容

トリガーの選択画面で、「All Pages」を選択します。
すべてのページでpage_viewイベントなどを記録するためのトリガーになります。

GA4のトリガー

タグの画面で「保存」をクリックします。

Googleタグマネージャーのタグの保存ボタン

続けてタグマネージャーでUAを設定

タグ一覧画面で「新規」を再度クリックします。

Googleタグマネージャーの新規タグのボタン

タグの設定をクリックし、タグタイプを選択する画面で「Googleアナリティクス:ユニバーサルアナリティクス」を選択します。

Googleタグマネージャーのユニバーサルアナリティクスの選択

Googleアナリティクス設定の「設定変数を選択」をクリックします。

GoogleタグマネージャーのGoogleアナリティクス設定の変数

「新しい変数」をクリックします。

GoogleタグマネージャーのGAの新しい変数の洗濯方法

名称を「Constant – UA Settings」にし、トラッキングIDに「UA(旧Googleアナリティクス)のトラッキングID」を入力します。

Googleタグマネージャーのユニバーサルアナリティクス変数の設定内容

トラッキングIDは先程作成したプロパティの「UA-XXXXXXXX」の管理画面のプロパティ設定から確認できます。

ユニバーサルアナリティクスの設定画面(トラッキングIDのコピー方法)

タグの名称は「UA – Configuration – All Pages」にし、トリガーは「All Pages」にします。
そして、「保存」をクリックします。

GoogleタグマネージャーのUAタグの保存

次に本番環境で設定を有効化するために、右上の「公開」をクリックします。

Googleタグマネージャーの公開ボタン

最後にバージョン名を「GA4とUAの設定」などにし、「公開」をクリックします。
バージョン名はお好きな文言でも大丈夫です。

Googleタグマネージャーの公開2

以上でGA4とUAをタグマネージャーで導入することができました。
また、Googleのアナリティクスでユーザーの行動データを収集できるようになりました。


B:GA4設定アシスタントからプロパティ作成(UA利用中の場合)

UA(旧Googleアナリティクス)を利用中の方向けにGA4設定アシスタントからGA4プロパティを作成する方法をご紹介します。

UA(旧Googleアナリティクス)を使用したことがなく、新規サイトを作成した方などはこちらをご覧ください

GA4プロパティのみを作成

こちらの作業手順は動画でもご紹介しています。

まずは「GA4設定アシスタント」をクリックします。
次に「新しい Google アナリティクス 4 プロパティを作成する」の「ようこそ」をクリックします。

Googleアナリティクス4の設定アシスタント

表示されたポップアップの「プロパティを作成」をクリックし、GA4のプロパティの作成が完了させます。
また、「他にこのウィザードでできること」のチェックボックスはオフのままで大丈夫です。

Googleアナリティクス4の設定アシスタントからプロパティを作成

タグマネージャーでGA4をサイトに導入

GA4プロパティの作成完了後、データを記録するための設定をタグマネージャーで行う必要があります。

次に「GA4プロパティを確認」をクリックします。

GA4プロパティを確認

GA4プロパティの設定画面が表示されるため、GA4にデータを記録するための設定を行います。「タグの設定」をクリックします。

GA4の管理画面のタグの設定

先程作成したGA4プロパティをクリックします。

GA4の管理画面のデータストリーム一覧

ウェブストリームの詳細が表示されるため、「測定IDをコピー」します。
この測定IDはタグマネージャーのタグ設定で利用します。

GA4の管理画面から測定IDをコピー

タグマネージャーのワークスペース画面に移動し、タグの「新規」をクリックします。
タグマネージャーを導入していな方はこちらをご覧ください。

Googleタグマネージャーの新規タグを作成

タグの設定をクリックし、タグタイプを選択で「Googleアナリティクス:GA4設定」を選択します。

GoogleタグマネージャーのGA4設定を作成

タグ名を「GA4 – Configuration – All Pages」にし、測定IDに先程コピーしたGA4プロパティのIDを入力します。
次にトリガーの部分をクリックします。

GoogleタグマネージャーのGA4タグの設定内容

トリガーの選択画面で、「All Pages」を選択します。
すべてのページでpage_viewイベントなどを記録するためのトリガーになります。

GoogleタグマネージャーのGA4のトリガー

タグの画面で「保存」をクリックします。

GoogleタグマネージャーのGA4タグの保存

次に右上の「公開」をクリックします。

Googleタグマネージャーの公開ボタン

最後にバージョン名を「GA4を設定」などにし、「公開」をクリックします。
バージョン名はお好きな文言でも大丈夫です。

Googleタグマネージャーの公開ボタン2

以上でGA4をウェブサイトやShopifyのECサイトに導入することができました。

Shopifyアプリ「Pafit Tag Management」を利用するパターン

手動設定でタグマネージャーを利用してGAの導入を行うこともできますが、Shopifyアプリ「Pafit Tag Management」を利用するパターンもオススメです。

ユーザーが商品を閲覧、商品をカートに追加、商品を購入などのイベントをGA4で記録したい場合、基本的には別途開発が必要になります
アプリを利用するメリットは、別途開発をすることなく様々なデータを簡単に集められるようになることです。

どの商品が閲覧されたか・商品を購入されたかの情報を記録するメリットはGoogle広告などのオーディエンス作成やBigQueryでの分析に活用できます。

本アプリの詳細を知りたい方は以下のページをご覧ください。

Googleタグマネージャーの記事リスト

Shopifyでヤフーのディスプレイ広告と検索広告の測定タグを設置する方法
ShopifyでLINE広告のベースコードなどをタグマネージャーで設置する方法
ShopifyでTwitter広告のユニバーサルウェブサイトタグをGoogleタグマネージャーで設定する方法
ShopifyでSnap PixelをGoogleタグマネージャーで設定する方法
【初心者】Shopifyの2種類のGoogleアナリティクスを設定する方法(GA4とUA)
ShopifyでGoogle広告の計測タグをタグマネージャーで設置する方法
ShopifyでFacebook PixelをGoogleタグマネージャーで設定する方法
ShopifyでGoogleタグマネージャーを10分で設定する方法
タイトルとURLをコピーしました