ShopifyにGA4（Googleアナリティクス4）を設定する方法

ユニバーサルアナリティクス（以下UA）の廃止まで残りわずかとなりました。
ShopifyでまだGoogle Analytics4 (以下GA4）未導入の事業者の方もいらっしゃるのではないでしょうか。
本記事では先日正式に対応となったShopifyのGoogleチャネルアプリを利用したGA4の設定方法をはじめ、Googleタグマネージャー（以下GTM）、Shopifyピクセルを使用した設定方法について解説します。

この記事ではGA4プロパティ、GTMコンテナは作成済の状態として解説していきます。なお、記事公開時点（2023年4月）の情報に基づいています。Shopify、Google Analytics、Googleタグマネージャーそれぞれに更新が入る可能性がありますのでご了承ください。
また一部Javascript、Liquidの知識が必要になる内容が含まれています。設定の際はご自身の責任において実施してください。

Googleチャネルアプリを利用する

2023年3月からShopifyにGA4が正式対応しました。
正式対応と言っても、従来のようにダグIDを管理画面の所定の場所に入力する形ではなく、Googleチャネルアプリを利用します。

Googleチャネルアプリの設定

たったこれだけの作業でShopifyとGA4の連携は完了です。
イベントとしてはGA4の標準イベントに加えて、 以下のeコマース関連イベントの取得が可能です。最低限必要な項目はそろっていますね。

まずは基本的なeコマースデータだけでも取得したいという場合にはGoogleチャネルアプリの利用が最も簡単で便利です。
注意点としては上記イベント以外のeコマースイベント（view_item_listやview_cartなど）については記事公開時点で対応していないため、計測する場合にはこのあと解説するGTMを利用する方法や、Shopifyピクセルを利用する方法で対応する必要があります。

Googleタグマネージャーを利用する

Googleタグマネージャーを利用することでGoogleチャネルアプリで取得できなかったイベントなども取得できるようになります。
公式にはGoogleタグマネージャーの対応はPlusプランのみとなっていますが、通常プランでも利用することが可能です。
また、Googleチャネルアプリを利用せずにすべてをGTMを利用した計測にすることも可能です。弊社でもこちらの測定方法をメインにGA4の設定支援を行っています。

Shopify側の設定

Shopify Plusの場合

タグマネージャーのインストール（管理 > Googleタグマネージャーをインストール）

Shopify Plus以外の場合

Googleタグマネージャー側の設定

Googleタグマネージャーから対象のコンテナを開き、タグ > 新規 をクリックしてタグを生成する

新しいタグの生成

以下の内容でタグを設定します。

タグの名称 ： 任意
タグの種類 : Googleアナリティクス ： GA4設定
トリガー : All Pages
測定ID : G-XXXXXXXXXX
※測定IDはGA4 > 設定 > データストリーム > 測定ID　で確認可能です。

GTMのプレビューから動作確認してみましょう。ページ読み込み時にpage_viewイベントが発生していたら成功です。
この時点でGA4の標準計測イベントの測定はできるようになりますが、eコマース関連イベントは別途設定が必要になります。GTMを公開するとGA4にデータが送られるようになります。

eコマース関連イベントの設定

ここではeコマースイベントのうち、最も計測が必要とされる3項目について説明します。

Shopify側の設定

view_item
商品ページで閲覧された商品データをGTMのトリガーイベントと共にdataLayerに格納する

add_to_cart
商品ページでカートに追加された商品データをGTMのトリガーイベントと共にdataLayerに格納する

purchase
購入完了（サンクス）ページで購入された商品情報、決済情報をGTMのトリガーイベントと共にdataLayerに格納する

※この処理を前述のチェックアウトの追加スクリプト欄に挿入します。

参考:view_item 商品情報の取得とdataLayerへの格納

<script>
  var items = []; 
  var item = {
     'item_name': "{{product.title}}", 
     'item_id': "{{ variant.sku }}",
     'item_brand':'{{product.vendor}}',
     'item_category': "{{product.collections[0].title}}",
     'item_variant': "{{variant.title}}", 
     'item_name': "{{product.title}}", 
     'quantity':1
  }
  items.push(item);
   
　window.dataLayer = window.dataLayer || [];
　window.dataLayer.push({
     'event': 'view_item',
     'ecommerce': {
         'items': items
 }
});
</script>

eコマース関連イベントにはイベントごとに必須のパラメータが設定されています。
詳しくはGoogleアナリティクスのガイドをご覧ください。

GTM側の設定

view_item
dataLayerの値をイベント情報（view_item）と合わせてGA4に出力する

add_to_cart
dataLayerの値をイベント情報（add_to_cart）と合わせてGA4に出力する

purchase
dataLayerの値をイベント情報（purchase）と合わせてGA4に出力する

参考:view_item GTMのタグ設定

GTM view_itemのタグ設定

2022年8月のアップデートで、GTM側のパラメータ設定を省略できるようになりました。上記画像にはitemsの設定がありますが、詳細設定のeコマースデータを送信にチェックを入れることでパラメータの記述が省略できます。

GTMを利用した際の各プラットフォームの処理イメージ

いずれのイベントもShopify側ではGTMのトリガーとなるイベントとイベントに関連するパラメータをdataLayerに格納する処理を実行します。GTM側ではdataLayerのパラメータをeコマースイベントと合わせてGA4に出力します。

Shopifyピクセルを利用する

Shopifyピクセルとは、2022年10月にリリースされた、Shopifyが提供するトラッキングピクセルです。Shopifyピクセルを使用することで、GA4をはじめとした各種トラッキングツールと連携し、ユーザーの行動データを収集することができます。

Shopify管理画面 > 設定 > お客様のイベント
新規の場合はカスタムピクセルを追加を選択

Shopifyピクセルの設定

初期化（ピクセルの追加）

GA4のグローバルサイトタグを挿入します。ピクセルはJavaScriptで記述する必要があるため、下記の形式に変換します。（G-XXXXXXXXXXの測定コードを測定するサイトのものに変更）

const script = document.createElement('script');
script.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX');
script.setAttribute('async', '');
document.head.appendChild(script);

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX' );

analytics.subscribe() APIを使用して顧客イベントを登録

analytics.subscribe('page_viewed', event => {
// イベントに応じた測定用のコードを追加
});

Shopify側で用意されているイベントは特にトリガーの設定不要で発火します。（イベントの中身の記述は必要）。
各analytics.subscribe()の中に、eコマースイベントのタグ及びパラメータ取得のためのコードを記述していきます。

現在用意されているイベント

参考:view_itemイベントピクセルのコード

analytics.subscribe("product_viewed", async (event) => {
gtag("event", "view_item", {
    currency: event.data.productVariant.price.currencyCode,
    value: event.data.productVariant.price.amount,
    items: [
        {
            item_id: event.data.productVariant.sku,
            item_name: event.data.productVariant.product.title,
            currency: event.data.productVariant.price.currencyCode,
            price: event.data.productVariant.price.amount,
            quantity: 1
        }
    ],
});
});

必要最小限のパラメータのみ記述しています。その他のパラメータについてはShopifyの公式ヘルプ(Customer Event Reference)をご確認ください。

外部アプリを利用する

Shopifyのアプリストアで公開されている各種設定アプリを利用することでもGA4を設定することができます。
多くの場合、GTMと連携することで計測を可能にしています。導入時の初期設定は自動もしくはアプリベンダー側で代行してくれることがほとんどで、マーチャント側の手間はかからないようになっています。月額費用がかかる場合がほとんどですので、費用対効果を見極めた上で利用しましょう。

まとめ

ShopifyにGA4を設定する方法

設定方法	特徴
Shopify Googleチャネルアプリを使用する	設定が簡単 測定できるeコマースイベントに制限
Googleタグマネージャーを利用する	設定難易度が高い イベント設定が自由にできる
Shopifyピクセルを使用する	やや設定難易度が高い　測定できるeコマースイベントに制限
外部アプリを利用する	設定はおまかせ 別途月額料金が発生する

今回はShopifyにGA4を設定する方法を4通りご紹介しました。方法によって難易度や自由度が異なるため、サイト分析にどういった情報が必要なのか事前に確認した上で、最適な方法で設定しましょう。
弊社ではShopifyへのGA4の設定、並びに分析業務も請け負っております。ご相談はお問い合わせフォームからお待ちしております。