WordPress アクションフック(wp_head, wp_body_open)を使ってGoogle Tag Manager(GTM)タグを設置する方法

WordPressサイトにアクションフック（HEADタグ用・・・wp_head, BODYタグ用・・・wp_body_open）を使ってGoogle Tag Manager(GTM)用のタグを設置する方法を書いていきます。

HEADタグ用、BODYタグ用のテンプレートファイルを用意
1. HEAD用
2. BODY用
アクションフックでGTMタグを出力
動作環境情報

HEADタグ用、BODYタグ用のテンプレートファイルを用意

Google Tag Manager(GTM) から発行したタグをWordPressのテンプレートファイルとして追加します。

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-XXXXXX');</script>
<!-- End Google Tag Manager -->

BODY用

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

アクションフックでGTMタグを出力

functions.php 等にアクションフックで Google Tag Manager(GTM)タグを出力するためのコードを追加します。

HEAD用

/**
 * GTM HEADタグ
 */
function add_gtm_head_tag()
{
    get_template_part( 'templates/parts/common/gtm-head' );
}
add_action('wp_head', 'add_gtm_head_tag');

BODY用

/**
 * GTM BODYタグ
 */
function add_gtm_body_tag()
{
    get_template_part( 'templates/parts/common/gtm-body' );
}
add_action('wp_body_open', 'add_gtm_body_tag');

wp_body_open() 追加

“wp_body_open” はBODYタグの開始タグ直後にコードを追加するために使うものですが、テーマにテンプレートタグの wp_body_open() を追加しておく必要がありますのでない場合は、以下のように追加します。

<body <?php body_class(); ?> ><?php wp_body_open(); ?>

動作環境情報

エックスサーバー（x10）
PHP 7.2.17
MySQL 5.7
WordPress 5.3.2