【Cocoon設定】AMP対応のアナリティスクの設定の仕方!

こだわりライフ
渋谷 浩一郎

教育現場が自分の思いと異なると感じ、退職。肩書きをなくして自分の価値を見失い、追究するためにBlogを始める。最近、シシトウガラシに超辛いものがあるからこそ、トウガラシ社会は豊かだと感じている。人も辛い人、マイルドな人…多様でありたい!というのが理念。現在は、メーカー・会社の情報発信やブランド化のプロデュースを手がけている。

渋谷 浩一郎をフォローする

WordPressのテーマは山ほどありますが、僕はもう完全にCocoonファンであります。

ところが、別のBlogでアクセスが順調に伸びてきたなぁ…と喜んでいた矢先にアクセスが順調に落ちていきました。

ありゃ〜〜。記事は真面目にまずまず更新していますからなぜだ!って事になるわけです。

で、うっかりしていました。

Cocoonはめちゃめちゃ優れたテーマで、AMPにも対応しているわけです。

なのに、AMP対応ページのアクセスをカウントする設定をしていなかったわけです。

ですから、どうやって設定したのか…めちゃんこ丁寧に書いておきます!

目次を見て必要なところだけ拾い読みしてください。

 

スポンサーリンク

そもそもAMPって何やねん?

一言で言うと、読み込みがめっちゃ早い仕様のです。

スマホからインターネットにアクセスする人が増えたので、データーが軽く、サッと読み込めるページの方が快適という訳です。

おじさん
おじさん

何やこのページは!

いつまで経っても画面に出てきーひんやないか?

しぶやん
しぶやん

おじさん、焦りすぎじゃない?

まだ、15秒くらいしか経ってないですよ。

おじさん
おじさん

15秒も待てるか!

飴も落としたら3秒以内でないとアウトやろ!

これでは、ユーザーにとって快適な環境とは言えません。

と言う事は、こんなページが検索上位に上がる可能性は相当低いと推測できます。

そこで!

快適にサッとページが読み込めるようにAMPというものが開発されました。

 

AMPは便利なものだけど問題点があった!

Cocoonでは嬉しい事に、普通に記事を書いくだけでAMPにも対応してくれるので、お任せ!ってしていたわけです。

AMPに対応させないならここにチェック入れるという形だから敢えてチェックを入れる必要もない!というくらいお気軽な感じ。



ところが、AMPに対応させるという事は、同じページが二つできるイメージ

一つのブログ記事に対して、2つのアドレスが作成されます。

ところが、従来の一般的なページはアクセスを計測していましたが、サイトが育ってくると、当然、高速で画面が表示されるAMP対応ページの順位も上がってきて、そちらが見られる事が増えてきます。

なのにAMP対応のページのアクセスを計測していないと言う事は、アクセスが落ち、モチベーションも落ちてしまうという事におちいるわけです。

 

AMP対応ページもアナリティクスで計測するための準備とは?

どうしたら、AMP対応ページもアナリティクスでアクセスを計測できるのか、いろいろと調べて見ましたが、Googleタグマネージャーを使ってコードを貼るだけ!という内容のものが多かったです。

 

AMP対応ページもアナリティクスで計測する手順

Googleタグマネージャーでタグを2つ作成

それぞれのタグにアナリティクスのトラッキングIDを登録

作成した2つのタグをCocoonに貼り付ける

確かに、この手順でいいのですが、僕の場合、じゃあ、CocoonにはアナリティクスのアナリティクスのトラッキングIDを貼らなくてもいいのか?とかって疑問が出てきちゃうわけです。

これがよく分からないのに、作業を進めてもどうもしっくりこないんで、ここからはGoogleタグマネージャーの話からしていきます。

そんな仕組みはどうでもいいから、やり方だけ知りたいって方は、さらに○○へおすすみください。

 

Googleタグマネージャーって何をするところなのか?

一言でGoogleタグマネージャーの役割をいうと…

タグを一元管理する場所

という事になるのですが、これじゃさっぱりです。

