プラグインなしでGTM(Googleタグマネージャー)のタグをfunctions.phpのフックで設定する方法
みなさんこんにちは！エンジニアの高澤です！
今回はプラグインなしでGTM(Googleタグマネージャー)のタグをfunctions.phpのフックで設定する方法について解説していきたいと思います。
今回の内容は筆者がこんな記事があったら仕事の時に助かるな、という基準で執筆した記事になります。
よろしければぜひお仕事の際にお役立ていただき、GTMの設置実装をサクッと解決していただけますと幸いです。
今回実装する内容
それではまず今回実装する内容について解説しておきたいと思います。
結論としては「GTM(Googleタグマネージャー)のタグをfunctions.phpのフックで設定する方法」になります。
GTMでは1サイトにつき1つのコンテナを作成することができますが、コンテナを作成すると下図のように「 <head> 内のなるべく上のほう」と「開始タグ <body> の直後」の2箇所にGTMで発行されたコードをコピー＆ペーストする必要があります。
この2つのコードの設置をfunctions.phpに当記事で解説するコードを使うことで、効率的に設置することができます。
GTM(Googleタグマネージャー)とは
GTM(Googleタグマネージャー)とは、ウェブサイトやモバイルアプリにタグ（コード）を追加、更新、管理するための無料のツールのことをいいます。
これにより、マーケティングや分析、トラッキングなどの機能を簡単に導入することができます。
GTM を使用すると、マーケティング担当者やウェブ開発者は、サイトのコードを直接編集することなく、Google アナリティクス、Google Ads、Facebook ピクセル、カスタム HTML タグなどのさまざまなタグを管理できます。
また、GTM はイベントの追跡やユーザーの行動の分析、タグのトリガリングなどの高度な機能も提供してくれます。
GTM を使用すると、タグの追加や変更が簡単に行えるため、ウェブサイトの管理やマーケティングキャンペーンの実施が効率化されます。
さらに、複数のユーザーが協力してタグの管理を行うことも可能です。
当記事の内容を実装するメリット
当記事の内容を実装するメリットは以下の内容になるかと思います。
- ブロックテーマでもコードから設置ができる
- functions.phpにてGTMのタグコードを管理ができる
上記の2点がメリットとしていえるかと思います。
筆者的にはブロックテーマでのコードの設置で使うことがありました。
ブロックテーマではクラシックテーマのようにheader.phpのようにPHPテンプレートファイルがありません。
そのため、functions.phpでGTMのタグコードを管理する必要があり、当記事の内容が役立ちました。
実装する方法
それでは早速実装方法について解説していきたいと思います。
以下のコードをfunctions.phpにコピー＆ペーストしてください。
<?php
//Google Tag Manager
function add_gtm_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','GTM-〇〇〇〇〇〇');</script>
<!-- End Google Tag Manager -->
<?php
}
add_action('wp_head', 'add_gtm_head', 0);
function add_gtm_body() {
?>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-〇〇〇〇〇〇"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<?php
}
add_action('wp_body_open', 'add_gtm_body', 0);ペーストが完了したら、以下の2つのコードをご自身のGTMにて生成されたタグコードに置き換えてください。
GTMの「1. このコードは、次のようにページの <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','GTM-〇〇〇〇〇〇');</script>
<!-- End Google Tag Manager -->GTMの「2. 開始タグ <body> の直後にこのコードを次のように貼り付けてください。」のタグコードは以下のコードと置き換えてください。
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-〇〇〇〇〇〇"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->コードの置き換えが完了したら保存して、管理画面のページを更新してください。
wp_headフックとは
WordPressのテンプレートの <head></head> セクション内にコンテンツを挿入するためのフックです。
このフックは、各ページのヘッダーセクションが生成される際に呼び出されます。
WordPressのテーマやプラグインは、このwp_headフックを使用して、ページのヘッダーセクションにさまざまな要素を追加できます。
例えば、CSSやJavaScriptのリンクやコード、メタタグ、外部スクリプトのロードなどが挙げられます。
wp_headフックは、通常、テーマのheader.phpファイル内で次のようにして呼び出されます。
<head>
<?php wp_head(); ?>
</head>このように呼び出されたwp_head()関数は、wp_headフックを発火させ、登録されているすべてのアクションやフィルターを実行します。
これにより、テーマやプラグインがヘッダーセクションにコンテンツを追加できるようになります。
wp_body_openフックとは
wp_body_openフックは、WordPress 5.2 で導入された新しいフックです。
このフックは、<body> 要素の直後に追加され、コンテンツの開始を示すために使用されます。
このフックを使用することで、テーマやプラグインは <body>要素の直後に追加のコンテンツを挿入できます。
これにより、レイアウトやスクリプトの追加などのさまざまな用途で使用できます。
まとめ
プラグインなしでGTM(Googleタグマネージャー)のタグをfunctions.phpのフックで設定する方法についての解説は以上になります。
今回の内容は筆者がこんな記事があったら仕事の時に手間なくGTMのタグコードを設定できて便利だな、という基準で執筆いたしました。
よろしければぜひお仕事の際にお役立ていただけましたら幸いです。
UMENOKI編集部 高澤 翔汰
お気軽に皆さんのご要望をお聞かせください！
どんなに些細なことでも構いません！よろしければ記事や当サイトへの「こんな記事があったら仕事とかで役に立つな〜」や「こうだったらもっと役に立つのに！」といったようなご要望等をお気軽にお聞かせください！今後のサービス改善にお役立てさせていただきます！
例1）Reactの技術記事を書いてほしい！
例2）WordPressの使い方とかを初心者向けに解説してほしい！...など
