ShopifyでGoogleタグマネージャーを10分で設定する方法

この記事ではShopifyでGoogleタグマネージャー(Google Tag Manager, GTM)を10分で設定する方法を2つ紹介します。

  1. 自動設定:ShopifyアプリPafit Tag Managementを利用する方法
  2. 手動設定:Shopifyのテーマのコードを編集する方法

Pafit Tag ManagementならGA4や、Facebook広告、Twitter広告などの広告サービスの計測タグの設定も一括で行えるため、設定時間を大幅に短縮することができます。

自動設定:アプリを利用してタグマネージャーを設置する方法

GoogleタグマネージャーをShopifyに導入する際、弊社が提供するShopifyアプリPafit Tag Managementを使う方法もあります。

手動設定の方法では導入後のタグやトリガー、変数の設定は面倒です。

そこで、Shopifyアプリを使うことで、タグマネージャーの導入とタグやトリガー、変数の設定を一括で行うことができます。

例えば、GoogleアナリティクスやGoogle広告、Facebook広告、Yahoo!広告などのタグをそれぞれ設定すると時間が掛かります。また、設定を間違えないように各サービスのドキュメントを見ながら設定するのは面倒です。

弊社が提供しているShopifyアプリのPafit Tag ManagementならGTMの導入とタグやトリガー、変数の設定を一括で行えます。さらにコーディング不要でデータレイヤー(datalayer)の用意も行います。

詳細は以下のページからご確認ください。

Googleタグマネージャーの設定とGA4・Facebook広告などのデータ収集を簡単にするアプリ | Shopify App Store
Pafit Tag Managementは、Shopifyでのデータ収集とGoogleタグマネージャーの設定を簡単にするアプリです。ShopifyのECサイトのGoogleタグマネージャーの設定を簡略化し、Googleアナリティクスや各広告サービスにおけるデータ収集をサポートします。 Paf...

手動設定:テーマのコードを編集してタグマネージャーを設定する方法

今回はShopifyテーマ「Dawn」を利用している際のGoogleタグマネージャーの設定方法をご紹介します。その他のテーマをお使いの際も同様に設定できますので、ご安心ください。

ただし、注意点としては関係のないコードを編集しないようにお気をつけください。心配な方は2番目の方法であるShopifyアプリの利用をご検討ください。

それでは、Shopifyのテーマのコードを編集し、Googleタグマネージャーを設定する4つのステップをご紹介します。

  1. タグマネージャーのアカウントの作成(タグマネージャーのアカウントをお持ちの方は手順2へ)
  2. タグマネージャーのコンテナの選択
  3. タグマネージャーのコードをShopifyのテーマ内に貼り付け
  4. 必要に合わせてタグの設定と公開

手順1: タグマネージャーのアカウントの作成(タグマネージャーのアカウントをお持ちの方は2番へ)

アカウント作成の方法は動画でも確認できます。

Googleタグマネージャーのホームページへ移動し、ログインを完了します。次に「アカウントを作成」を選択します。

Googleタグマネージャーのアカウント作成ボタン

次にアカウント名やコンテナ名を入力します。また、ターゲットプラットフォームは「ウェブ」を選択します。最後に作成を選択します。
アカウント名はご自身の会社名や店舗名、コンテナ名はショップのURLを入力してください。その他の情報を入力することもできますが、上記の情報入力をおすすめします。

Googleタグマネージャーのアカウント作成2

利用規約を確認の上、「はい」を選択します。
EU圏内向けにサービスや商品を提供している場合はデータ処理規約をご確認の上、チェックを入れるかをご検討ください。

Googleタグマネージャーのアカウント作成3

アカウントを新規作成した方は、次は手順3を行います。

手順2: タグマネージャーのコンテナの選択

アカウントをすでにお持ちの方はGoogleタグマネージャーのすべてのアカウントの画面で既存のコンテナを使うか、新しいコンテナを作成するか選択します。

Googleタグマネージャーのコンテナ作成方法

画面右上の「GTM-XXXXX」を選択します。

GoogleタグマネージャーのコンテナIDのコピー方法

手順3: タグマネージャーのコードをShopifyのテーマ内に貼り付け

タグマネージャーのコードをShopifyのテーマ内に貼り付ける方法は動画でも確認できます。

「テーマ」→「アクション」→「コードを編集する」を選択します。

Shopifyのテーマのコード編集を行う手順

合計3箇所に貼り付ける必要がありますので、1箇所ずつ説明します。

1箇所目:theme.liquidの<head>内上部に追加

ピンク枠で囲まれたアイコンをクリックし、タグマネージャーのコードをコピーします。

Googleタグマネージャーのコンテナスニペットのコピーボタン

theme.liquidの <head> 内のなるべく上のほうに貼り付けます。
今回利用しているテーマ「Dawn」では、9行目の下に貼り付けました。

Shopifyのテーマのコード編集におけるペーストの箇所

2箇所目:theme.liquidの<body>直下に追加

ピンク枠で囲まれたアイコンをクリックし、タグマネージャーのコードをコピーします。

Googleタグマネージャーのコンテナスニペットのコピー2

theme.liquidの <body> タグの直下に貼り付けます。


3箇所目:チェックアウト設定の追加スクリプトに設定

最後にチェックアウトページの追加スクリプトにもタグマネージャーを導入します。(注文完了ページでコンバージョンなどの広告タグを利用するための作業になります。)
ピンク枠で囲まれたアイコンをクリックし、タグマネージャーのコードをコピーします。

Googleタグマネージャーのコンテナスニペットのコピーボタン

「設定」→「チェックアウト」を選択します。

Shopifyの設定からチェックアウトを開く方法

ページ下部の「追加スクリプト」の「注文状況ページ」に貼り付けます。

Shopifyの設定から追加スクリプトを編集

手順4: 必要に合わせてタグの設定と公開

以上で作業は完了となります。

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

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

👇便利なShopifyアプリのご紹介👇

タイトルとURLをコピーしました