WordPressの人気テーマ「STORK(ストーク)」でGoogleタグマネージャーを使おう

こんにちは。とみっちです。

最近WordPressのテンプレを巷で話題のSTORK(ストーク)にしたんですが、あまりの完成度の高さに驚くとともに、今までWordPressのカスタマイズに費やした時間はなんだったんだろうと思う日々を過ごしています。

WordPressのテーマをSTORK（ストーク）に変更してみたので紹介してみるよ！

WordPressのテーマをSTORK(ストーク)に変更したので紹介してみるよ！

フリーランスエンジニアからブロガー/アフィリエイターへと移行中のストーカーとみっちです。先週(2016年9月15日)から、当ブログのWordPressテーマを話題のSTORK(ストーク)に変更してみました！今回の記事

thesaibase.com

今まで何百時間とWordPressと格闘してカスタムしてきたんですが、最初からこういう素晴らしいテンプレでブログを書き始めていれば、こんなに苦労はしなかったなーなんて思っています(泣)

ちなみにSTORKは今年(2016年)7月に販売が開始されたばかりです。これからブログ投稿を頑張りたい人は、ぜひ最初からSTORKを購入することをおすすめします。

さて、今回はGoogle Tag Manager(タグマネージャー)をSTORKテーマで使用する方法を書いてみます。

簡単なのでチャレンジしてみてくださいね。

クリックでジャンプ

1 Google Tag Managerとは
2 STORKにタグマネージャーのタグを追記する
- 2.1 子テーマの導入
- 2.2 ヘッダーをいじる
3 アクセス解析タグの設置はタグマネージャー側で
- 3.1 Googleタグマネージャー
- 3.2 STORKテーマの管理画面(WordPress)
4 STORK固定フッタープラグインをリリース

Google Tag Managerとは

Googleタグマネージャーとは、タグ運用の負荷を軽減するさまざまな優れたツールを提供するサービスです。

以前記事を書いたことがあるので、こちらもあわせて読んでください。

え！？まだGoogleタグマネージャーを使ってないの？

Googleタグマネージャーはもう使ってますか！？ https://www.google.com/intl/ja/tagmanager/ 超絶に便利なので、使ってないなんてもったいない！今回の記事ではGoogleタグマネ

thesaibase.com

STORKにタグマネージャーのタグを追記する

HTMLやWordPressのソースをテキストエディタで開いて、Javascriptなどのタグを入力する必要がなくなるGoogleタグマネージャーなんですが、さすがにタグマネージャー自体のタグは追記する必要があります。

既にSTORKを購入していて、子テーマを導入している人もいるかと思うのですが、もしまだの人は、まずSTORKの子テーマを導入しましょう。

子テーマの導入

子テーマを導入しないとSTORKのテーマそのものをいじってしまうと、後でアップデートした際などに変更が消えてしまうので注意が必要です！

ヘッダーをいじる

Wordpressのカスタマイズに伴う動作不良は当ブログでは責任をもてませんので、バックアップを取るなどして慎重におこなってください。

テキストエディタでヘッダーにタグを追記します。

header.php

オフィシャルサイトにならって、僕は「STORK」のテーマファイル「jstork」から子テーマ「jstork_custom」を作成しました。

以下のファイルをテキストエディタか、WordPressの管理画面で開きます。

/wp-content/themes/jstork_custom/header.php

body開始タグ直下に以下のようにタグマネージャーのタグを記述してください。


&lt;body &lt;?php body_class(); ?&gt;&gt;

