ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

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

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

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

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

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

Googleタグマネージャーとは

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.GTMのwebページにアクセス

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

GTMページにアクセス

2.”アカウントを作成”をクリック

アカウントを作成をクリック

3.必要事項を入力して”作成”をクリック

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

アカウント名など必要事項を入力後作成をクリック
アカウントとコンテナについて

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

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

4.利用規約に合意

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

利用規約に合意

②GTMタグを取得する

GTMタグ

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

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

GTMタグの取得

コンテナID

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

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

コンテナのワークスペース

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

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

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

以下のコードの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);

テーマが未対応の場合2:プラグインGTM4WPを使う

プラグインGTM4WPを使う方法もあります。ただし、このプラグインのデフォルト設定では<body>タグ直後のGTMタグを</body>直前に置くので、うまく動作しない場合があります。安全を期するなら先に紹介したfunctions.phpへの記述のほうがいい思います。

手順は以下の通り。

GTM4WPをインストール・有効化します。

プラグインGTM4WP

ダッシュボードメニューの 設定>Google Tag Manager を開けてコンテナID(GTM-xxxxx)を入力、”変更を保存”します

GTM4WPでのGTM設定

テーマが対応している場合

もしテーマに入力欄が設けられている場合は、functions.phpではなくそちらを使うと簡単です(もちろんfunctions.phpへの記述またはプラグインでも構いません)。

テーマLuxeritasの場合

ダッシュボードメニューの Luxeritas>子テーマの編集 を開けて次のようにします。

<head>タグ用GTMのペースト

アクセス解析(head)”タブに切り替えて、PHPの終了タグ ?> のすぐ下にペーストします。

Luxeritasへのhead用タグのペースト

<body>タグ用GTMタグのペースト

アクセス解析(body)”タブに切り替えて、PHPの終了タグ ?> のすぐ下にペーストします。

Luxeritasへのbody用タグのペースト
テーマLightningの場合

Lightningの場合は、GTMタグではなくコンテナID(GTM-xxxxx)を必須プラグインAll in One Expansion UnitのGTMタグ欄にペーストします。(ダッシュボードメニューのExUnitで操作します)

LightningのGTM設定方法
テーマSWELLの場合

ダッシュボードメニューの 外観>カスタマイズ>高度な設定 にタグの入力欄があります。

SWELLのタグ入力欄

ただし、ここで<head>タグ用に入力したものは、<head>タグ終了直前に挿入されることになっています。GTMタグはできるだけ<head>タグ内の最初の方に挿入されることが望ましいとされているので、他のタグとの関係でうまく動作しない可能性があります

したがって、SWELLの場合は先に紹介したfunctions.phpへの記述を使う方がいいかもしれません。

GTMタグが挿入されたことを確認する方法

GTMタグが無事にwebサイト内に挿入されたかどうかは、Google Chromeの開発者ツール等でHTMLを確認すればわかります。

Google ChromeでCtrl(MacではCommand)+ Shift + I で開発者ツールを開けたのち(WindowsならF12でもよい)、次の簡単な手順で確認できます。

①Ctrl(Command)+Fで検索ボックスを開け、Google Tag と入力
②ハイライトされた部分を確認する(<head>タグや<body>タグで表示されているのを確認しましょう)

Google Chrome開発者ツールで確認

まとめ

最後にもう一度GTMの設定手順をおさらいしておきます。

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

ワードプレスへの設定はテーマによっては簡単なものがありますが、functions.phpへの記述方法が一般的です。

GTMを導入したら、自分のwebサイトのユーザーの動きを計測してみましょう。具体的な使い方は以下の書籍がおすすめです。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる