【完全最新ガイド】Googleタグマネージャー使い方。3ステップで簡単設定。

2023年1月23日2023年4月7日

タグマネージャーとは

タグマネージャーとは、その名の通りタグをマネージメントできるツールである。

今回は無料で利用できる、Googleタグマネージャーを例に説明していきたいと思う。

まずは、どのようなタグが管理できるのか説明していく。

Googleタグマネージャーで管理できるタグ

GoogleAnalytics
AdWords関連のタグ（コンバージョンタグ、リマーケティングタグ）
DoubleClick 関連のタグ
上記以外のタグ（任意のhtmlを挿入できます）

htmlまで挿入可能なため、基本的には何でも管理することができる。

Googleタグマネージャーを導入するメリット

タグが一元管理できる。

複数のタグ（GoogleAnalyticsやAdwords、Yahooプロモーション、その他DSP広告など）を一つの管理画面から管理することができる。

複数のサイトを管理している場合など、１つのタグマネージャーを入れることによって、タグ管理の煩雑さから開放される。

ブラウザ経由の管理画面からタグを挿入できるため、サーバーのFTP情報が無くてもOK。

企業によっては、サイトのソースを変更する際に、情報システム部に依頼をする必要があると思うが、依頼をせずにWEB担当者がタグを自由に実装できるようになる。

また、制作・管理のすべてを代理店にまかせている場合などでも、WEB担当者が好きな時に、タグを実装することができるようになる。

WEB担当者にとって、とても有用なツールでしかも無料なので是非使えるようになって欲しい。

Googleタグマネージャーを実装する3ステップ

Googleタグマネージャー公式サイトからログイン。

Googleタグマネージャー公式サイト

新しいアカウントの追加　>　任意のアカウント名

コンテナの設定　>　コンテナ名も任意で。（サイトのドメインが推奨）

コンテナの使用場所　>　ウェブサイトの場合を想定しているので、ウェブを選択。

利用規約を承諾

タグマネージャーをインストール

インストールとあるが、実際は計測対象の全ページの、head内の上部と、body直下に下記コードを挿入する。

head 内のなるべく上部に設置

<!-- Google Tag Manager head 内のなるべく上部に設置 -->
<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=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

bodyタグの直下に設置

<!-- Google Tag Manager bodyタグの直下に設置 -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager -->

設置場所は2016年11月に変更になっているので注意。上記は最新の設置場所。