Googleタグマネージャーで計測を始めるには、計測用のコードをWebサイトやアプリに埋め込む必要があります。
HTMLでサイト制作できる方は問題なく設置できると思いますので、今回はWordPressのいくつかのテーマを例に挙げながら、タグの設置場所について解説します。
現在はIT企業でインハウスSEO担当兼、メディア運営責任者・編集者として働きながら、札幌でWebライティングの講師として活動。「良いWebライターが増えれば仕事が楽になるなぁ」と思いながら、一人でひっそりと文亭を運営中。著書『Webライターが書いてはいけない文章28選』
Googleタグマネージャー（GTM）の埋め込みコード
Googleタグマネージャーの埋め込みコードは2種類あります。片方だけを埋め込んでも機能しませんから、かならず2つあることを覚えておいてください。
Googleタグマネージャーでコンテナを作成したタイミングで、下記のように埋め込みコードが表示されます。
もし画面を閉じてしまった場合は、コンテナに入って「管理→Google タグマネージャーをインストール」と進むと、埋め込みコードが表示されます。
Googleタグマネージャー（GTM）の設置場所
Googleタグマネージャー（GTM）の設置場所は<head>と<body>の2ヶ所です。それぞれ具体的なコードと場所を解説します。
<head>内のなるべく上のほう
一つ目の計測コードは<head></head>内に記述します。
<html>
<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','GoogleタグマネージャーのID');</script>
<!-- End Google Tag Manager -->
</head>設置場所については「<head>内のなるべく上のほう」という指示がありますが、こちらのコードについては、</head>直前など下の方でもさほど問題ありません。
<body>の直後
もう一つの計測コードは、<body>タグ直後への記述が推奨されています。
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GoogleタグマネージャーのID"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) --><body>への記述は、あまり下の方にしすぎると計測に不備が出る可能性があります。
<head>内の記述とは違い、できるだけ<body>直後に設置しましょう。
WordPressテーマごとのGTM設置場所の違い
WordPressでWebサイトを構築している場合、つかっているテーマによって専用の入力項目が用意されていることがあります。
いくつか人気テーマを例に挙げて、設置場所を解説します。
CocoonのGTM設置場所
例えば人気の無料テーマ「Cocoon」では「Cocoon設定→アクセス解析・認証」と進んだ先に、タグマネージャIDを入力するだけで設定が完了する設定項目があります。
ここにIDを入力するだけで、自動的に<head>と<body>へと計測コードを埋め込んでくれる仕組みになっています。
SWELLのGTM設置場所
SWELLを使っている場合は、カスタマイズ項目にコード入力場所が用意されています。
「外観→カスタマイズ→高度な設定」と進むと上記の画面になりますので、それぞれ<head>と<body>に出力するコードを設置しましょう。
Googleタグマネージャー（GTM）を複数設置する方法
限られた状況ではありますが、GTMを複数設置する必要が出てくる場合があります。
例えば自社ですでにGTMを導入している中で、外部業者があらたに自由にトラッキングできるように設置したいという場合です。
その場合、現在設置しているGTMのタグのすぐ上下にコードを埋め込めば問題ありません。つまり下記のような形になります。
<html>
<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','自社のGoogleタグマネージャーのID');</script>
<!-- End Google Tag Manager -->
<!-- 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','委託先のGoogleタグマネージャーのID');</script>
<!-- End Google Tag Manager -->
</head></head>
<body>
<!-- 自社Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=自社のGoogleタグマネージャーのID"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- 委託先Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=委託先のGoogleタグマネージャーのID"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->コメントアウト部分に、どちらがどちらの測定コードなのかメモしておくと、後々トラブルが起きにくくなります。
また「独自のデータレイヤーを作成したい」と言われた場合は、データレイヤー名を指定してもらいましょう。<head>ないのコードにある ‘ dataLayer ‘ の部分を、指定のデータレイヤー名に修正すれば対応できます。
Googleタグマネージャー（GTM）の設置場所は間違えないように
コードを埋め込む場所を間違えると、GTMは正しく機能しません。
またHTMLは基本的に上から順番に読み込まれますから、とくに<body>内の記述は、あまりに下の方になりすぎないよう注意しましょう。
それでは、GTMを設置してWebサイトの分析に役立てていきましょう。
