Google タグマネージャーを初めて使う方向けに、Google タグマネージャーの概要と使い道、基本の操作法を説明します。
Google タグマネージャーを使いこなせるようになると、解析ツールの導入やボタンのクリックイベント計測など、Googleタグマネージャーを通して自分自身で行うことができます。ぜひ、使い方をマスターしてアクセス解析に役立てましょう。
Googleタグマネージャーとは？
Googleタグマネージャーは、ウェブページに配置するタグを一括管理するツールです。
具体的に言うと、Googleアナリティクスのトラッキングコードや、Facebook Pixel といったタグを、Googleタグマネージャーの管理画面を操作することでサイトに導入できるようになります。
Googleタグマネージャーは無料で使うことができます。
Googleタグマネージャーができること
Google タグマネージャーがカバーするエリアは広く、アクセス解析など Web マーケティングに関連したほとんどの作業を行うことができます。
| 設置するタグ | 分析機能 |
|---|---|
| Google アナリティクス タグ | ・ページビューの計測 ・イベントの計測（バナークリック、PDFダウンロードなど） ・Eコマースサイトの計測（購入など） |
| Google 広告 タグ | ・コンバージョンの計測 ・リマーケティング |
| GoogleOptimize タグ | ・ABテストの実施 |
| Facebook Pixel タグ | ・広告の効果測定 |
| Twitter Universal Website Tag | ・広告のエンゲージメント測定 |
これらの設定では、HTMLタグやJavaScriptを記述する必要はありません。Googleタグマネージャーの画面で変更するだけで大半の設定作業が完結します。
Googleタグマネージャーのメリット
Googleタグマネージャーを導入しなくても、GoogleアナリティクスやFacebook Pixelをウェブページに設置することはできます。それなのに、Googleタグマネージャーをわざわざ導入するメリットはあるのでしょうか？
Googleタグマネージャーの導入メリットについては、次の3つがあります。
Webマーケティング主体でタグを管理できる
Googleアナリティクスを始めとして、ウェブサイトの解析をするには、ウェブページに計測タグを追加する必要があります。
しかし、ウェブサイトの変更作業は、一般的には規模に応じて難易度が上がっていきます。小さなウェブサイトなら負担は少ないですが、サイト規模が大きかったり、CMS や EC パッケージなど様々なシステムが絡んでくると、関係者間の調整も必要になり、タグを追加・変更する作業自体が困難になってきます。
Googleタグマネージャーを導入すると、ウェブサイトの変更を行うことなく、必要に応じて計測タグを追加したり削除したりできるようになります。システム側の事情に一切影響されることなく、Webマーケティング主体でタグが管理できることになるのです。
タグのプレビューができる
Googleタグマネージャーの2つ目のメリットは、タグの変更を「お試し」できる点です。Googleタグマネージャーには、プレビュー機能があり、変更を確定する前に、自分だけ新しいタグの設定での動作を試すことができます。
プレビュー機能のおかげで、誤った設定を本番反映してしまうトラブルを未然に防ぐことができます。
タグのバージョン管理ができる
Googleタグマネージャーには、バージョン管理機能があります。バージョン管理とは、設定の内容が変更の都度記録する仕組みのことで、過去の状態に戻したり、参照したりできます。
バージョン管理機能のおかげで、誰がいつどのような変更を行ったかの変更内容も記録されることになるので、タグを運用管理しやすくなります。
Googleタグマネージャーのデメリット
設定が複雑になる
HTMLに直接トラッキングコードを組み込む方式は、対象ページが多かったとしても、仕組みは比較的単純です。
一方、Googleタグマネージャはタグの設置場所やタイミング（トリガー）を細かく指定するので、設定が複雑になりやすいです。
HTML側の修正が必要になることもある
Googleタグマネージャでは、様々なタグを設置できますが、HTML側の修正なしにどんなタグでも設置できるということではありません。
例えば、バナー画像のクリックをGoogleアナリティクスのイベントとして計測したいとします。イベントの情報として、バナーの種類や配置場所も記録するには、HTMLを修正して属性を追加したうえで、Googleタグマネージャの設定を変更する必要があります。
Googleタグマネージャーを設置する
それでは実際に Google タグマネージャーを使ってみましょう。
Googleタグマネージャーを設置するには、大きく分けると3つの手順があります。
- Googleタグマネージャーのコンテナを作成する
- GoogleタグマネージャーのタグをHTMLに埋め込む
- Googleタグマネージャーでタグを登録して公開する
ここでは、Googleタグマネージャーを使って、Google アナリティクスを設置する手順を紹介します。
Googleタグマネージャーのアカウント・コンテナを作成
まず初めに、Google タグマネージャーのサイトを開き、[アカウントを作成]ボタンをクリックします。
以下の手順でアカウントを作成していきます。
- 任意のアカウント名を入力します。アカウント名は企業や組織名が良いでしょう。
- 国を選択します。
- 任意のコンテナ名を入力します。コンテナ名はサイト名やサービス名など分かりやすい名前にしましょう。
- ターゲットプラットフォームは「ウェブ」を選択します。
- [作成]ボタンをクリックします。
アカウント名やコンテナ名は、後から変更も可能です。
これでGoogleタグマネージャのアカウント作成は完了です。
GoogleタグマネージャーのコードをHTMLに設置する
画面に表示された「Google タグマネージャーのコード」を HTML へ埋め込みます。
このコードは、全ページに入れておきましょう。
Googleタグマネージャーのコードの設置場所は、<head>タグ直後と、<body> 直後の2か所です。①のコードをheadタグ直後に、②のコードをbodyタグ直後に設置します。
<head>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-123456789');</script>
<!-- End Google Tag Manager -->
:
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-123456789"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
:
Googleタグマネージャのコードは、コンテナによって内容が異なります。上記サンプルコードを使わないように注意してください。
これで、Googleタグマネージャーの設置は完了です。
Googleタグマネージャーでタグを登録して公開する
Googleタグマネージャーのタグ設置が完了したら、次はGoogleアナリティクスのタグをGoogleタグマネージャーに設定していきます。
以下の手順で、GoogleアナリティクスのトラッキングコードをGoogleタグマネージャーで設定できます。
なお、Googleアナリティクス4プロパティとユニバーサルアナリティクスプロパティの場合とで、設定が異なるので、それぞれ説明します。
2020年11月以降に作成したプロパティは、Googleアナリティクス4プロパティ（GA4プロパティ）です。
Googleアナリティクス4プロパティのタグを追加する場合
- [新しいタグを追加] をクリックします
- [タグの設定] をクリックします
- タグタイプとして「Googleアナリティクス：GA4設定」を選択します。
- タグの名前（ページ最上部）に「GA4設定」など任意の名前を、「測定ID」欄にウェブストリームの測定ID（”G-”から始まるID）を入力します。
- 「トリガー」をクリックします。
- [All Pages] を選択します
- [保存]ボタンをクリックします。
これで Google アナリティクスのタグ登録が完了しました。
[公開]ボタンを押すと、実際のサイトに反映されます。
Googleアナリティクスユニバーサルプロパティのタグを追加する場合
- [新しいタグを追加] をクリックします
- [タグの設定] をクリックします
- 「Googleアナリティクス：ユニバーサルアナリティクス」を選択します。
- 「Googleアナリティクス変数」のセレクトボックスで、[新しい変数…] をクリックします
- トラッキング ID 欄に Google アナリティクスのトラッキングID（”UA-XXXXXX-XX”形式）を入力します
- 変数の名前（ページ最上部）は「Google アナリティクス設定」などを指定し、[保存]をクリックします
- [トリガー]をクリックします
- [All Pages] を選択します
- タグの名前（ページ最上部）に「Googleアナリティクス」などと入力し、[保存] をクリックします
これで Google アナリティクスのタグ登録が完了しました。
[公開]ボタンを押すと、実際のサイトに反映されます。
Google アナリティクスのリアルタイムレポートで確認してみてください。計測できましたか？
Googleタグマネージャの便利な機能
設定変更のプレビュー
Googleタグマネージャのプレビュー機能は、変更を公開する前に、動作テストできる機能です。
動作テストをするには、画面右上にある[プレビュー]ボタンをクリックします。
動作テストをしたいページのURLを入力し、[Connect]ボタンをクリックします。
すると、プレビューモードの画面が表示されます。プレビューモードでは、自分だけタグマネージャーの変更が反映された状態になります。
また、元のウィンドウには、タグマネージャーのデバッグウィンドウが表示されます。
Tags Fired部分は、Googleタグマネージャーが配信したタグが表示されるエリアです。ここに「Googleアナリティクス：GA4設定」や「Googleアナリティクス：ユニバーサルアナリティクス」と表示されていれば、GoogleタグマネージャーがGoogleアナリティクスのタグを配信したことが分かります。
変更履歴の確認（バージョン）
Googleタグマネージャの設定の変更履歴を確認できる機能です。
[バージョン]タブをクリックすると、過去の公開したすべてのバージョンが表示されます。誰がいつ、どのような変更を行ったのかが一目でわかります。
さらに各バージョンの詳細画面では、タグ・トリガー・変数の変更前・変更後の設定が比較できます。
Googleタグマネージャーを使いこなそう
以上、Google タグマネージャの使い方を説明しました。
Google タグマネージャには、変更履歴をバージョン管理できたり、設定のプレビューができたりするので、設定変更の敷居が低く、いざという時に元に戻せるので安心です。Google タグマネージャーを活用し、高度なアクセス解析を進めていきましょう。
シンメトリックでは Google アナリティクスを「見える化」するアクセス解析＆SEO分析ツール「アナトミー」を扱っています。