そもそもタグとは何か?

簡単にいうと目印の事で、今回のようにあなたが作成したAMP対応のページのアクセス状況を把握しようと思えば、目印をつけておく必要があります。

実際には次のようなものがタグで、これまで、あなたがアナリティクスでアクセス状況が見れたのであれば、こんなのがブログに埋め込まれているという事です。

ややこしいし嫌だーって思う人もいるかもしれませんが、こんなのを使わずにAMP対応のページのアクセス状況は計測できますから、ここだけ我慢してください。

<html>

<!– Global site tag (gtag.js) – Google Analytics –>
<script async src=”https://www.googletagmanager.com/gtag/js?id=UA-111111111-1″></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’, new Date());
gtag(‘config’, ‘UA-111111111-1’);
</script>

</html>

タグを一元管理するというイメージは?

タグはアナリティクスのタグに限りません。他にも、

  • サーチコンソール(検索結果について分析するところ)
  • アドワーズ(広告設定をするところ)
  • アドセンス(広告を表示させる事で収入をもらう)

など…タグはたくさんあります。これを一元管理するというのは、盛り合わせ寿司と同じ事です。

エビ・マグロ・コハダ・イカ・さんま・イワシ…

別々にオーダーしてもいいんですが、一言で「盛り合わせ!」と済ます事もできるわけです。

この場合、あなたが運用しているブログに「分析オタク定食」のタグを貼り付けておけば、いろんなアクセス分析ができるという事です。

この「分析オタク定食」の内容をあなた自身で調整できる場所が、Googleタグマネジャーだという事です。

 

AMP対応のページにアナリティクスのタグを搭載するイメージ

このあと、実際に作業に入りますが、全体のイメージを図にしておきます。

最終的にはCocoonの設定欄にトラッキングIDを設定する事が目標になります。

解説によると、コンテナ(定食)を2種類作成して、それぞれのトラッキングIDを貼りましょうという事です。

実際は同じ内容のコンテナ(定食)を作る事になりますが、新たにAMP用のコンテナを作るように指定されていますから、素直にしたがっていきます。

勘のいいあなたは、もう察しがつくと思いますが、最後にこれまで掲載していたアナリティクスのトラッキングIDを消さないといけません。

CocoonのAMP対応のページのアクセスを計測する実際の手順!

 

概ね作業のイメージは伝わったと信じて…作業に入っていきましょう。

ここからはGoogleタグマネージャー上の作業

Googleタグマネージャーに行きます。

右上のログインの部分をクリックするとこんなのが出てきますから、タグマネージャーをクリック。

画面右上のアカウントを作成をクリック

 

続いてこんな画面になります。

アカウント名は自由ですが、複数のブログを管理する人はサイト名など分かりやすい名前をつけるようにしましょう。

上のように記入ができたら、続行ボタンをクリック。

続いてコンテナを作って行きますが、要するに定食の名前をつける作業です。

ここでは、先に一般的なページのアクセス解析の設定をして行きますからこの様にしました。

ここまでできたら、もちろん作成ボタンをクリック

利用規約が出てきますから、右上のはいをクリック

 

すると、恐怖の指示と難しそうなタグが出てきます!!

でも、大丈夫です。Cocoonの場合、必要な部分はGTM-1111111の部分だけです。

この部分が重要だ!ってことだけ思っておいてください。

さらにOKボタンを押して先に進みます。

今から定食の中身を作成して行きます。

新しいタグをクリック!

次にこんな画面が出てきます。

左上にタグの名前を入力します。

ここでは、一般ページのアナリティクスタグを入れるのでこんな名前にしました。

名前の入力ができたら、タグタイプを選択…の部分をクリック

次にこんなのが飛び出してきます。

Googleアナリティクス・ユニバーサルアナリティクスを選択

 

ここでGoogleアナリティクス設定で新しい変数をクリック

こんな画面が出てくるので、

①変数に名前をつけますが、これも何の目的なのか分かる名前にしておくといいです。

