ShopifyにGoogleタグマネージャーを追加する方法

Googleタグマネージャーとは何ですか？

Google タグ マネージャー (GTM) は 無料のタグ管理システム テーマコードを毎回編集することなく、Shopifyストアに複数のトラッキングスクリプトを追加・管理できるGTM。GTMを使用すると、以下の管理が可能になります。

• Google アナリティクス 4 トラッキング
• Facebookのピクセル
• コンバージョン イベント (購入、フォームの送信、カートへの追加)
• マーケティングおよび分析ツール用のカスタムタグ

このガイドはカバーします 2つの方法 インストール方法: ShopifyのGoogleとYouTubeアプリ経由（簡単）または手動コードインジェクション（より制御可能）、およびGTMのテスト方法 GemPagesで構築されたページ.

始める前に、次のものを用意してください。

1. GTMアカウントとコンテナID

でサインアップ Google Tag Manager.

Shopifyストア用のコンテナを作成し、コンテナID（GTM-XXXXXXX).

2. Shopify管理者アクセス

テーマを編集したりスクリプトを挿入したりするには権限が必要です。

3. 追跡計画

追跡するイベント（ページビュー、カートへの追加、チェックアウト、購入、フォームの送信）を特定します。

ShopifyにGoogleタグマネージャーをインストールする方法

GTM を Shopify に追加するための手順は次のとおりです。

方法1：Google＆YouTubeアプリを使用してGoogleタグマネージャーをインストールする（簡単）

この方法は、 クイックセットアップ 最小限の構成で。

ステップ1： に行く Shopifyアプリストア → Google & YouTubeに設定します。 OK をクリックします。 インストールを開始する.

ステップ2： インストールしたら、クリックします Googleアカウントを接続する Google 広告アカウントを接続してコンバージョン トラッキングを有効にします。

ステップ3： あなたの〜を入力してください GTMコンテナID プロンプトが表示されたら

ステップ4： どちらを選択するか 有効にするタグ（アナリティクス 4、広告、コンバージョン イベントなど）

ステップ5： セットアップを完了し、 タグの発動を確認する GTM プレビューまたは Google タグ アシスタントを使用します。

この方法の限界

• 高度なイベントやカスタムイベントに対する制御が少ない
• カスタムトリガーを使用して GTM を頻繁に使用する予定の場合は理想的ではありません

方法2: Google タグ マネージャーを手動でインストールする (高度なトラッキングに推奨)

この方法は、 フルコントロール 以下の場合に推奨されます:

• カスタムイベントを使用する
• GemPagesページでのインタラクションを追跡する
• GTM内で完全な柔軟性を求める

ステップ1： テーマコードを開く

1. Shopify管理画面で、 オンラインストア→テーマ
2. 詳しくはこちら ⋯ → コードを編集
3. ファイルをオープンする レイアウト/テーマ.liquid

ステップ2： GTMスクリプトを

次のコードを貼り付けます 開店直後 タグ:

<!-- Google Tag Manager -->
<script>
(function(w,d,s,l,i){
  w[l]=w[l]||[];
  w[l].push({'gtm.start': new Date().getTime(), event:'gtm.js'});
  var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),
      dl=l!='dataLayer' ? '&l='+l : '';
  j.async=true;
  j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
  f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');
</script>
<!-- End Google Tag Manager -->
  

ステップ3： GTM noscriptを後に追加します

同じファイルに次のコードを貼り付けます 開店直後 タグ:

<!-- Google Tag Manager (noscript) -->

<noscript>
  <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
    height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>

<!-- End Google Tag Manager (noscript) -->
  

ステップ4： 変更を保存します

詳しくはこちら Save 変更をライブストアに公開します。

GemPagesページでGoogleタグマネージャを使用する

GTMが正しくインストールされていれば、GTMで構築されたすべてのページで自動的に動作します。 GemPages、を含みます：

• ランディングページ
  
• 製品ページ
• コレクションページ

GTM を使用すると次のことが可能になります。

• CSSセレクターを使用してボタンのクリックを追跡する
• GemPagesフォーム要素からのフォーム送信を追跡する
• ページコードを編集せずに、ユーザーの操作に基づいてイベントをトリガーします

GemPages 内で追加の設定は必要ありません。

Shopifyチェックアウトの制限

Shopify は、プランに応じてチェックアウト内の追跡を制限します。

• Shopify ベーシック、Shopify、アドバンス: GTMは 完全にロードされていない チェックアウトページでは、購入の追跡は制限されています。
• Shopify プラス: GTMはチェックアウトに追加できます チェックアウト.liquid または、チェックアウトの拡張性により、完全な購入追跡が可能になります。

この制限は、GemPages や GTM ではなく、Shopify によって制御されます。

GTMのインストールをテストする方法

いずれかの方法を使用して、GTM が動作していることを確認できます。

オプション1: GTMプレビューモード

1. Googleタグマネージャーを開く
2. 詳しくはこちら プレビュー
3. ストアのURLを入力してください
4. タグアシスタントが正常に接続されたことを確認します

オプション2: ページソースチェック

• 店舗をオープンする
• 右クリック→ ページのソースを表示
• 検索する GTM-

一般的な問題とトラブルシューティング

• GTM を 2 回インストールしないでください。 Google アプリと YouTube アプリの両方と手動コード挿入を同時に使用することは避けてください。
• 直接の GA4 スクリプトと GTM を混在させないでください。 重複イベントを防ぐには、GTM を単一のトラッキング ソースとして使用します。
• タグを公開する前に必ずテストしてください。 プレビュー モードを使用して、イベントが正しく発生することを確認します。