【徹底解説】Shopifyでの計測タグ管理方法についてご紹介!

「Shopify タグ」というと、商品管理・仕入管理・顧客・ブログ記事などに利用する、カテゴライズ用のタグを想起される人が多いでしょう。
しかし、今回の記事では、Googleアナリティクスや広告計測タグの管理方法について解説していきます。

広告タグや、ヒートマップツールなどをテーマファイルに記載していくと、どのタグをどこに貼ったのかわからなくなると思います。また、自分自身がわかっていても、他の業者さんが絡んだりしてしまうとゴチャゴチャしてしまいます。

どのサイトもこの問題が起こったことで、台頭してきたのが「タグマネジメントツール」となります。サイトのコードへのベタ貼りをやめて、タグマネジメントツール内で計測タグを管理しようということです。「Google Tag Manager」が一番有名なツールになります。

今回のこの記事では、そういったツールなどのご紹介なども行いながら、Shopifyでのタグ管理において、どの方法がベストプラクティスなのか、に迫っていこうと思います。

それでは早速行ってみましょう。

Shopifyで計測タグを管理する方法はある?

Shopifyでタグ管理するニーズがでてくるのは、広告運用をし始めたタイミングだと思います。
FaceBook広告やGoogle広告などの、全世界的に主要な広告媒体においては、Shopifyアプリで計測タグ設置やツール連携などができてしまいます。

GoogleとYouTubeの検索に商品を掲載して販売につなげましょう| Shopify アプリストア
Bring your products to people on Facebook and Instagram.| Shopify アプリストア

上記の媒体を出稿するにはShopifyアプリを利用すれば良いですが、それ以外の場合においては、どのようにすれば良いでしょうか?

答えは簡単で、GoogleTagManagerなどのタグマネジメントツールを利用するか、サードパーティ性のShopifyアプリを利用するといった方法になります。

ただ、一つ注意する必要があるのが、GTMを正式にShopifyに導入するには、ShopifyPlusのプランを利用しないと行けないという点です。(もちろん、GTMベタ貼りで導入することは可能です)

また、GTMを利用したShopify アプリもあるので、そちらも要チェックです。

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

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

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

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

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

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

Googleタグマネージャーの設定とGA4・Facebook広告などのデータ収集を簡単にするアプリ| Shopify アプリストア

GTMでShopifyで計測タグを管理する方法について解説!

今回は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のテーマのコード編集を行う手順

合計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: 必要に合わせてタグの設定と公開

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

Shopifyでの計測用のタグ管理方法についてまとめ

Shopifyでの計測用のタグ管理方法については、下記の方法をご紹介しました。

  • Shopifyの公式アプリを利用する(※公式が出しているものがある場合)
  • Shopify のテーマファイルにタグをコーディング
    • Shopify のテーマファイルにGoogle Tag Manager を導入する
  • Shopify アプリを利用してGoogle Tag Managerを導入する

その中でも、やはりGoogle Tag Managerを利用する方法をおすすめしています。
アプリなどを利用しても、結局はどこでなにを設置したのかわからなくなる、追加したいイベントなどがあった場合に対応できない、などが起こりうるのです。

弊社によく相談にこられるケースとして、「二重計測されてしまって…」という事例です。
二重でデータが記録されているけど、なんでかわからないということです。基本的に、タグが2重で埋め込まれているからこういった事例が起こります。

弊社のShopify アプリ「Pafit Tag Management for GTM」を利用すれば、アプリ内とGTMで一元でタグ管理ができるので、どこで計測しているかわからない…という心配はありません。

Googleタグマネージャーの設定とGA4・Facebook広告などのデータ収集を簡単にするアプリ| Shopify アプリストア

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

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