この記事は、リンクバルアドベントカレンダー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を利用する際には、プライバシーポリシーなどで同意を取ったうえで、データを収集、利用しましょう。
ここまで読んでいただきありがとうございました。