ワードプレステーマ別に見るGoogleタグマネージャーの設定方法

2022年11月9日

最近Googleタグマネージャーをこのウェブチルサイトに導入しました。

以前から導入しようかな、と思いつつ先延ばしにしていたのですが、今回GoogleアナリティクスGA4を導入するにあたって、どうせならGoogleタグマネージャーを使って設定しようと思ったのがきっかけです。

本記事では、Googleタグマネージャーを導入するメリットとワードプレスにGoogleタグマネージャーを設定する方法をお伝えします。

ちなみに本記事で導入したGoogleタグマネージャーを使ってGoogleアナリティクスGA4を設定する方法については、こちらの記事を参照ください。

GTMを使ったGoogleアナリティクスGA4の新規導入方法

GoogleアナリティクスGA4（以降GA4）の新規導入するにあたって、Googleタグマネージャー（以降GTM）を ...

https://web-children.com/2022/11/09/ga4-setting-using-gtm/

1. Googleタグマネージャーとは
2. Googleタグマネージャーを導入するメリット
3. Googleタグマネージャーのワードプレスへの導入方法
4. GTMタグが挿入されたことを確認する方法
5. まとめ

Googleタグマネージャーとは

Googleタグマネージャー（以下GTM）はGoogleが無料で提供するサービスで、Webページ内にコンテンツ以外のタグ（例えば広告用タグやGoogleアナリティクス用タグなど）を導入するときに一元管理が可能なツールです。

Googleタグマネージャーの公式ページ

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

主に次のメリットがあります。

複数のタグを一元管理できる
ユーザーのページ内の行動計測ができる

すでに述べたように、複数のタグを導入したい場合にはGTMタグを１つ貼り付けるだけで、他のタグはGTM内で一元管理できます。これによって、導入中のタグをひと目で確認できるため導入漏れ防止や追加・削除などにも便利です。

しかし、それよりもメリットを感じるのは、ユーザーの行動管理ができることです。例えば、GoogleアナリティクスでもGA4ではScrollという機能によりページの90％以上をスクロール・閲覧した数をカウントできますが、GTMタグを使えばスクロール量を10％、20％など細かく設定できます。

ほかにも外部リンクへのクリック計測やページ内の動画が再生されたかどうかなど、さまざまなユーザー行動に関するデータを取得することができます。

できることが多岐にわたるため、私はこちらの書籍を購入しました。基本的な設定方法や使い方はもちろん、逆引きレシピとして使えるので大変便利です（『Googleアナリティクスを導入したい』『電話番号タップ数を計測したい』などしたいこと別に手順解説があります）。

現場で使える Googleタグマネージャー実践入門 (Compass Booksシリーズ)

created by Rinker

Googleタグマネージャーのワードプレスへの導入方法

ワードプレスにGoogleタグマネージャーを導入する方法を紹介していきます。

手順概要としては以下の通りです。

Googleタグマネージャーのアカウントを作成する
GTMタグ（またはコンテナID）を取得する
ワードプレスにGTMタグ（またはコンテナID）を設定する

③のワードプレスへの設定については、GTMタグの入力欄が設けられているテーマとそうでないテーマで若干手順が異なるので、それぞれ紹介していきます。

①GTMのアカウントを作成する

Googleアカウントにログインした状態を前提としています。Googleアカウントのない方は取得後ログインしてください。

１．GTMのwebページにアクセス

GTMのページにアクセス後、”無料で利用する”をクリックします。

２．”アカウントを作成”をクリック

３．必要事項を入力して”作成”をクリック

以下はこのウェブチルブログにGTMを設定したときの事例です。これを参考に必要事項を入力してください。

アカウントとコンテナについて

GTMのアカウントは団体毎（会社やプロジェクトなど）、コンテナはそのアカウントに属するwebサイトやアプリを指します。GTMの設定は、このコンテナ毎（webサイトやアプリ毎）に設定することになります。

プロジェクトの中に複数のwebサイトやアプリがある場合は、１つのアカウント（プロジェクト）の中に複数のコンテナ（webサイトやアプリ）を設定してそれぞれにGTMを設定していきます。

４．利用規約に合意

利用規約のページが開くので
①同意のチェックをいれて
②”はい”をクリックします

②GTMタグを取得する

GTMタグ

利用規約に合意するとGTMタグを表示したポップアップが開き、2種類のGTMタグが表示されます。

上側のGTMタグはwebサイトの<head>タグ内にペースト、下側のGTMタグは<body>タグ内にペーストするものです。それぞれコピーボタンをクリックするとコピーできるので、次の手順セクションで紹介するワードプレスの設定部にペーストしていきます。

コンテナID

GTMタグのポップアップを閉じる（右下のOKをクリックで閉じる）と、コンテナのワークスペースとなります。

右上のGTM-xxxxxxがコンテナIDです。LightningなどテーマによってはこのコンテナIDを入力して設定するものもあります。このコンテナIDをクリックすると先ほどのGTMタグが再表示されます。

③GTMタグをワードプレスサイト内にペーストする

テーマが未対応の場合１：子テーマのfunctions.phpに記述する

テーマに入力欄のない場合、子テーマのfunctions.phpに先ほどの2種類のGTMタグを含むコードを記述します。この方法が一番汎用性が高いかな、と思います。ただし子テーマは必須です。

WordPressカスタマイズには子テーマを使おう！機能・役割と作成方法

ワードプレスで自分のWebサイトをつくったら、最初はデフォルトのテーマのままでもよいですが、慣れて ...

https://web-children.com/2020/11/29/child-themes/

以下のコードのGTMタグをペーストするコメント文の下にそれぞれのGTMタグをコピペして使用ください。

//GTMタグhead内
add_action('wp_head', function () {
?>
	<!-- headタグ内用のGTMタグをペーストする -->
<?php
}, 0);

//GTMタグbody直後
add_action('wp_body_open', function () {
?>
	<!-- bodyタグ直後用のGTMタグをペーストする -->
<?php
}, 0);

<head>タグおよび<body>タグ内でできるだけ最初に表示されるようにadd_action( )の第3引数は 0 としています。

もしワードプレスにログインしている最中はGTMタグを無効化したい場合は、以下のコードのように!is_user_logged_in( )をつけておくとよいでしょう（私はログイン中もGTMは動いて欲しいので通常は先に紹介した方を使います）。

//GTMタグhead内
add_action('wp_head', function () {
	if (!is_user_logged_in()) {
?>
		<!-- headタグ内用のGTMタグをペーストする -->
<?php
	}
}, 0);

//GTMタグbody直後
add_action('wp_body_open', function () {
	if (!is_user_logged_in()) {
	?>
		<!-- bodyタグ直後用のGTMタグをペーストする -->
<?php
	}
}, 0);