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

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

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

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

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

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

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

Google Tag Managerとは

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

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

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

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

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

子テーマの導入

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

ヘッダーをいじる

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

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

header.php

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

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

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

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

<body <?php body_class(); ?>>

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=XXX-XXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%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" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<!-- End Google Tag Manager -->

<div id="container" class="<?php echo esc_html(get_option('post_options_ttl'));?> <?php echo esc_html(get_option('side_options_sidebarlayout'));?> <?php echo esc_html(get_option('post_options_date'));?>">
<?php if(!is_singular( 'post_lp' ) ): ?>
 

<!-- Google Tag Manager -->から<!-- End Google Tag Manager -->までの間のタグですね。

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

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

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

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

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=XXX-XXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%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" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<!-- End Google Tag Manager -->

そして、header.phpは、

<body <?php body_class(); ?>>
<?php include_once("inc/google_tag_manager.php"); ?>

<div id="container" class="<?php echo esc_html(get_option('post_options_ttl'));?> <?php echo esc_html(get_option('side_options_sidebarlayout'));?> <?php echo esc_html(get_option('post_options_date'));?>">
<?php if(!is_singular( 'post_lp' ) ): ?>

としています。

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

アクセス解析タグの設置はタグマネージャー側で

Googleタグマネージャーで、Gooleアクセス解析(ユニバーサルアナリティクス)が設定できるので、そっちでやりましょう。

Googleタグマネージャー

STORKテーマの管理画面(WordPress)

タグマネージャーの管理画面でアクセス解析の設定ができたら、STORK管理画面にあるアクセス解析欄のタグ入力は空にしておいて問題ありません。

STORK固定フッタープラグインをリリース

当ブログでも使用している、人気WordPressテーマ「STORK(ストーク)」に関し、スマホで閲覧した際に以下のような固定フッターメニューを表示できるプラグインをリリースしました。

年々大型化するスマホの画面では、もはやページ上部のハンバーガーメニューはイマイチ使いづらくなってきたと言えます。

ページ下部、スマホホームボタンのそばに固定フッターメニューが表示されるとかなり使いやすくなります。

STORKテーマ限定の機能とはなりますが、ユーザービリティの向上やSNSでの拡散、他の記事への誘導などに、このプラグインをぜひ使ってみてください。

Facebookアカウントでコメント

※本コメント機能はFacebookによって提供されており、この機能によって生じた損害に対してザ サイベースは一切の責任を負いません。

ABOUTこの記事を書いた人

とみっち

数年前までバンド活動してました。現在はブログを運営して暮らしています。サウンドクリエイター、Webクリエイター。息子は4歳になりました。長野市出身。埼玉県本庄市在住。 【興味】音/Web/車(GolfV GTI等)/田舎/旅/酒 ※自然の音からデスメタルまで聴きます。 @tomicci 詳しいプロフィール 【運営サイト】 ザ サイベース おと風景