②下の図のように、自分のアナリティクスのトラッキングコードを入れる。

トラッキングコードは、UA-11111111-1こんな番号です。

③下の図のように入ったら画面右上の保存をクリック

 

これで、定食の中にアナリティクスがセットできました。

こんな画面が出てきます。

先ほど自分で名前をつけた変数の名前が表示されているのを確かめたら…

下のトリガーをクリック。

トリガーって「きっかけ」っていう意味で、この場合は、アナリティクスの計測が行われる「きっかけ」はどこに設定する?って聞かれているイメージです。

トリガーをクリックすると…

All Pagesを選択(まぁこれしか選択肢がないけどね)

そして、次の画面、右上の保存ボタンをクリック

これでようやく最初に作ったコンテナ(kosodate-shibuya.net-wp定食)の中にGoogleアナリティクスのタグがセットの全てが完了!

そして公開ボタンを押します!!

 

ところが最後にこんなのがまだ続きます。

どんな機能を盛り込んだタグなのかメモを残しておきなさい!ということです。

慣れてくるとタグマネージャーで様々な機能を一元管理できますから、分かりやすいメモを残して奥ことをオススメします。

バージョン名も何のつもりか書いておくようにしましょう。

そして、これが最後の最後か?!

公開ボタンをクリック。

おめでとうございます!

これで、タグマネージャーの設定は完了です。

 

このあと、ここで作ったコンテナのトラッキングIDをコピーして、Cocoonに貼り付けます。

今、画面はこのようになっているはずですから、画面上のバージョンをクリック

タグマネージャーのトラッキングIDが出現!

ここでこのトラッキングIDをコピーしてCocoonに貼ります!!

 

ここからはCocoon上での作業!

計測したいブログのダッシュボードに行き、画面上部の管理メニューのCocoon設定をクリック。

さらに下の図のように、アクセス解析・認証タブをクリック

下のタグマネージャーIDに先ほどコピーしたGTM-XXX…を貼り付けて、半分の作業が終了!

 

エェェェェーーーこれで半分!!って思われるかもしれませんが、これで一般ページのアクセスの計測ができるようになったわけです。

同じ作業をしてAMP用のタグマネージャーにGTM-XXX…を貼り付ける必要があります。

 

2回目!AMP用ページのタグマネジャーの準備!

Cocoonには、AMP用に新しいコンテナを作ってトラッキングIDを取得するように書かれていますから、もう一度、似たような作業を行います。

冒頭の部分だけ、少し迷うかもしれませんので、解説をしておきます。

画面の右上の部分をクリックして新しいコンテナをクリック

 

今度はAMP用のコンテナを次の様に作成します。

 

これで、残りの作業はイメージできると思います。

設定するアナリティクスのトラッキングIDは先ほどと同じものを使用してください。

ここからはGoogleタグマネージャー上の作業

に戻りましょう。

2回目の作業って全体の流れが分かっていますから、5分あれば十分終わります。

 

あとはスマホで自分のAMPページにアクセス!

これで、冒頭に言っていた問題が解決したはずです。

AMP用のページにも計測用のタグを入れましたので、あなたがAMPページにアクセスした時に、アナリティクスのリアルタイムで反応が見られるか確認して見ましょう。

これで、従来のページのアクセスもAMPページのアクセスも合わせて計測できるようになりました!

少しでもアクセスが伸びて、あなたのモチベーションアップに慣れば嬉しいです。

 

 

渋谷 浩一郎

教育現場が自分の思いと異なると感じ、退職。肩書きをなくして自分の価値を見失い、追究するためにBlogを始める。最近、シシトウガラシに超辛いものがあるからこそ、トウガラシ社会は豊かだと感じている。人も辛い人、マイルドな人…多様でありたい!というのが理念。現在は、メーカー・会社の情報発信やブランド化のプロデュースを手がけている。

渋谷 浩一郎をフォローする
こだわりライフ
スポンサーリンク
シェアしてくれたら喜びます!
ことば屋