Googleタグマネージャー(GTM)の設置場所を解説

Googleタグマネージャーで計測を始めるには、計測用のコードをWebサイトやアプリに埋め込む必要があります。

HTMLでサイト制作できる方は問題なく設置できると思いますので、今回はWordPressのいくつかのテーマを例に挙げながら、タグの設置場所について解説します。

目次

\ 筆者情報 /

たくろー
くくのち管理人・SEOマニア
とある企業でインハウスSEO担当をしています。当サイト「くくのち」では、個人サイト規模でも活かせるWeb分析に関するナレッジをメモしています。記事内容でわからないことがありましたら、ぜひ気軽にお問い合わせください。できるだけお答えいたします。

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サイトの分析に役立てていきましょう。

GTMとGA4を活用して、ブログやWebサイトのアフィリエイトリンククリック数を効率よく計測したくありませんか?

変数とトリガー、タグを組み合わせたクリック計測設定は、学習に多くの時間がかかります。導入支援をさせていただく場合、1タグにつき5万円〜の価格設定になります。

今回はそんなクリック計測設定をリーズナブルに導入していただけるように、GTMの設定ファイルと運用マニュアルを配布販売しております。アフィリエイトリンクを主題にしていますが、基本的にどんなURLにでも流用可能です。

自力でGTMのクリック計測設定をするのが難しい方、挫折してしまった方は、ぜひ下記noteから購入をご検討ください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

とある企業でインハウスSEO担当をしています。個人サイト規模でも活かせるWeb分析に関するナレッジを、メモ代わりにお届けしています。

目次