Web Pick ウェブピック

2022/06/10

【GTM】店舗ホームページ向けのGoogleタグマネージャーの設定を公開

  • SEO
  • ホームページ
  • WEBマーケティング
店舗ホームページなどスモールビジネスオーナーや運営担当者向けに、Googleタグマネージャー(略称:GTM)の設定内容を公開します。
通常、制作会社に依頼した場合はGoogleアナリティクスの設定のみで、大抵はGTMの設定は行いません。

この記事では、GTMの初期設定から、店舗ホームページ向けのGTM設定内容の解説をします。

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

Googleタグマネージャー(略称:GTM)とは、Googleから提供されているタグマネージメントツールです。
GTMを通じてマーケティングプラットフォームにデータを送信します。
多岐にわたるマーケティングツールのタグ管理
  • Googleアナリティクス
  • Googleリマーケティング
  • ヒートマップツール
  • チャットボット
  • Yahoo!広告
  • Facebook
  • CRMツール
など、
多くのタグを管理するのにHTML編集に膨大な手間がかかります。
GTMではそれらのタグを一括で設定・管理が可能になります。
GTMのタグ
多様な効果測定が可能になる
タグを設置しただけでは、基礎的な効果測定しかできませんが、GTMを通じて多様な効果測定が可能になります。
  • ボタンのクリック数
  • スクロールの位置
  • Youtubeの再生位置

GTMの設置/セットアップ方法

コンテナの作成〜タグ設定
最初にGTMの管理画面からアカウント作成 > コンテナ作成 > タグの設置を行います。

まず、GTMの管理画面にログインしてください。
※GTMアカウントが無い場合は、作成してください。
「アカウントの作成 > コンテナを作成」を選択してください。
アカウント作成
ドメイン名を入力し、「ウェブ > 作成」を選択してください。
コンテナ作成
表示されたタグを「<head>タグ内」「<body>タグの開始直後」の2つのタグを設定してください。
タグ設定

各種タグの設定内容

Web Pickのデモサイトの「デモ理容室」に設定しているタグの設定内容です。
ホームページ公開後にクライアントに渡ったあとに、Googleアナリティクスのみで計測することを想定してタグ設置しています。
※テクニカルな設定が必要なタグや、Web広告などのマーケティングツールの計測タグは省いています。

デモ理容室

Web Pickのデモサイトの「デモ理容室サイト」です。
Googleタグマネージャーの参考にしてください。

Googleアナリティクス + コンバージョンリンカー
GA4-G-XXXXXXX Googleアナリティクス:GA4 設定
All Pages
GA4-CONVERSION-LINKER コンバージョンリンカー
All Pages
必要最低限のタグです。
Cookieでコンバージョンデータが取得できていましたが、AppleのOSであるsafariのITPによってコンバージョンデータが正確に取得できなくなったため、そのITP対策の1つとしてGoogleコンバージョンリンカーを設置します。
ページ全体のclick計測
click-Internal 内部リンクのクリック回数を計測
リンクのみ
click-outbound 外部リンクのクリック回数を計測
リンクのみ
click-sns SNSのクリック回数を計測
リンクのみ
click-tel 電話番号のクリック回数を計測
リンクのみ
サイト全体のクリック回数を計測します。
イベントパラメータとして「ページパス」と「リンク先URL」を取得します。
パーツごとのclick計測
click-header ヘッダーのクリック回数を計測
リンクのみ
click-footer フッダーのクリック回数を計測
リンクのみ
click-menu ハンバーガーメニュー内のクリック回数を計測
リンクのみ
click-main メインコンテンツ内のクリック回数を計測
リンクのみ

ヘッダー/フッダー/メニュー/メインコンテンツのクリック回数を計測します。
それぞれ、イベントパラメータとして「ページパス」と「リンク先URL」を取得します。
サイト全体と分ける理由は、パーツごとに計測することによりメニューの改善施策を行いやすくする為です。

Youtube、スクロールの計測
youtube-start youtubeの再生回数を計測
再生回数のみを計測するので、トリガーはstartのみを設定。
scroll-60 ページごとにスクロールが60%まで行った回数を計測
サイト全体のYoutubeの再生回数、スクロールを計測します。
イベントパラメータとして「ページパス」を取得します。
ブログ、お知らせ詳細のページビュー数
blog-view ブログのページビュー数を計測
news-view お知らせのページビュー数を計測
設置は不要ですが、簡単に詳細ページのページビュー数を取得する為に設置します。
サイト公開後のSEO対策として、更新頻度が高いコンテンツなので固定ページとは分けて施策できるようにします。
FAQの開閉のclick計測
click-faq FAQの開閉をクリック回数を計測
すべての要素でCSSセレクターを指定
FAQページで質問ごとに計測をします。
よく見られる質問を知ることができ、運用の施策を行います。
イベントパラーメタは「質問名」を取得します。
FAQ
スタッフページの予約指名数を計測
staff-reservation 「指名して予約する」のclickを計測
スタッフページで「スタッフごとの指名click回数」を計測をします。
イベントパラーメタは「スタッフID」「スタッフ名」を取得します。
スタッフ
お問い合わせの計測
contact-input 「入力項目を確認する」のclick回数を計測。
お問い合わせはReactで作られているため、JS側でdataLayerを出力して、カスタムイベントをトリガーにしています。
contact-thanks サンクスページを計測。
カスタムイベントをトリガーにしています。
お問い合わせのコンバージョンを計測します。
thanksページをコンバージョンとして計測します。
※Googleアナリティクスでコンバージョン計測をONにする必要があります。

入力のイベントパラメータは「エラー項目」、thanksのイベントパラメータは「お問い合わせID」を取得します。
予約ページの計測
reserve-input 「予約内容を確認する」のclick回数を計測。
フォームはReactで作られているため、JS側でdataLayerを出力して、カスタムイベントをトリガーにしています。
reserve-thanks サンクスページを計測。
カスタムイベントをトリガーにしています。
reserve-err エラーを測定
予約ページのコンバージョンを計測します。
thanksページをコンバージョンとして計測します。
※Googleアナリティクスでコンバージョン計測をONにする必要があります。

入力のイベントパラメータは「エラー項目」、thanksのイベントパラメータはeコマースのパラメータで、「予約ID/メニュー/オプション/指名スタッフ」などを取得しています。
※eコマースのパラメータはこちらを参照ください。
上記以外にも、Google広告やYahoo!広告、各種計測ツールのタグなど、利用しているマーケティングツールのタグを設定してください。

タグを設置がゴールではありません。
タグから計測できるデータを元にGoogleアナリティクスなどで解析・施策を行い、ホームページを最適化に役立ててください。

PR】WEB予約に特化したホームページは「Web Pick」におまかせください。

「Web Pick」では、新規ユーザーとリピーターの両方が使いやすい「WEB予約に特化したホームページ」を提供します。
新規ユーザーには分かりやすいサイト設計で、リピーターにも刺さるようにキャンペーン登録やブログ機能も充実しています。
それ以外にも「メニュー・料金ページ」「スタッフ紹介ページ」「アクセスページ」「FAQ・お問い合わせ」ページなど、ユーザーが知りたいページは揃っています。
また、予約やシフトなどの管理機能も備わったパッケージになっています。
ホームページ制作以外にも、KPI測定に最適化したGoogleアナリティクスの設定、Web広告や内部施策の計測するためのGTM(Googleタグマネージャー)の設定や、
Googleリスティング広告、Googleマイビジネスなどの設定代行も受け付けております。
無料相談はこちら