投稿

PWAによるオフライン時のPVカウント実装 `sw-offline-google-analytics`

イメージ
Googleのオフィシャルで昨年アナウンスのあったnpmモジュール `sw-offline-google-analytics` を利用したオフライン実装は皆さん述べられている通り非常に簡単でしたのでメモ。


# 準備
## localhostにサンプルのPWAサイトを導入

1. node.jsをローカルへインストール
2. localの適当なディレクトリにPWAコンテンツを格納
3. `sw-offline-google-analytics` を導入

`npm install --save-dev sw-offline-google-analytics`

# service-worker.js を変更
## Googleドキュメントの通り service-worker.js に2行追加


※まだ最新版のバージョンは v0.0.25

## 計測が分かりやすいようにGA / GTMを設定
### Google Analytics側はカスタムディメンションを設定



### Google Tag Manager側は navigator.onLine でステータス把握
#### variable


#### tag側はカスタムディメンションにセット



# 実際の動きを確認
## ONLINE
通常どおりGA側にPVが送られている


## OFFLINE
GAへの送信がコケる


同時にIndexedDBへ格納される(4回OFFLINEアクセスをしてコケた時のキャプチャ)


## OFFLINE to ONLINE
まとめて送信される



# まとめ
moduleのバージョンが0.0.25なので今後のUpdateなども行われそうですが実装的には非常に簡単にできそうです。計測も問題はなかったのですが、数秒以内に何度もOFFLINEでアクセスをするといった場合はPVカウントがイマイチな気も少ししました(ネットワーク側の問題かも?)。ここは要検証。

ただ…注意事項としては
You should note that Google Analytics hits older than four hours are not guaranteed to be processed, but resending somewhat older hits "just in case" shouldn…

autotrackのプラグインで遊ぶ

イメージ
Google Analytics開発チームが作っているautotrack.jsで面白そうな拡張が出ているなと思いつつ…今月バージョンが1.0を向かえましたので、少しだけ遊んでみようかと思います。

autotrack.js はGAの新しいツールというわけではないのですが、元々GAの設定をカスタマイズするのは面倒だ…という場合にプラグインを使って簡単にキレイなデータ取得をしてしまおうと始まったと記憶しています。しかし今月バージョンが1.0に上がるタイミングで新しいプラグインが追加されたことによって、特にChromeを中心に新しく実装されたWeb APIを使った解析を体験出来るようになりました。
例えば…
impressionTracker これは「Intersection Observer API」を利用したもので、例えばページを開いたタイミングでは見えない特定のバナーや特定の領域がスクロール操作によって表示されたら、そのタイミングでイベントを飛ばすというもの。
テストではページの下の方にボタンを設置しておき、スクロール操作によってボタンが表示されたタイミングでイベントが飛びました。

pageVisibilityTracker Chromeをはじめタブブラウザを利用しているとウェブサイトを開いたままでもタブは非アクティブな場合がよくありますよね。 この非アクティブ <-> アクティブの変化時にイベントを飛ばすというもの。

この辺、凄く面白いですよね。 タブが非アクティブになったタイミングでセッションを一回切っても良いなと最近感じていました。
cleanUrlTracker autotrack.js が登場した当時からあったプラグインではありますが、URLをキレイにしてGAにデータを飛ばすというもの。 今回はURLにパラメータが付いていたら全て消してページビューとして集計するという設定。

URLのパラメータによって、同一ページなのにURLが大量に発生してしまい解析が面倒臭くなる…そんな事が無くなりますね。
outboundLinkTracker GTMが出てきた時から設定する人が多かった、自社サイトから他社サイトへのアウトバウンドリンクを踏んで出ていくイベントを取得するプラグインですね。
特定のページからどれだけ外に出ていってしまうのか等、アウトバウ…

セグメント機能で1条件と2条件に分ける基準は何でしょう…

イメージ
何度か書いているような気はしますが、セグメント機能はGoogle Analyticsだけではなく「分析」の側面でとても重要だということは言うまでもありませんが、同時に鬼門といっても過言ではないほど難しいポイントではないかとずっと感じております。

