THE SONICにGoogle Tag Managerを設定する

WordPressのテーマ「THE SONIC」を使い始めました。

サーバーはConoHa WING、Xserver、さくらインターネットを使ってます。

この環境でいつも通りGoogle Tag Managerを設定しようと思ったのですが・・・

一筋縄ではいかなかったので、そこらへん詳しく書いてますよ〜。

Google Analyticsの計測がね・・・

THE SONICにGoogleタグマネージャーを設定する前に・・・

Googleタグマネージャーを通して、Google Analyticsを使いますよね？

でもTHE SONICって、初期設定を変更しないとGoogle Analyticsがちゃんと動かないんです。

どんな感じになるかというと、最初のPVは計測されるんだけど、そこからのページ遷移を計測しなくなる。

つまりどんなにページ遷移をしてもPV1、離脱率100%、直帰率100%だという・・・（汗）

で、何が原因なのかというと、THE SONICのある機能が影響してます。

THE SONICの高速化機能を変更する

THE SONICの高速化機能『Pjax(β版)』というやつ。

※2020年10月現在の話です

これが影響してます。

ちなみにここの設定を『高速化しない』にすれば、問題なく動くようになるのですが・・・

その前に！！

Pjaxと聞いて、ポカーンとなっている人へ説明をしたいなと( ﾟдﾟ)ﾎﾟｶｰﾝ

Pjaxってなんだ？

Pjaxっていうのは、THE SONICのページ遷移を爆速にしてくてる仕組みです。

で、ここがポイントなんですけど、サイトへの初回アクセスは爆速になりません。

サイトにユーザーが来たあと、そのページから他のページに遷移するときの速度が早くなるんです。

図にすると・・・

①Google検索　→　②最初のページ　→　③別のページ

つまりこの「②最初のページ」→「③自サイトの別ページ」が爆速になるわけですね。

早めにPjaxを諦めた

というわけで、GoogleタグマネージャーとPjaxって両立しません。

もっというとAdSenseとPjaxも両立しません。

ゴトー

いやプログラムを探って改造すれば、両立できるとは思うんですが、そこに時間使いたくないですよね。

他の外部ツールでも同じことが起きると思います。

例えばヒートマップツールなどのように、<head>タグに<script>を差し込むようなやつ。

というわけでPjaxは早くて気持ち良くて個人的には大好物な仕組みだったんですが、早い段階で諦めました。

次からはGoogleタグマネージャーの設定について。

Googleタグマネージャーの登録

Googleタグマネージャーって、設定が複雑ですよね。。

STEP
タグマネージャーにログインする

タグマネージャーのサイトに飛んで、利用を開始します。

参考
ウェブとモバイル用のタグ管理ソリューション – Google タグマネージャー
Google Marketing Platform

※ユーザーの新規登録の手順は省きます。
STEP
アカウントとコンテナを作成

タグマネージャーを初めて利用する人は、アカウントとコンテナを新規作成します。

タグマネージャーに既にアカウントのある人は、既存のアカウントにコンテナを追加すれば良いかと思います。

ココらへんは考え方次第なんですが・・・

個人的には、アカウントは1つで十分かなと。

アカウントの使い分けって、仕事で複数のクライアントを持つような人がするのかなと思います。
STEP
タグマネージャーのコードをTHE SONICに貼り付ける

コンテナを作成すると、Wordpressに貼り付ける用のコードが発行されます。

これをTHE SONICの指定の場所に貼り付けます。

WordPressの管理画面にログインして、外観 >カスタマイズ >サイトの基本設定>アクセス計測・その他タグ挿入の画面を開きます。

これでタグマネージャーの設定ができました！

めでたし、めでたし・・・

となるハズなんですが

ここで思わぬエラーが発生することがあります。

THE SONICの管理画面で「公開」ボタンを押すと・・・

( ・ὢ・ ) むむっ？

これ僕もちょっとハマっちゃったんですけど、サーバー側の設定が影響してます。

具体的に言うと、サーバー側でWAFという機能を無効にしないといけません。

WAFとは？

WAF（Web Application Firewall）は、簡単にいうとWordpressへの攻撃を防いでくれる、サーバー側の防衛機能のこと。

なので、ここからはサーバーの管理画面で操作します。

僕が使っているサーバーだけになりますが、操作方法は以下。

Conoha WINGでWAFをOFFにする

Conoha WINGの場合、WAFは最初からONになってます。

OFFにするのは以下の通り。

ちなみにConoha WING、ホント早くてオススメのサーバーですよ。

このサイトもConoha WINGで動いてます。

XserverでWAFをOFFにする

Xserverの場合、WAFはデフォルトでは無効になってます。

だから有効にしてなければ大丈夫なハズだけど・・・

もしWAFを有効にしていた場合は、以下でOFFにします。

さくらインターネットでWAFをOFFにする

さくらインターネットの場合は以下。

Webアプリケーションファイアウォールの設定を「利用しない」に変更します。

WAFは後でONに戻そう

こんな感じでWAFをいったん無効にすることで、タグマネージャーのコードをTHE SONICEに設定できます。

が、WAFは有効のほうが良いので（当たり前だけど）、タグマネージャーのコードを設定したら元通り有効にしておきましょう。

WAFを有効にすると、Javascriptなどのコードが保存できなくなることがあります。その場合はまた無効にすればOKです。

タグマネージャーにGoogle Analyticsを設定する

あとはタグマネージャーにGoogle Analyticsを設定するだけです。

※Google Analyticsの設定は先に済ませておいてください。

それでは先程の続きからですが・・

STEP
ワークスペース画面で「新しいタグ」を選択
STEP
タグ設定画面でタグとトリガーを設定する

このタグを設定する画面自体にも名前を付けられますが、これはほんと何でもOK。

僕は「Googleアナリティクス」って名前を付けました。

①タグを設定を押すと、タグタイプを選択する画面になります。

そしたら「Google アナリティクス：ユニバーサルアナリティクス」を選択。

ちなみにユニバーサルの意味は、一般的であることや普遍的ってこと。つまり標準モードのアナリティクスって意味。

それが終わったら次はトリガーです。

②トリガーを設定を押すと、トリガー選択画面になります。

ここでは「All Pages」を選べばOK。

全部終わると以下のような画面になります。

あとは保存を押せば完了。
STEP
タグマネージャーを公開する

最後にタグマネージャーを公開します。

「公開」ボタンを押すと次の画面になります。

ここでバージョン名とバージョンの説明を入力します。

ココらへんは自分が分かりやすければ何でもOK。

僕はどちらも「Googleアナリティクス追加」と入力しました。

で、最後に「公開」ボタンを押せば作業終了です。

とってもお疲れ様でした！

「公開」しないと、Wordpress上でGoogleアナリティクスが活動しません。忘れずに「公開」しましょう。