BLOG

ブログ

TOP

BLOG

ShopifyにGA4を設置(Shopify Plusを利用せず)

すべてStudio
Studioテンプレート
Studioはじめてみた
Shopify
ネットショップ
デザイン
MA/CRM
初心者EC
世界一周

2023/11/6

[ 初回公開日:

ShopifyにGA4を設置(Shopify Plusを利用せず)

この記事の結論として、GA4に詳しいエンジニアがいない場合には、有料のShopifyアプリを利用して、Google Tag Manager経由でGA4の設置をオススメします。

理由はGA4のタグを設置すること自体は難しくないですが、UA(GA3)と違ってネットショップの分析に必要な設定を追加で行う必要があり、しっかりをそれを網羅することは中小企業やエンジニアのいないネットショップにはハードルが高いからです。

店長や経営者がそこに時間をかけるくらいなら、有料のアプリの費用のほうが絶対安く済みます(海外の記事とかも調べて四苦八苦した本人の結論ですww)

この記事のポイント

  • ヘッダーと注文完了ページにGA4またはGTMのタグを貼るだけでは駄目なのか?

  • Shopifyの通常プランではCheckoutページにタグが貼れない

  • Checkoutページにタグが貼れないけど、注文関連の計測は正しく行われるのか?

  • Checkoutページへのタグの設置はアプリ経由で対応予定との発表あり

  • 諸々踏まえて、ShopifyへのGA4の設置はGTMを設置する有料アプリの導入がオススメ

1.この記事を読むにあたっての補足

  • UA = Universal Analytics = GA3 = Google Analytics version 3

  • GA4 = UAは実際にはGA3のため、最新のGAはGA4と呼ばれている

  • GoogleTagManagerについてはこの記事ではGTMと記載

  • GA4のタグはGTM経由で設置する(ShopifyにはGTMを設置)

  • GTMやGA4のアカウント作成についてはこの記事では説明は省略

2.はじめに

来年2023年7月1日に現行のGoogleAnalyticsであるUniversal Analytics(UA)の提供が終了することになり、GA4の本格運用(ちゃんと設定)が必要になりました。

GA4はUAとはまったく別物と思って運用を検討する必要がありますが、特にECサイトにおいてちゃんとした設定が必要です。しっかりと設定しておかないと、注文件数などECとしての基本データを計測することができません。

単にGA4をShopifyに設置しただけではGA4での注文件数や売上などの計測ができません。(当然ですが、Shopifyの管理画面上での分析はできます。)

また、GA4の設定を手動で確実に行うにはそれなりに知識が必要になりますし、仮に設定できたとしてももしミスがあってちゃんと計測できていなかったことがわかっても過去に戻ってデータの修正はできません。

これらの事情から、社内にGA4に詳しいエンジニアがいるような場合を除き、当面は有料のアプリを導入することをオススメします。

アプリを導入することで注文件数や注文金額だけでなく、その他にもいろいろな分析ができるように設定が追加されます。

3.UA(GA3)からGA4へ、昨対比

この記事を閲覧いただいている方は既にご存知のことだと思いますが、簡単に触れておきます。

Googleから何度かアナウンスがありましたが、最終的にUAによる計測が2023年7月までということが正式に発表されました。

それまでに、UAからGA4へ移行してください、ということではありますが、重要なポイントとしては「昨対比」が見たいのであれば2022年6月30日までにGA4をしっかりと設定しておく必要があります。

※この記事を執筆時点では既にその期限は過ぎていますので、GA4の設置がまだの場合には早めに設定することをオススメします

4.ShopifyはGA4に対応していない

3つのポイント

  • UAのように管理画面にGA4用のトラッキングコードを入力する箇所が無い

  • 全ページをトラッキングできるのは大規模サイト向けのShopify Plusのみ

  • とはいえ、購入完了(コンバージョン)も含めcheckoutページ以外の計測はできる

早めにGA4を設置したほうがいい、UAでの計測・分析ができなくなる来年7月の時点から昨対比を見るためには2022年6月30日までにGA4の設置が必須、とはいえ、実はShopifyはまだGA4に正式対応していません。

具体的には、UA同様にShopifyの管理画面のどこかにGA4のトラッキングコードの入力欄があって、そこに設置するだけでEC分析に必要な基本的な情報が「全て」取得できるか、というとできない、という意味です。

UAであればGoogleアナリティクス側でeコマーストラッキングをONにして、トラッキングコードをShopifyの管理画面に入力して保存するだけでECの分析に必要な基本的な情報は全て取得できます。

しかし、Shopify管理画面上にGA4のトラッキングコードの入力欄はありません。 また、詳細はこのあとの章で記載しますが、トラッキングコードをShopifyのテーマに直接貼り付けてたとしても全てのページの情報が取得できるわけではありません。

具体的には、決済関連の情報(名前や住所、配送先、支払い)を入力するcheckout ページへトラッキングコードを設置することができません。(月額$2,000〜のShopify Plusであれば設定できます。)

5.ShopifyでGA4を設置する方法

  1. GA4またはGoogleTagManager(GTM)を手動で設置する

  2. Shopifyアプリを利用する ← 有料ですがこちらがオススメ

GA4を設置するか、GTMを設置してGTM経由でGA4の計測を行うか、どちらの場合でもテーマと管理画面の一部にトラッキングコードを設置すること自体に変わりはないのでここではGTMタグの設置のみを説明します。(GTMへのGA4の設定は検索するとたくさんでてきますのでここでは割愛します。)

Shopifyアプリを利用することのメリットは、設置が簡単ということだけではなく、GA4にて計測するべきイベントの設定まで自動でやってくれるところです。

GTMタグを設置し、GA4を発火(計測)するだけであればわざわざ有料アプリを導入する必要はなく、手動で設置すればよいのですが、GA4にてしっかりと分析するためには各種イベントの設定が必要になります。

Shopify側がGA4に正式対応するタイミングでこのあたりがどこまでワンセットになるのかわかりませんが、それを待っているわけにも行かないですし、Checkoutページの計測についてはアプリ経由、というような発表もあるのでいずれにせよ現時点からアプリでの設置をしておいたほうが良いのかと思っています。

5−1.ShopifyでGA4を設置する方法1(GTMを手動で設置)

GTMのタグを3箇所に設置します。

Google Tag Managerのスニペット

1箇所目と2箇所目
Shopifyの管理画面へログインし、オンラインストア → テーマ → アクション → コードを編集する、へ移動

コードを編集

  • 1箇所目: theme.liquidにある<head>の中
    GTMのトラッキングコードの<head>内に記載するコードをコピーし、theme.liquidの<head></head>の中に貼り付ける。<head></head>の中であれば基本的にはどこでも大丈夫。

theme.liquidのhead
  • 2箇所目: theme.liquidにある<body>の中
    GTMのトラッキングコードの<body>内に記載するコードをコピーし、theme.liquidの<body>の直下に貼り付ける。

theme.liquidのbody

3箇所目
Shopifyの管理画面へログインし、設定 → チェックアウト、へ移動

  • 3箇所目: 注文状況ページ

    「注文状況ページ」にある「追加スクリプト」に1箇所目の<head>にコピペしたコードと同じものをコピペ

注文状況ページ

5−2.ShopifyでGA4を設置する方法2(GTMをアプリで設置、GA4のイベント設定も)

現時点でGTMを設置するアプリは5つくらいありますが、日本語対応(日本企業)しているものは1つのみです。
ShopifyアプリストアでGoogle Tag Managerを検索

日本の企業のアプリはPafit Tag Management for GTM というアプリです。
2日間のお試しがあるのでテストしてみましたが、アプリをインストールしてあとはアプリ内の指示に沿って設定することで簡単に設定できました。

Pafit Tag Management for GTM

弊社で運営するECサイトはあえて海外製のアプリ Easy Tag ‑ GTM & Data Layer を導入(※1)していますが、大枠として、GTMを設置し、GA4による計測を行う、さらに各種分析を行うための各種「イベント」をあらかじめ設定してくれる、という点ではどのアプリでも大差はないと思います。

あとは、日本語対応しているか、料金はどうなっているか、GA4以外にも広告との連携など自社に必要なタグの設置に対応しているか、など細かい違いについては比較する必要があります。

アプリの設置及びその後の設定については各アプリ内の流れに沿うことでGA4のイベントの設定などもサクッと完了します。ので、その辺りは割愛します。

※1 機能に大きな差が無いのであれば何かあったときのサポートも含め日本企業のアプリが安心ではありますが、トラブル対応(だいたいスムーズにいかないのでww)のやりとりも含め経験として積極的に海外製アプリを試しています。
そして、想定通り一発では設定が完了せず、メールで何回かやりとりして無事設定できました(笑)
開発者はブルガリの首都ソフィアの方らしいです。

ブルガリア懐かしい、ペトカ地下教会、アレクサンダル・ネフスキー寺院、そして最大の名所リラの僧院、ヨーグルト・・・話しがそれました、すみません。

6.まとめ

推奨イベント、カスタムイベント、データレイヤー、イベントパラメーター、これらの単語とやるべきことがパッと想像できない店長や経営者の方は、有料のShopifyアプリの導入を強くオススメします。

GA4はこれまでのGoogleアナリティクスとは全く別物、GA4関連の情報量、各ECカートの正式対応状況がまだ先であることを踏まえると自分たちで調べて設置して、正しく動作、分析をするには相当ハードルが高いです。

冒頭に書いたこの記事のポイントへの回答を簡単に記載して、まとめてさせていただきます。

  • ヘッダーと注文完了ページにGA4またはGTMのタグを貼るだけでは駄目なのか?
    → はい、駄目です。アクセス数などの基本的な情報は取得できますが、ECサイトにとって最も重要なコンバージョン(注文)関連の指標を取得するにはGA4またはGTMでの追加の設定が必須となります。

  • Shopifyの通常プランではCheckoutページにタグが貼れない
    → 月額$2,000〜のShopify Plusではない通常プラン(3つ)ではCheckoutページへのタグの設置ができません。現時点ではアプリ経由でもこの点は同じです。(将来的にはアプリ経由で対応予定との発表あり)

  • Checkoutページにタグが貼れないけど、注文関連の計測は正しく行われるのか?
    → はい、できます。厳密には、カート〜注文完了までが30分以内であれば問題なくできます。Checkoutページにはタグは貼れないのですが、注文完了画面だけは管理画面からタグの設置ができるのでセッションが切れない30分以内(標準設定)であれば計測可能です。
    例)商品ページ → カートに追加 → カートページ → Checkoutページ(一旦計測できなくなる) → 注文完了ページ(再計測)、という流れです。

  • Checkoutページへのタグの設置はアプリ経由で対応予定との発表あり
    → Shopifyから「アプリを使ったShopifyチェックアウトの拡充」という発表がありました。

  • 諸々踏まえて、ShopifyへのGA4の設置はGTMを設置する有料アプリの導入がオススメ
    → ここまで読んでいただいた方であれば、既に有料アプリの導入で心が決まっていることでしょう(笑)

今回も最後までお読みいただき、ありがとうございました。


関連記事


この記事を書いた人

一覧に戻る

おすすめ記事

CONTACT

お問い合わせ・ご相談はこちら

IT+

株式会社アイティプラス

〒150-0001 東京都渋谷区神宮前3-25-18
THE SHARE 2F

チャネルトーク

チャネルトーク認定パートナー

Shopify Partners

shopify認定パートナー

Studio Templates

「Studio Store」にて、テンプレート販売中

STUDIOテンプレート 和食
STUDIOテンプレート 病院
STUDIOテンプレート 和食

©2014  ITPLUS, Inc.