fbpx

ShopifyでのGoogleタグマネージャーの設定方法と確認方法

Shopifyを運用していく上で、ストアページにGoogle Tag Manager(グーグルタグマネージャー)を利用したいと思っている方は多いかと思います。

例えば、ショップページへの流入経路は気になるところです。Googleでの検索結果から流れてきたのか、他サイトに貼った広告リンクからなのか。これらのマーケティング分析のためにはGoogleアナリティクスの設定が必要です。
また、広告を出すためにはGoogle広告の設定が必要となります。

これらは通常、個別に計測用のタグを埋め込んでいかなければいけませんが、Googleタグマネージャーを使えばタグを一元管理できます。

ここではShopifyでのGoogleタグマネージャーの設定について説明します。

Googleタグマネージャー(GTM)とは?

Googleタグマネージャーページより引用

Googleタグマネージャー(以下、GTM)とは、Googleが提供するサイト分析用のタグを一元管理できるツールです。

通常、GoogleアナリティクスやGoogle広告などを利用するには、HTMLページに直接計測用のタグを埋め込む必要があります。

しかしその場合サイトに修正が必要になったときに、どこのページにどのタグを埋め込んでいるのか把握しておかなければいけません。また、すべてのタグに修正を加えるのは非常に手間のかかる作業です。

GTMを使用すれば、GTMの管理画面からGoogleの分析用タグを管理できるようになります。

GTMを実装するにはShopify Plusが必要?

基本的には、Shopify Plusのみしか対応されていませんが、以下のリンクにあるようにハックルベリーの「アフィリエイト連携」アプリを使うと安価にGoogle Tag Managerを導入することが可能です。

https://prtimes.jp/main/html/rd/p/000000020.000068061.html

ShopifyでもGTMを利用することが可能ですが基本的には上記アプリを使う以外で、GTMを利用できるのはShopify Plusプランのみとなります。通常プランではGTMは利用できませんのでご注意ください。

GoogleアナリティクスやGoogle広告を個別に利用することは、通常プランでも可能です。

ShopifyでのGTM設定方法

GTMアカウントを開設

GTM自体は誰でも無料で利用ができます。GTMのページの「無料で利用する」ボタンから利用を開始しましょう。

  1. 新規にアカウントを作成するか既存のGoogleアカウントでログインします。
  2. 画面右上の「アカウントを作成」ボタンをクリック
  3. 任意のアカウント名を設定し、国を選択します。
  4. 任意のコンテナ名を設定します。コンテナはドメインごとに作成するのをおすすめします。

ターゲットプラットフォームについては「ウェブ」を選択し「作成」ボタンをクリックします。

  1. 利用規約が表示されるので確認の上同意します。
  2. 次の画面でタグが2つ表示されます。ここでいったんShopifyの操作に移ります。

ShopifyからGTMタグを挿入

GTMで取得したタグをShopifyに設定します。

  1. Shopify管理画面の「オンラインストア」をクリックします。
  2. 「テーマ」をクリックします。
  3. テーマのドロップダウンリストより「コードを編集する」をクリックします。
  4. GTMで表示されたうちの最初のタグをコピーします。
  5. theme.liquidとcheckout.liquidの<head>タグの直下にペーストします。
  6. GTMで表示された2番目のタグをコピーします。
  7. theme.liquidとcheckout.liquidの<body>タグの直下にペーストします。
  8. 「保存」ボタンをクリックします。

GTMでタグを設定

  1. GTMの画面に戻り、ナビゲーションから「タグ」をクリックします。
  2. 「新規」ボタンをクリックします。
  3. 任意のタグを設定します。
  4. 任意のトリガーを設定します。
  5. 「保存」ボタンをクリックし、タグ名を設定します。
  6. 画面右上の「公開」ボタンをクリックします。

設定を確認するには?

Google製のChrome拡張機能「Tag Assistant Legacy」で確認

Google Chromeの拡張機能である「Tag Assistant Legacy(by Google)」をインストールします。

  1. chromeウェブストアへアクセスし、「ストアを検索」からTag Assistant Legacy(by Google)を検索します。
  2. 「Tag Assistant Legacy(by Google)を追加しますか」のメッセージが出るので「拡張機能を追加」ボタンをクリックします。
  3. インストールが完了したらChromeの拡張機能にGoogle Tag Assistantのアイコンが表示されます。
  4. タグを確認したいページでGoogle Tag Assistantのアイコンをクリックします。
  5. 初回のみ、どの項目をチェックするかの画面が表示されます。特に指定がなければ「Done」ボタンをクリックします。
  6. Google Tag Assistantウィンドウが表示されるので「Enable」ボタンをクリックします。
  7. ページを更新します。
  8. Google Tag Assistantのアイコンの色が緑になれば正常に設定できています。アイコンの色が変わっている場合は、アイコンをクリックしてメッセージを確認し対処しましょう。

アイコンの色の意味はそれぞれ次のとおりです。

緑:異常なし
青:タグの設定に改善案がある
黄:結果に影響を与える可能性がある
赤:致命的なエラーがある

Googleタグマネージャーのプレビュー機能を使用

Googleタグマネージャーのプレビューモードで確認する方法もあります。

  1. GTMにログインします。
  2. コンテナを選択します。
  3. 画面右上の「プレビュー」ボタンをクリックします。
  4. ポップアップウィンドウの「URL」欄にショップのURLを入力し「Start」ボタンをクリックします。
  5. うまくタグが設定されていればポップアップウィンドウに「Connected!」の表示がされるので「Continue」ボタンをクリックします。

起動しない場合は、タグの設定に誤りがあるかもしれませんのでShopifyに追加したタグを見直しましょう。

  1. デバッグを止めるには画面左上の「×」ボタンをクリックし、ポップアップウィンドウの「Stop Debugging」ボタンをクリックします。

まとめ

Shopify Plusを利用しているならば、ストア分析にはGTMを使用するのが効率的です。ただ、Plusじゃない店舗が大多数ですので、アフィリエイトアプリの機能を利用を検討するのがコストパフォーマンスの良いやり方かと思います。

GTMはGoogleアナリティクスやGoogle広告などのタグを一元管理してくれるので、うまく活用すると店舗の運営スピード等を加速することができるので、是非導入検討してみてください。

また、ShopifyにGTMを導入したらGoogle Tag AssistantをChromeにインストールしてタグが正常に設定されているか確認しましょう。

この記事をお読みになった皆さんが、SEO対策やマーケティングに、ぜひGTMを有効活用頂けることを願っています。

 

SNSでもご購読できます。