THE SONICにGoogle Tag Managerを設定する

5 min
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(β版)』というやつ。

THE SONIC - Pjaxの設定

※2020年10月現在の話です

これが影響してます。

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

その前に!!

Pjaxと聞いて、ポカーンとなっている人へ説明をしたいなと( ゚д゚)ポカーン

Pjaxってなんだ?

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

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

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

図にすると・・・

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

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

早めにPjaxを諦めた

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

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

ゴトー

ゴトー

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

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

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

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

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

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の設定項目しか用意されてなかったんですね。

CocoonからTHE SONICに変えると、同じところでハマる人がいそうです。^^;

高速化機能のPjaxは、目がくらむほど魅力的です。

が使いこなすには、他の機能との相性を考えないとですね。

今のところPjaxは断念してます。

ゴトー

ゴトー

海外輸出(ebayなど)とブログでなんとか生活してます。今年こそはと一攫千金目指し中♫ちなみに英語は中学生レベル☆でもChatGPTのお陰で日々パワーアップ!お互いここから頑張りましょう(゚∀゚)ノ

FOLLOW

カテゴリー:
関連記事

コメントを残す

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

CAPTCHA