WordPressを勉強を兼ねて、Google Tag Managerタグの配置をPluginで出来るかをやってみました。
達成目標
Google Tag Managerタグをタグ直下にPluginを用いて挿入する。
なぜPluginで?
今後別サイトをWordpressで作成した場合に流用できるように。
調べたこと＋考えたこと
- 最初にテーマに含まれているheader.phpを確認。見てみると、html,head,bodyの各タグは、/wp-includes/general-template.phpで定義されているget_header関数呼び出しで出力されていました。
- get_headerでは、/wp-includes/template.phpで定義されているlocate_template関数を呼び出していて、、その中でテーマ内のheader.phpがrequire_onceされていた。
- header.php内では、bodyの開始タグ直下に何かしら追加情報を記述する準備はなかった。。
- 最初のアプローチが頓挫したので、WP Google Tag Managerというプラグインを参考にしたところ、該当プラグインはfooterの最後に追加していた。。。
- body直下という意味ではWP Google Tag Managerのやり方も問題ないが、別スクリプトでエラーした場合、一番最後のタグが上手く動作しない可能性があるので可能な限りbody開始タグ直下でやりたい。。
方針変更
- テーマにまったく手を加えないということは一旦あきらめる（汎用的プラグインではダメだが今回は自分サイトなので）
- 管理画面ではタグが表示されないようにする（変な計測はされたくないので）
やったこと
- header.php修正。body開始タグの真下に独自actionの実行を定義
<body <?php body_class(); ?>>
<?php do_action('nb_body_head_tag'); ?> <--追加
- タグ挿入用の自分プラグインの作成
[plugins/mysite_tagplug/mysite_tagplug.php]
<?php
/*
Plugin Name: My Site Tag Plug Plugin
*/
class mysite_tagplug {
function __construct() {
add_action('wp_head', array($this, 'nb_gtm_header'), 10);
}
function nb_gtm_header($name) {
add_action('nb_body_head_tag', array($this, 'output_tag'));
}
function output_tag() {
?>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<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=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
<?php
}
}
new mysite_tagplug();
（GTM-XXXXXXにはGTMのタグIDをいれてます）
このプラグインを有効化することで、やりたかった通りbodyタグの真下でかつ、管理画面以外でGTMタグが表示されるようになりました。
- プラグインの有効・無効でタグを出したり消したりできる。
- 他の場所に差し込みたい場合もに似た形で実装すれば、タグの挿入箇所が分散しない。
という、ちょっとだけ運用上便利なところもできたきはします。
2015/06/21追記
適用したあと、Analyticsを見ていると、preview=trueのURLも記録されていました。これは、管理画面のプレビューからのアクセス。。
本来は管理画面と同様に計測してほしくないアクセスです。
このため、nb_gtm_headerを少し変更し、previewモードの場合はタグを記述しないようにしました。
function nb_gtm_header($name) {
global $query_string;
// query_stringにpreview=trueが含まれている場合はタグは登録しない
if (!preg_match("/preview=true/i", $query_string)) {
add_action('nb_body_head_tag', array($this, 'output_tag'));
}
}
* query_stringは文字通り、GET文字列が格納されてる