&lt;!-- Google Tag Manager --&gt;
&lt;noscript&gt;&lt;iframe src=&quot;//www.googletagmanager.com/ns.html?id=XXX-XXXXXX&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;display:none;visibility:hidden&quot;&gt;&lt;/iframe&gt;&lt;/noscript&gt;
&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&quot; data-wp-preserve=&quot;%3Cscript%3E(function(w%2Cd%2Cs%2Cl%2Ci)%7Bw%5Bl%5D%3Dw%5Bl%5D%7C%7C%5B%5D%3Bw%5Bl%5D.push(%7B'gtm.start'%3A%0Anew%20Date().getTime()%2Cevent%3A'gtm.js'%7D)%3Bvar%20f%3Dd.getElementsByTagName(s)%5B0%5D%2C%0Aj%3Dd.createElement(s)%2Cdl%3Dl!%3D'dataLayer'%3F'%26l%3D'%2Bl%3A''%3Bj.async%3Dtrue%3Bj.src%3D%0A'%2F%2Fwww.googletagmanager.com%2Fgtm.js%3Fid%3D'%2Bi%2Bdl%3Bf.parentNode.insertBefore(j%2Cf)%3B%0A%7D)(window%2Cdocument%2C'script'%2C'dataLayer'%2C'XXX-XXXXXX')%3B%3C%2Fscript%3E&quot; data-mce-resize=&quot;false&quot; data-mce-placeholder=&quot;1&quot; class=&quot;mce-object&quot; width=&quot;20&quot; height=&quot;20&quot; alt=&quot;&amp;lt;script&amp;gt;&quot; title=&quot;&amp;lt;script&amp;gt;&quot; /&gt;
&lt;!-- End Google Tag Manager --&gt;

&lt;div id=&quot;container&quot; class=&quot;&lt;?php echo esc_html(get_option('post_options_ttl'));?&gt; &lt;?php echo esc_html(get_option('side_options_sidebarlayout'));?&gt; &lt;?php echo esc_html(get_option('post_options_date'));?&gt;&quot;&gt;
&lt;?php if(!is_singular( 'post_lp' ) ): ?&gt;

からまでの間のタグですね。

Google Tag Managerの管理画面から、自分のタグをコピペしてください。

タグマネージャーのタグを以下の様に外部ファイルにしてもOKです。

/wp-content/themes/jstork_custom/inc/google_tag_manager.php

※僕の場合は、「inc」というディレクトリを作って、includeするファイルをまとめて格納しています。


&lt;!-- Google Tag Manager --&gt;
&lt;noscript&gt;&lt;iframe src=&quot;//www.googletagmanager.com/ns.html?id=XXX-XXXXXX&quot; height=&quot;0&quot; width=&quot;0&quot; style=&quot;display:none;visibility:hidden&quot;&gt;&lt;/iframe&gt;&lt;/noscript&gt;
&lt;img src=&quot;data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&quot; data-wp-preserve=&quot;%3Cscript%3E(function(w%2Cd%2Cs%2Cl%2Ci)%7Bw%5Bl%5D%3Dw%5Bl%5D%7C%7C%5B%5D%3Bw%5Bl%5D.push(%7B'gtm.start'%3A%0Anew%20Date().getTime()%2Cevent%3A'gtm.js'%7D)%3Bvar%20f%3Dd.getElementsByTagName(s)%5B0%5D%2C%0Aj%3Dd.createElement(s)%2Cdl%3Dl!%3D'dataLayer'%3F'%26l%3D'%2Bl%3A''%3Bj.async%3Dtrue%3Bj.src%3D%0A'%2F%2Fwww.googletagmanager.com%2Fgtm.js%3Fid%3D'%2Bi%2Bdl%3Bf.parentNode.insertBefore(j%2Cf)%3B%0A%7D)(window%2Cdocument%2C'script'%2C'dataLayer'%2C'XXX-XXXXXX')%3B%3C%2Fscript%3E&quot; data-mce-resize=&quot;false&quot; data-mce-placeholder=&quot;1&quot; class=&quot;mce-object&quot; width=&quot;20&quot; height=&quot;20&quot; alt=&quot;&amp;lt;script&amp;gt;&quot; title=&quot;&amp;lt;script&amp;gt;&quot; /&gt;
&lt;!-- End Google Tag Manager --&gt;

そして、header.phpは、


&lt;body &lt;?php body_class(); ?&gt;&gt;
&lt;?php include_once(&quot;inc/google_tag_manager.php&quot;); ?&gt;

&lt;div id=&quot;container&quot; class=&quot;&lt;?php echo esc_html(get_option('post_options_ttl'));?&gt; &lt;?php echo esc_html(get_option('side_options_sidebarlayout'));?&gt; &lt;?php echo esc_html(get_option('post_options_date'));?&gt;&quot;&gt;
&lt;?php if(!is_singular( 'post_lp' ) ): ?&gt;

としています。

これだとheader.phpがスッキリすると思うのですが、好きな書き方でどうぞ！