system
姿 良和

2018.5.7HTML/CSS 

フロントエンドエンジニア

姿 良和

WPへのGoogleタグマネージャーの組み込みについて

こんにちわ!
フロントエンドエンジニア 姿です。

季節は一気に夏になった感じですね!
4月というのに、気温が真夏日になったり、季節の移り変わりがとても早いです。
暑さ寒さに弱い私めは、無事に子供から風邪をうつされました(汗
皆様も気温の変化が大きい時期なので、体調にお気をつけください。

では、今回のお話をしようと思います。
「WPへのGoogleタグマネージャーの組み込みについて」と、しましたが、
内容としては、WPでテーマを作成する上での小ネタです。

早速ですが、「Googleタグマネージャー」って知ってますか?
お仕事でサイト制作をされている方は殆どがご存知と思います。
お仕事でサイト制作をされていない方は、一部のサイト制作熱心な方だけが知っていると思います。

「Googleタグマネージャー」とは、簡単に言いますと、
自分のサイトに、どこから見に来てくれて、どれ位のアクセスがあるのかなど、
サイトに来てくれた人達の情報が分かるアクセス解析ツールです。

高機能で、かつ無料なので、使用されている企業さんはとても多いと思います。

んで、この「Googleタグマネージャー」を使用するには、自分のサイトの1ページ1ページに、
javascriptのコードを仕込む必要があります。

↓↓↓こんな感じのものです。(弊社サイトに組み込まれているコードです)

<!– Google Tag Manager –>
<noscript><iframe src=”//www.googletagmanager.com/ns.html?id=GTM-PFGX86″ height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>
<script>// <![CDATA[
(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-PFGX86′);
// ]]></script>
<!– End Google Tag Manager –>

上記のようなものを、
「headタグの末尾」と「bodyタグの最初」に設置する必要があります。
これを設置することで、「Googleタグマネージャー」へデータが蓄積される様になります。

「Googleタグマネージャー」について、組み込み方がご理解いただけたと思いますが、
では、これをWPを使用しているサイトへの組み込みを行う際の手法についてお話ししたいと思います。

「headタグの末尾とbodyタグの最初にjavascriptコードを設置する必要がある」ということから、殆どは、WPテーマの「header.php」か「固定ページテンプレ」「アーカイブページテンプレ」に記述されることになるかと思います。

ですが、「header.php」はともかく、「固定ページテンプレ」「アーカイブページテンプレ」に記述している場合、例えば、Googleタグマネージャーの使用をやめて、別のアクセス解析ツールを導入しようとしたら、全「固定ページテンプレ」「アーカイブページテンプレ」を修正する必要があります。
これだと、修正し忘れや設置し忘れが発生する可能性がありますし、何より面倒です。

それで、「header.php」にまとめて記述!という方法の方が良いと思います。
ただ、この「header.php」にまとめて、という方法にも面倒になってしまう落とし穴が。

個人サイトですとあまりないのですが、
商用サイトの場合は、LPの様なページには、特別なヘッダーが設置されることがあります。
こういった場合、「header.php」を使用することができず、header_lp.phpの様に、新しいヘッダーを作成することになったりします。

そうすると、Googleタグマネージャーの設置コードは二か所に分散されます。
サイトの公開から時間が経って、別のアクセス解析ツールに乗り換え!という時に、やはり修正漏れが発生する場合があります。

じゃあどうするか、
私が普段サイト制作を行う時は、Googleタグマネージャーの設置コードのみを記述したパーツテンプレートを準備して、header.phpで読み込ませるようにしています。

固定ページなどからheader.phpを読み込ませるときは「get_header()」で、footer.phpも「get_footer()」で、それぞれ読み込ませることができますが、WPに予め決められてるもの以外の、個別で作成したテンプレートについても、簡単に読み込ませることができます。

phpのinclude関数を使用します。

<?php include(TEMPLATEPATH . “/google_tag_manager_body.php”); ?>

こんな感じで、簡単に読み込めます。
「google_tag_manager_body.php」の部分は任意です。分かりやすい名前を付けてください。
Googleタグマネージャーの設置コードのみに限らず、他にもパーツテンプレート化ができそうな所はパーツテンプレート化して、上記includeする事で、後々に発生したメンテナンス作業を行う際にグッと労力が減ると思います。

「あー、こんな方法あったのね」って感じた方は、是非一度ご検討いただければと思います。

以上、「WPへのGoogleタグマネージャーの組み込みについて」でした!!

ホームページ制作サービスはこちら
ページTOPへ