衣袋さんのメルマガをチラ見して、セグメント機能に関する電子本を出されるということで大いに期待しております(笑

セグメント機能に対して凄く単純な話、この2つの違いは分かるでしょうか?



未だにちゃんとテストはしていないのですが、かなり大規模なサイトの場合この2つのセグメント結果は微妙に異なります。
超大規模サイトの場合は値が変わることなんて様々な要因で日常茶飯事ではありますが。

で、現状は一応以下のように解釈しております。

2つは対象母集団の絞り方の違いでしか無い2つ目のパターンの場合は、まずChromeユーザを絞ってからその中から更に市区町村でセグメントがかかる動きをする。 即ち基数制限まわりの問題なのではないかと。
他にもシーケンスにするか単純条件とするか。結果はほぼイコールになったりする場合がありますし、毎日のようにセグメントを書いていてもちゃんと理解できていないなと思う事が多すぎて、非常に残念に感じてしまいます…
API側の場合は更にカオスになります。GUI側がちゃんと理解できていなければ間違えることは言うまでもありませんが、複数シーケンスで且つその中に条件が入り込む例などをGoogleヘルプでは見ることができますし、"その指定は必要?"という疑問も湧いてくるレベル。

閑話休題
様々な施策で事前に仮説立てをすると思いますが、それ以外にも調査をすることもあると思います。最近はメンバーに「とにかく思いつく疑問・質問を出せ」と言っています。 だいたい普通に思いつく疑問はサイトへの仕込み方やGAへのデータの食わせ方にも寄りますが、GA一つで数値は出せるかなと思っています。普段からGAを使いこなしている方の場合は、それ以外に出すことが難しいもの、出した後にデータをこねくり回さなくてはならず非常に面倒なものにぶち当たるかもしれません。
例えば最近あった個人的な課題としては ある特定セッション期間中に特定ページを●回以上見ている~ みたいな問題です。 2回とか3回ならデータを出せなくはないなーとか、データの取得方法を…

Google Analytics API V4をいじる

イメージ
Google Analytics APIがV4が出て数ヶ月が経ちました。少しずつ各種ツールもV3がV4に切り替わりつつあるような気がしています。今まで別々にデータを出力してからローカルでデータを集計したり、それを補うように以前は1ユーザあたりセッション数などを出力できるAPIが用意されて、直ぐに廃止されたりと色々な動きがありました。

またコホートなどV4でしか利用出来ないmetricやdimensionが出始めましたが、かなり柔軟で有用な代わりに多機能でV4用に覚えなおさないといけないという印象です。サポートツールも出始めているので、自分で細かく指定しなくても良くなりそうですが。

ちなみにReporting API V4は別APIとして管理されているようです。


2期間でのデータ比較metricsの計算結果を返すpivotを利用してヒストグラムを生成するコホート分析をする ※以下、VIEW_IDはみたいGAのビューIDを入れている前提となります。 ※JSONフォーマットの改行が無い状態で読みにくくなっている点ご了承ください。 1. 2期間でのデータ比較 Reporting API V4では期間を複数指定出来ます。
'reportRequests': [ { 'viewId': VIEW_ID, "dateRanges":[{"startDate":"2016-07-01","endDate":"2016-07-23"},{"startDate":"2015-07-01","endDate":"2015-07-23"}], "dimensions":[{"name":"ga:browser"}], 'metrics': [{'expression': 'ga:sessions'}] }]
出力サンプル
dateRangega:browserga:sessionsDate range (1)Android Browser5Date range (…

サイト構造とサイト内検索機能、そして自らウェブサイトの解析をしにくくする人達

イメージ
ウェブサイトの設計、データ設計、SEO、広告、解析。このあたりは基本的に切っても切り離せない関係にあるという事は恐らく大部分の人に納得いただける漠然とした共通理解だと思います。でも実際にはページやサイト、部署が別れていたり依頼するベンダーが別れていたりして、全く意思疎通がとれていないパターンがあります。

ウェブサイトの構造は様々ですが、よくあるパターンが左のようなTOPページからのツリー構造。

この構造を構築する場合、サイトの構造とユーザの理想となる動きは一致している必要があります。
よく言われる「カスタマージャーニー」とは異なるので以下の図は不適切かもしれませんが、ウェブサイト構造が末広がりのツリー構造となっている場合、ユーザストーリーに合わせてサイトの構造を作る必要があります。


サイト構造とユーザのストーリーを一致させようとウェブ担当者は頑張ってファセットの文言を調整したりナビゲーションを調整したり、UIの変更を計画していく訳ですが、新規にサイトを構築する、ページを構築する時に考えるのが「予期的UX」だったりします。


予期的UXを利用しつつサイトを構築していく過程でアクセス解析側の視点では、この予期的UXから構築されたウェブサイト構造の各導線の数値を計測し次の予期的UX側へのフィードバックをするか、また別の構造を検討したりページを追加する等の施策に繋げていきます。


更にこの一つ一つの計測数値(metrics)に対し、「アルゴリズム」という軸を掛け合わせていくと「パーソナライズ」という新しい側面が発生します。metricsパターンはパターン同士が交差する場合もあると思いますが、そのパターンから協調フィルタリングやらルールベースやらが発生したりします。


話は少し変わり、ウェブサイト構築後の集客という視点で見ると1ページあたりのアクセス数としては、サイト名・ブランド名でランディングするトップページや、カテゴリ名や分類名などでヒットするミドルワードでアクセスされやすい2階層目、3階層目ページのアクセス数はサイトの中でも1ページあたりの集客力は高めになり、逆にコンバージョンに繋がりやすいけどピンポイントで商品名や1サービス名でランディングするような末端ページは1ページあたりのアクセス数は少なくなる。そんな平行四辺形の構造ができあがります。


サイトページ群ごとにターゲットと…

Intersection Observerが導入されvisibility計算やウェブの高速化が進む?

イメージ
今年に入ってからポツポツと「Intersection Observer」の話が出てくるようになりました。
まだDraftの仕様ですが、GoogleですとChromeのバージョン51から導入されております。

広告やコンテンツにおけるVisibility評価コンテンツ読み込みをコンテンツ領域が実際に"表示された"タイミングで開始することでページ読み込みを待つ必要がない などのメリットがあります。(下のイメージはGoogleページから)

実際のdemoとしてはまだchrome betaかchrome devでしか見れませんが、画像のロードとしてdiv領域が50%に到達した時点で読み込む事を見せている、こちらのページでしょうか。

広告のvisibility評価が正確になるだけでなく、コンテンツ運営側にとっても実際読まれているの?という部分が明確化されるのと同時に、スマートフォンにおけるコンテンツ表示の評価にも役立つものになると思います。


4月下旬にはFinancial Timesが「ページ表示スピードは回遊に影響があるよ」と発表しております。

Intersection Observerに関して、gitにおいてある説明はこちらです。
他のブラウザ対応が少しずつ進んできたら一気に導入が進むかもしれませんが、Chromeのstableに導入されたタイミングでsample dataとしてデータを取得してみるのも良いのかもしれません。

読み込まれたタイミングでpingを飛ばしたり、GAのeventを飛ばしたり、広告入稿とひも付けたり。
個人的に結構やりたいことは沢山あります。

Google FusionTables x Chart API で社内(個人)用BI ダッシュボードは作れなくはない…

イメージ
# 概要
Google FusionTablesとGoogleのChart APIを利用して社内(個人)用BI ダッシュボードを作る。

# TL;DR * 全くオススメできない。可能か不可能かで言えば可能というだけ。
* FusionTablesとChart APIの組み合わせのオフィシャルドキュメントはFusionTablesのPublic Dataしか利用出来ないので社内データには利用出来ない。
* Google Apps Scriptを利用してウェブページを生成することで解決可能。ウェブページ生成のオフィシャルドキュメントはこの辺


# 一応作ってみた
HTMLのデザインなどなどはテキトー




# Google Drive内でウェブページを生成する
## Code.gs

function doGet(e) { var template = HtmlService.createTemplateFromFile('index'); return template.evaluate() .setTitle('stats') .setSandboxMode(HtmlService.SandboxMode.IFRAME); } function fTables1(){ var tableId = ''; var sql = "SELECT * FROM " + tableId; var res = FusionTables.Query.sql(sql); return res.rows; }
## index.html
codeを実行する部分だけ抜粋。


<head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['line']}); google.ch…