ejtterをAMP対応でGoogleアナリティクス実装してみた(2018.9.23 AMP for WP 利用)(後編)

上海からの会襟はChina Eastern Airlines(中国東方航空)使ったのだけど、Wifiは無料でつかえるのね。

機内で便の番号とシート番号をいれてverify code求められたので、なにか買わないと行けないかと思ったら!no researvationをクリックしたら、つかえてしまった。

JALもANAも国際便はお金払うのに太っ腹!

さて本題、AMPをejtterに実装したので次にGoogleアナリティクスでAMPのページの解析を行う。実装したAMPページをマーケティングできるようにしていこう。

私は華麗に(wタグマネでやってみたい。でも抜けてそうなのでもしソースとか見てヌケモレあったら教えてくださいませ。

ロゴを挿入したけどこのプラグイン、ロゴの下に宣伝みたいなのがでてくる。ちょっとセンスなさすぎなのでロゴ削除した。

1.GoogleアナリティクスをAMPページ対応にする

それではいよいよAMPページのGoogleアナリティクス対応を行う。

そもそもなのだけど貼っただけでは十分ではなくて、トラッキングコードに加えAMP対応のコードにしないといけなくて、AMPでキャッシュされたページから本当のページに移動したときにAMPとページでcliantIDが異なるためユーザーもセッションも別になってしまう。AMP経由だとセッションもページビューも増えてしまう。それを防ぐための設定を行っておきたい。

まずGoogleアナリティクスでAMP対応のコードをいれたい。Google AMP Client ID API をつかおう。タグマネのソースコードをAMP対応ページにもいれておきたい。

 

2. <header>にAMPに必要な記述とSearch consoleの設定

多分すでにSearch console導入してる人はやる必要がないだろうけど

 

まとりあえずクローラーには来てもらおうかね、と思いあたりまえですが/amp/ページクローリングしてもらうように登録しておいた。

でもそこでふと「ampページってsearch consoleタグ入ってないけどどうなるだろう?と思い念の為コードをいれることにした。他のejtter.comはタグマネで所有者確認してるからいらないんだけどね。もしかしたらフォルダレベルではいらないかもしれないけど。テンプレートとかをいじってヘッダーに入れることもできるだろうけど気持ちが悪いので探してみる。

評判が良さそうなので‘Per Page add to head”をいれて、/amp/ページだけsearch consoleのタグをいれておいた。これはFetch as Googleだけでもよかったかもしれない。
あとヘッダーにampページであることを書いておく必要がある。

そこで以下を入れようとおもったけど、

ふとお思って/amp/ページのソース見てみたら、すでに入ってた。

AMP for WPかしこい!

さらにタグマネのソースコードをヘッダーに入れていったんAMPページヘッダー周りは設定完了。

3.AMP Client ID API を使えるようにする

次にAMP Client ID APIを有効にする。これでキャッシュされたページとウェブサイトのclient IDがおなじになりセッションもユーザーも別人にならない。

詳しくはGoogleアナリティクスのヘルプに書いてある。華麗でも何でもなくできる(笑

GTMをつかって設定する。
[フィールド名] を「useAmpClientId」に、[値] を「true」に設定

Googleアナリティクスの参照元から”cdn.ampproject.org”を除外する

これで完成。

 

 

 

 

Toshiaki Ejiri: Born in Fukushima, working as web analytics consultant since 2000.