この記事は、リンクバルアドベントカレンダー2022の10日目の記事です。

はじめに

入社してから2年間ほどCoupLinkという自社サービスを開発していました。今年からジョブローテーションの制度をきっかけにしてmachicon JAPANという自社のメインサービスの開発に変わりました。
1年間ほどプロジェクトの開発をしてだんだん仕組みを把握できるようになりました。それに、まだ触ったことがない実装にもチャレンジしました。それらの中でWebbeacon修正を行いました。

Webbeaconってなにこれ？

Webbeacon（ウェブビーコン）とは、ウェブページやHTML形式の電子メールに埋め込まれた非常に小さなサイズの画像（普通は１x１のピクセル）です。
目的はユーザーがウェブページやメールにアクセスした情報をサーバーに伝えることです。注意して欲しいのはユーザーから利用同意を取得したうえで、データを取得してください。
Webbeaconは縦横１ドット程度なので画面に存在してもほとんど気付かれない大きさで、UIに悪影響を与えていないはずです。
Openpixelというオープンソースを利用してカスタマイズしてから取得したい情報を取るようにしました。UX品質を向上させるためにこれらの情報は非常に役に立っています。

どのように動くか

HTML形式の電子メールやウェブページに挿入したらアクセスの情報を取得できるようになります。
取得したい情報はパラメーター形式でWebbeaconのピクセルに追加して画像データがロードされるときサーバーに送信されます。
例を挙げます。下記のURLは情報を追加されたWebbeaconピクセルのURLです。

https://tracker.example.com/pixel.gif?id=R29X8&uid=1-ovbam3yz-iolwx617&ev=pageload&ed=%7B%22somedata%22%3A123%7D&v=1&dl=http://example.com/&rl=http://google.com/&ts=1464811823300&de=UTF-8&sr=1920x1080&vp=640x720&dt=Example&bn=Chrome%2050&md=false&ua=Mozilla/5.0%20(Macintosh;%20Intel%20Mac%20OS%20X%2010_11_5)%20AppleWebKit/537.36%20(KHTML,%20like%20Gecko)%20Chrome/50.0.2661.102%20Safari/537.36&utm_source=&utm_medium=&utm_term=&utm_content=&utm_campaign=

これらの情報はBigQueryなどで計算されます。これらを活用することで、UI/UXを向上させる企画を考えられます。

キー	値	内容
id	R29X8	トラキングしているウェッブ・アプリのID
uid	1-ovbam3yz-iolwx617	ユーザーのID
ev	pageload	発火されたイベント
ed	{"somedata":123}	取得したい情報のJSON
v	1	openpixelJSのバージョン
dl	http://example.com/	ドキュメントのロケーション
rl	http://google.com/	リファラルのロケーション
ts	1464811823300	タイムスタンプ（ミリ秒）
de	UTF-8	ドキュメントのエンコーディング
sr	1920x1080	画面の解像度
vp	640x720	ビューポート
dt	Example	ドキュメントのタイトル
bn	Chrome 50	ブラウザー名
md	false	モバイル端末かどうか
ua	Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36	ユーザーエージェント
utm_source		Campaign Source
utm_medium		Campaign Medium
utm_term		Campaign Term
utm_content		Campaign Content
utm_campaign		Campaign Name

おわりに

WebbeaconはUI/UX向上させるために利用できる強いツールですが、利用者によって効果が高いか低いかが変わります。それに、AdsBlockなどの広告ブロックの第三者アプリがインストールされたら利用者は分からないうちに有用な情報を失くしてしまいます。ですから、導入の仕方や発火するタイミングをちゃんと考えて設定しておかないと効果がなかなか出ない場合もあります。改めの注意で、Webbeaconを利用する際には、プライバシーポリシーなどで同意を取ったうえで、データを収集、利用しましょう。
ここまで読んでいただきありがとうございました。

はじめに

Webbeaconってなにこれ？

どのように動くか

おわりに

参考