fbpx

【無料】ShopifyにGoogleタグマネージャー(GTM)を設置する方法 | Shopify Plus でなくても簡単

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/000000039.000068061.html

ShopifyでのGTM設定方法

Step1. GTMのアカウントを取得する

1-1.タグマネージャーへアクセス

お使いのGoogleアカウントでログインしてください

1-2.【アカウント作成】をクリック

1-3.【①「アカウント名」に会社名を入力】→【②日本を選択】

※「☑Googleや他の人と匿名でデータを共有する」のチェックは必須ではございません

Step2.コンテナを設定する

2-1.【①コンテナ名を入力】→【②ウェブを選択】→【③作成】をクリック

「コンテナ名」は自由に設定できます。ドメイン名を入れておくとわかりやすいかと思います。

2-2.利用規約を読んで【はい】をクリック

Step3.コードを共有する

3-1.表示されるコードをHuckleberry担当者に共有してください

利用規約に同意すると、JavaScriptのコードが画面に表示されます。

〈head〉内に貼り付けるもの、〈body〉直後に貼り付けるもの両方を共有してください。

以上で作業終了です

あとはHuckleberry側で頂いたコードでタグ設置を行います。

設定を確認するには?

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を有効活用頂けることを願っています。