WordPressのテンプレ(STORK)でGoogleタグマネージャーを使おう

WordPressのテンプレ(STORK)でGoogleタグマネージャーを使おう

こんにちは。@tomicciです。

最近WordPressのテンプレを巷で話題のSTORK(ストーク)にしたんだけど、今までWordPressのカスタマイズに費やした時間はなんだったんだろうと思う日々。

STORK(ストーク)にWordPressのテーマを変更してみた
こんにちは。@tomicciです。先週の木曜日である15日深夜1時半頃、当ブログ(WordPress)のテーマをこれまで使っていたものから、ブロガー界隈で話題のSTORK(ストーク)に変更したよ。「ストーク」WordPres

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

ちなみにSTORKは7月に販売が開始されたばかり。これからブログ投稿を頑張りたい人は、是非とも最初からSTORKを購入することをオススメしますw

とはいえ、WordPressの勉強にはなったので良かった部分もあるので、発信できる役に立ちそうな情報はどんどん発信していきたい。

さて、前置きが長くなりました。

今回はGoogle Tag Manager(タグマネージャー)のテンプレに仕込む方法を書くよ。

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

Google Tag Managerとは

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

以前記事を書いたことがあるので、こちらも読んでほしい。

え!?まだGoogleタグマネージャーを使ってないの?
Googleタグマネージャーはもう使ってますか!?https://www.google.com/intl/ja/tagmanager/超絶に便利なので、使ってないなんてもったいない!是非活用してください。

STORKにタグを追記する

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

既にSTORKを購入していて、自分でカスタマイズしようとしている人は、子テーマを導入していると思うけど、もしまだの人は、まずSTORKの子テーマを導入しよう。

子テーマの導入

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

ヘッダーをいじる

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

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

■header.php
オフィシャルサイトにならって、僕は「STORK」のテーマファイル「jstork」から子テーマ「jstork_custom」としている。

/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をカスタマイズしまくりたい

STORKはめっちゃ便利なんだけど、デザインが似通っているアルバトロスやハミングバードを使っているブログは既に多いし、これからSTORKを使ったブログもどんどん増えていくだろうし、とことんカスタマイズして差別化していきたい。

あと、半月くらい使っていて、この機能がこうだったらなーっていうのが幾つかあるので、その辺りもいじり倒したいところ。

STORKを使い倒す人になっていきたいっす。

良さげなカスタマイズは紹介していきますよ〜。

プロから直接学べるプログラミングスクールの紹介!PHPコースあり!

自己流でプログラミングを覚えようとすると、環境設定でつまづく、書いたプログラムがなぜ動かないか解決できず、多大な時間を浪費してしまいがちです。

担当の指導者(メンター)が付いてくれるTechAcademyなら、分からないことをどんどん質問して解決できます!コードレビューしてもらえるのも素晴らしい点ですね。

【TechAcademy】家で学べるプログラミングスクール

Web制作会社が立ち上げたWebデザイナー育成スクール Web塾超現場主義

Web制作に実際に携わっている講師陣が、現場で通用するスキルを伝授します!卒業後は転職支援、仕事紹介などを行っており、フリーランス独立する道を探すこともできそうです。

また「独立・開業はちょっと...」という方へは、当社の制作案件をお手伝いして頂く道も開けます。
Facebookアカウントでコメント

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

WordPressのテンプレ(STORK)でGoogleタグマネージャーを使おう

ABOUTこの記事を書いた人

とみっち

埼玉でザ サイベースを主催しています。Webクリエイター。フリーランス歴7年。飄々と生きています。これでも育児頑張ってます。長野市出身。 @tomicci 詳しいプロフィール【興味】ギター/DTM/Web/車/田舎/旅/酒/育児 自然の音からデスメタルまで聴きます。【運営サイト】 ザ サイベース おと風景