GTMをShopifyに設定する方法(非公式)

※2020年8月追記
現在この記事の内容は新規で開設したShopifyストアではご利用いただけません。

GTM（Googleタグマネージャー）とは

この記事を読もうとしている方には不要かもしれませんが、まずはGoogleタグマネージャー（GTM）の概要だけ説明させてください。
Googleタグマネージャーは、Google AnalyticsやAdWords、その他の計測ツール等のタグを一元管理できるサービスです。今まではツールが増える度に直接htmlに追記する必要がありましたが、GTMを使うとhtmlに記述するのは最初だけでよく、その後のタグの追加や削除はGTM上で一元管理ができるようになります。
GTMそのものの使い方や設定方法については、この記事の主旨からは外れますので割愛させていただきます。

ShopifyでGTM設定方法

さて、ここからが本題です。
ShopifyでGTMを設定・使用するにはややテクニカルな作業が必要になります。というのも、ShopifyにはGoogle Analyticsの設定箇所はデフォルトであるのですが、GTMの設定箇所はないのです。ですので、これから「何を・どこに」設定（基本的にはコピペで完了します）すれば良いのかを順を追って説明していきます。

GTMとShopifyのサイトを行き来しますので、別のタブでそれぞれ開いたままにしておくと作業しやすいです。

【1】GTMのページでログインし、アカウントを選びます。
下の画面が表示されたら、コンテナIDをクリックします。

【2】コンテナIDをクリックすると、ポップアップでサイトに貼り付けるためのソースコードが表示されます。
まずは、下段のボックスの内容を全てコピーしてください。

【3】続いてShopifyの管理画面に移動します。
左のメニューから「オンラインストア」をクリックし、現在適用しているテーマの「アクション」から「コードを編集する」を選択します。

【4】Layoutフォルダの中にある「theme.liquid」をクリックして、中身を表示させてください。

【5】bodyの開始タグを探してください。見つかったら、その直後に先ほどコピーしたコードを貼り付けて、保存ボタンを押します。

【6】先ほどのGTMの画面に戻ります。
今度は上段ボックスの選択範囲の部分だけコピーしてください。

【7】再びShopifyの管理画面に移動します。
次はオンラインストアの下にある「各種設定」の中から、「Google アナリティクス」の設定パートを探し、その中の「カスタムJavaScriptを追加する」をクリックしてください。

【8】6でコピーした内容を貼り付け、ページの下の方にある保存ボタンをクリックしてください。
これでShopifyでの設定は完了です。

設定を確認するには？

GTMが正しく設定されているか・動作しているかを確認できるツールがあるので紹介しておきます。Google製のChrome拡張機能「Tag Assistant (by Google)」です。使い方は概要内の動画をご覧ください。

この記事で紹介した内容は、Shopifyから正式にアナウンスされている手法ではなく非公式なものとなります。今後Shopifyの仕様変更等により動作しなくなる可能性もありますので、その点ご留意いただけますと幸いです。
また、ShopifyのPlusプランではデフォルトでGTMの設定ができますので、うまくいかない場合はこちらもご検討ください。