[WordPress] アナリティクスやタグマネのコードをfunctions.phpで読み込みたい

公開日:2021/12/18

Google Analyticsや、Googleタグマネージャーのコードをheadタグ、bodyタグ内に埋め込むとき、通常はheader.phpなどのテンプレートファイルに直接書き込んで実装することが多いです。

しかし、WordPressのデフォルトテーマなどを親テーマにして子テーマを作っている場合、親テーマがアップデートされることも踏まえて、なるべくテンプレートファイルは親テーマのものをそのまま使いたいです。

このようなトラッキングコードの埋め込みを、functions.php内で記載する方法を検討してみました。

サンプルコード

function my_wp_head() {
    if(is_user_logged_in()) return;

    echo <<< EOF

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


EOF;
}
add_action('wp_head', 'my_wp_head', 0);

function my_wp_body_open() {
    if(is_user_logged_in()) return;

    echo <<< EOF

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


EOF;
}
add_action('wp_body_open', 'my_wp_body_open', 0);

WordPressで用意されています、「wp_head」関数と「wp_body_open」関数に、それぞれ「add_action」で関数を登録し、そこでトラッキングコードの埋め込みを行っています。

原則、タグマネージャーのトラッキングコードは、headタグ、bodyタグ内の開始直後に書くことが推奨されています。そこで、「add_action」関数の第3引数で「0」を指定し、最優先で関数が実行されるようにしています。

「is_user_logged_in」関数で、ログイン中はタグの読み込みは行われないようにしています。

注意点として、親テーマ内で「wp_head」関数と「wp_body_open」関数が呼び出されていないと、サンプルコードは実行されません。サンプルコードがうまく動かない場合は、親テーマでこれらの関数が呼び出されているか確認してみてください。

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。