THE SONICにGoogle Tag Managerを設定する

5 min
THE SONIC - Google Tag Manager

WordPressのテーマ「THE SONIC」に、Google Tag Managerを設定しました。

そしたらちょっと問題あったので、そこらへん詳しく書いてます。

ハマるポイントがあったので注意です〜

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

Googleタグマネージャーを導入したら、きっとGoogle Analyticsを利用しますよね。

でもTHE SONICだと、Googleタグマネージャーを通したGoogle Analyticsって、まともに動かなくなっちゃうんです。

どんな感じになるかというと、初回のアクセスは大丈夫なんだけど、そこからのページ遷移を計測しなくなるんですよ。

いやーこれ大問題ですよねwww

どんなにページ遷移があってもPV1、離脱率100%、直帰率100%という。(汗)

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

THE SONICの高速化機能

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

THE SONIC - Pjaxの設定

※2021年7月現在

これが影響しています。

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

Pjaxと聞いて、( ゚д゚)ポカーン となっている人へ・・・

Pjaxってなんだ?

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

ここポイントなんですけど、サイトへの初回アクセスには関係しません。

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

<例>
①Google検索 → ②自サイト → ③自サイトの別ページ

この「③自サイトの別ページ」を表示するときに、Pjaxを使ってると爆速になるわけです。

ちなみにこのサイトもPjax使ってますよ!

他のページ開いてみて、爆速だから・・・・

GoogleタグマネージャーかPjaxを諦める

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

いやプログラムを探って改造すれば、両立できるかもですけどね。

そこに時間使いたくないなと・・・。

で、もし他にも外部ツールを使う予定の場合。

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

そういう場合は、先に入れてみてPjaxでちゃんと動くか確認したほうが良いですね。

たぶんページ遷移したときに、想定通りに動かないんじゃないかなと。

そんな場合はPjaxを諦めて使わないようにしましょう。代わりにGoogleタグマネージャーがOKです。

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

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

  1. STEP

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

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

    ※ユーザーの新規登録の手順は省きます。

  2. STEP

    アカウントとコンテナを作成

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

    GTM - アカウント新規

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

    GTM - コンテナ追加
    GTM - コンテナ追加②

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

    個人的には、タグマネージャー内のアカウントは1つで十分かなと。

    アカウントの使い分けって、仕事で複数のクライアントを持つような人がするのかなと思います。

  3. STEP

    タグマネージャーのコードをTHE SONICに貼り付ける

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

    GTM - 貼り付けコード発行

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

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

    THE SONIC - GTMコード

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

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

となるハズなんですが

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

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

SONICE - エラー画面

 ( ・ὢ・ ) むむっ?

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

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

WAFとは?

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

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

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

conoha wingでWAFをOFFにする

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

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

conoha wing - WAF設定

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

このサイトもconoha wingで動いてます。

XserverでWAFをOFFにする

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

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

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

Xserver - WAF設定

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

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

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

さくらインターネット - WAF

WAFは後でONに戻そう

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

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

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

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

ここまでくれば、あとはタグマネージャーにGoogle Analyticsを設定するだけです。

※Google Analyticsの設定は先に済ませておいてください。ここでは省略します。

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

  1. STEP

    ワークスペース画面で「新しいタグ」を選択

    GTM - ワークスペース
  2. STEP

    タグ設定画面でタグとトリガーを設定する

    GTM - タグ設定

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

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

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

    GTM - タグタイプ選択

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

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

    それが終わったりつぎはトリガーです。

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

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

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

    GTM - Googleアナリティクス

    あとは保存を押せば完了。

  3. STEP

    タグマネージャーを公開する

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

    GTM - ワークスペース

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

    GTM - バージョン管理

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

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

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

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

    お疲れ様でした!

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

Google Analyticsで動作確認

すべての作業が終わったら、Google Analyticsで動作確認してみてください。

Google Analyticsにログインしている状態で、自分のサイトにアクセスします。

そして「アクティブ ユーザーののリアルタイム」が1になったら成功です。

初めてのアクセスは自分で( ˘ ³˘)♥

GA - リアルタイム

この1を大きくするために、お互い頑張りましょう^^;

Chromeに拡張機能の「Page Analytics」を入れている場合、あなたのアクセスはGoogle Analyticsにカウントされないので注意。僕はこのことをすっかり忘れていた。。

あとがき

まさかGoogleタグマネージャーを通してGoogle Analyticsを使うと、こんな落とし穴があるなんて。

だからTHE SONICには、Google Analyticsだけしか設定場所が用意されてなかったんですね。

ただ他のWordpressテーマにはない、高速化機能のPjaxを使えるところは凄く魅力的です。

どちらを優先すべきかは悩むところですね。^^;

僕は今のところPjaxを優先させてます。

ゴトーS

ゴトーS

大学中退からITエンジニアとなって15年ほど経ちました。ブラック企業→ベンチャー企業を経て、フリーランスエンジニアとして13年ほど。特にスキルもなく英語もロクに喋れないけどベトナム、台湾での仕事経験が豊富です。自分の仕事を持ちたくて、開発以外の仕事にも力を入れてます。
» 詳しいプロフィールはこちら

FOLLOW

カテゴリー:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA