ShopifyでGoogle Tag Manager(GTM)を活用する方法
この記事の所要時間：7分
外部のサービスを使用してShopifyでアクセス解析や広告の効果計測を行う場合、特定の計測タグをShopifyのコードに埋め込むことが多々あります。
「以下のコードを<head></head>内に埋め込んでください」という指示は何度か目にしたことがあると思います。
ですが様々なツールを使用すると、ショップに設置する計測タグが多くなり、管理しづらくなります。また、使用しなくなったタグを削除する際にも、手間がかかってしまいます。
そんな複雑なタグの設置や管理を簡単できるツールがGoogle Tag Manager(GTM)です。
今回はShopifyを運営する中で、アクセス解析やWeb広告の効果計測を行おうと考えている方向けに、Google Tag Managerの概要と使い方をわかりやすく解説します。
本記事を読めば誰でもGTMを理解することができ、様々なタグを一元管理することができます。
Google Tag Manager(GTM)とは
GTMの概要
Google Tag Manager(GTM)は、Googleが提供する無料のツールで、ウェブサイトに設置するタグを一元管理することができます。
GTMのタグをサイトに設置するだけで、その他の計測タグの設置や管理はすべてGTM上で簡単に行うことができます。
タグはGoogle Analyticsなど解析ツールの導入や、ユーザートラッキングをするために使用するので、ネットショップを運営する中で様々なタグの管理が必要になります。
そんな時に毎回コード編集をしてタグを設置するのではなく、GTMの管理画面で数クリックでタグの設置が可能になります。
計測タグの活用シーン
では、実際にタグはどのような時に使用するのか。
計測タグの主な活用シーンは以下のとおりです。
・Web広告の効果を計測
・特定のボタンのクリック数を計測
・特定のページやブログ記事のスクロール度合いを計測
・Google Analyticsなど解析ツールの連携
計測タグを設置しておくことで、どの広告からショップに流入したユーザーが、どのタイミングで商品を購入したのかを計測することができます。
また、特定のボタンのクリック数や、各ページのスクロール度合い(読了度)を把握することも可能になります。
ShopifyでGTMを利用する際の注意点
■Shopify Plus以外のプランではチェックアウト画面でGTMを使用できない
Shopify Plus以外のプランでは、チェックアウト画面のコードを編集することができません。
そのためチェックアウト画面を含むすべてのページでGTMを利用できるのはShopify Plusのみになります。
■Shopifyの広告運用ではGTMはあまり必要ない
Shopifyにはデフォルト機能で、GoogleアナリティクスとFacebookピクセルのコード設置場所が存在します。
そのためコード編集をすることなく、Shopifyの管理画面から簡単にGoogle広告とFacebook広告に必要なタグを設置することができます。
つまり、これらの広告の効果計測をするためにGTMは必要ありません。
GTMをShopifyに設定する方法
GTMの初期設定
まずはGTMの初期設定を行います。コチラからGTMの登録を行ってください。
登録が完了したら、アカウントとコンテナを作成します。
■アカウントとは
コンテナを管理するグループをアカウントといい、一般的にサイトの管理会社ごとに1アカウントで分けます。
■コンテナとは
実際にタグを設置するサイトのことをコンテナといい、一般的にサイト(ドメイン)ごとにコンテナを分けます。
Shopifyで構築した1つのネットショップでのみGTMを活用する場合は、1つのアカウントの中に1つのコンテナを作成し、その中でタグの設定を行います。
GTMの管理画面から「アカウント作成」をクリックし、次の画面で以下の情報を入力します。
アカウント名：わかりやすい任意の名前
利用する国：日本 ※海外の場合は対象の国
コンテナ名：ショップのドメイン名
ターゲットプラットフォーム：ウェブ
入力が完了したら画面下部にある「作成」をクリックします。利用規約がモーダル画面で表示されるので、画面右上にある「はい」をクリックします。
次にポップアップでGTMのタグが２つ表示されるので、それぞれ指示に従ってShopifyの<head>と<body>内にタグを貼り付けます。
Shopifyの管理画面から「オンラインストア > テーマ > アクション > コードを編集する」をクリックし、コード編集画面でLayoutの欄にある「theme_liquid」を開きます。
GTMの1つ目のタグは＜head＞タグ内のできるだけ上部に設置します。
2つ目のタグは＜body＞タグのすぐ下に設置します。
2つのタグの貼り付けが完了したら、「保存する」をクリックします。
次はサンクスページ(チェックアウト完了ページ)にもタグを設置します。
Shopifyの管理画面から「設定 > チェックアウト」をクリックし、「追加スクリプト」の欄に先ほど<head>と<body>に貼り付けた2つのコードをこちらにも貼り付けます。
最後に「保存する」をクリックしてGTMの設定は完了です。
※間違えてGTMのタグをコピーする前にポップアップを閉じてしまった場合は、ワークスペース上部にあるコンテナIDをクリックすると、再度タグを表示することができます。
GTMで使用する「タグ」「トリガー」「変数」について
GTMの初期設定が完了したので、今後あなたのShopifyに追加するすべてのタグはGTMで設定・管理が可能になります。
次はタグを設置する際に使用する「タグ」「トリガー」「変数」について説明します。
■タグ
タグとは、ネットショップ上でのデータを解析ツールなどのシステムに送信するコードです。
タグはページの読み込みやボタンのクリック、ページのスクロールなどのイベントが発生したタイミングで実行されます。
■トリガー
トリガーとは、タグが実行されるイベント条件をまとめたものです。ページの読み込みやボタンのクリックなど特定のイベントをトリガーとして設定します。
■変数
変数とは、URLや価格、日付などの変動する値に対応するため、その代替として使用される値です。状況によって変わる値をGTMで使用する場合、変数として登録して使用します。
登録した変数は、タグの設定とトリガーの設定の両方で使用します。
タグの設定では、変動する値をトランザクションとして取り込むために使用されます。
例えば、購入された商品IDと金額を取り込んで、解析ツールにデータを送信する場合に変数を使用します。
トリガー設定では、特定のタグが実行される条件を指定するために使用されます。
例えば、URLに「ichyaku.com/blog」が含まれている時にトリガーを実行する場合、変数を使用します。
タグの設定手順
GTMの「タグ」「トリガー」「変数」について理解できたと思うので、次はタグの設定手順を説明します。以下の手順でタグの設定を行います。
1. 追加するタグを用意
まずは、Shopifyのコードに追加する解析ツールなどの計測タグを準備します。
2. トリガーの設定
タグを実行するページの指定や条件を設定する場合は、GTMのワークスペースから「トリガー > 新規 > トリガーの設定」をクリックして、トリガーの条件を設定します。
ページ指定や条件を設定しない場合は、トリガーの設定は必要ありません。
また変数を使用する場合は、ワークスペースの「変数」をクリックして変数の登録も行います。
3. タグの設定
事前にトリガーや変数の設定が完了したら、タグを設定します。
GTMのワークスペースから「タグ > 新規 > タグの設定 > カスタムHTML」をクリックします。
HTML欄に使用するツールのタグを貼り付けます。Google AnalyticsなどGoogleが提供するサービスは、選択項目として準備されているので、使用するツールをクリックします。
次に「トリガー」をクリックし、先ほど設定したトリガーを選択します。
特にトリガー条件を設定せずに全てのページで適用する場合は、「All Pages」を選択します。設定が完了したら「保存」をクリックします。
4. タグを公開
タグの設定が完了したら、最後にGTMのワークスペース画面右上にある「公開」をクリックします。
モーダル画面が表示されるので、タグの名前と説明を入力して「公開」をクリックします。これで完了です。
また、GTMではGoogle Analyticsの設定が可能ですが、ShopifyでGoogle Analyticsを実装する場合はより簡単に連携することができるので、以下の記事を参考にしてください。
たった5分で完了！ShopifyにGoogle Analyticsを連携する方法
タグが正しく設定できているか確認する
タグの実行が完了したら、最後にタグが正しく動いているかチェックします。
GTMのワークスペース画面右上にある「プレビュー」をクリックすると、Tag Assistantという別のツールが表示されます。
画面中央の入力欄に自身のネットショップのURLを入力して「Connect」をクリックします。
そうすると、あなたのショップが表示され、右下にポップアップが表示されます。
「Finish > Continue」をクリックし、Tag Assistantの管理画面でタグの実装を確認します。
画面にはShopifyに設置されたタグが表示されおり、以下の欄で正しく実行されているかを確認します。
Tags Fired：正しく実行されているタグ
Tags Not Fired：正しく実行されていないタグ
Tags Not Firedにタグが並んでいる場合は、タグが正常に実行されていません。タグをクリックすると原因がわかるので、GTMの管理画面から修正を行ってください。
Tags Firedにタグが表示されれば完了です。
まとめ
Google Tag ManagerをShopifyに設定する手順
- Google Tag Manager(GTM)を登録する
- アカウントを作成する
- コンテナを設定する
- Shopifyのコード(theme_liquid)にGTMのタグを追加する
- GTMの管理画面から使用するタグを設定する
- 本番環境に公開する
- プレビューで確認する
今回は、GTMをShopifyに設定する方法をご紹介しました。
タグを活用することで様々なデータをトラッキングすることができるので、最初は少し複雑に感じるかもしれませんが、ぜひトライしてみてください。
