Luxeritas に Google タグマネージャーを導入する（AMP 対応も）

2019年10月28日

こちらにも説明があるように、Luxeritas は Google Analytics のコードを子テーマのアクセス解析のところに貼り付ければ、AMP 対応も含めて自動的にやってくれるのですが、将来の拡張性のことを考えて Google タグマネージャーを導入してみました。

正しくない導入方法

最初に思いついたのは、AMP 用のタグマネージャーのコードを Luxeritas の子テーマの編集の【AMP HTML ( body )】に入れる方法です。AMP 用のタグマネージャーのインストール方法の説明ページには、<head>タグの一番下と、<body>タグの一番上にそれぞれコードを入れるように指示されていますが、body の一番上にまとめて入れても大丈夫だろうということで。

一見、うまくいったように見えたのですが、AMP のテストに通らないばかりか、非 AMP 用のタグマネージャーのコードも表示されてしまいました。

正しい導入方法

正しい導入方法は、【アクセス解析 ( head )】と【アクセス解析 ( body )】のそれぞれに、AMP 用か非 AMP 用かの条件分岐を入れるやり方です。

アクセス解析 ( head )

<?php
/**
 * Luxeritas WordPress Theme - free/libre wordpress platform
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * @copyright Copyright (C) 2015 Thought is free.
 * @license http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
 * @author LunaNuko
 * @link https://thk.kanzae.net/
 * @translators rakeem( http://rakeem.jp/ )
 */

/* Google Analytics(gtag.js) 等、アクセス解析の Javascript は、?> 以降に書いてください。
 (Javascript of Access analysis (Google Analytics gtag.js etc.), please write them after the below ?>. ) */
?>
<?php if (!is_user_logged_in()) : ?>
<?php if (isset($luxe['amp'])) : ?>
<!-- AMP Analytics --><script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<?php else: ?>
<!-- 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 -->
<?php endif; ?>
<?php endif; ?>

アクセス解析 ( body )

<?php
/**
 * Luxeritas WordPress Theme - free/libre wordpress platform
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * @copyright Copyright (C) 2015 Thought is free.
 * @license http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
 * @author LunaNuko
 * @link https://thk.kanzae.net/
 * @translators rakeem( http://rakeem.jp/ )
 */

/* Google Analytics(analytics.js / ga.js) 等、アクセス解析の Javascript は、?> 以降に書いてください。
 (Javascript of Access analysis (Google Analytics analytics.js / ga.js etc.), please write them after the below ?>. ) */
?>
<?php if (!is_user_logged_in()) : ?>
<?php if (isset($luxe['amp'])) : ?>
<!-- Google Tag Manager -->
<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-XXXXXXX&gtm.url=SOURCE_URL" data-credentials="include"></amp-analytics>
<?php else: ?>
<!-- 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) -->
<?php endif; ?>
<?php endif; ?>

上記のコードでは、二重に条件分岐を入れています。
最初の if (!is_user_logged_in()) の部分は、管理者としてログインしていない場合に限って、タグマネージャー用のコードを出力するようにしています。立ち上げ直後のブログの場合、動作チェックも含めて自分自身のアクセスが多くなりますが、それでアクセスを稼いでしまうのも切ないので。
そして、次の if (isset($luxe['amp’])) の部分が、AMP 用ページか否かの条件分岐です。true のときが AMP 用ページを表示している場合になります。

上記のように設定することで、AMP のテストも通過し、AMP がインデックスされるようになりました。