Webやアプリのログを取得するとは?

 前回までは、Webサイト上の値を取得する方法に関しての記事をご紹介していきましたが、次にその知識を利用してWebやアプリのログを取得するとは具体的に何をしているのかという内容をご紹介できればと思っております。ただ、少し複雑になってくる部分もありますので、以下の記事は事前に読んで復習しておいてから見たほうが良い気がします!

参考


目次

はじめに

 参考に挙げた記事では今回の記事の基礎となる部分をいろいろ書いていきましたが、今回はWebやアプリ上でのエンドユーザーの行動ログを取得しようとするときの仕組みのご紹介が出来ればと思っております。具体的に何の仕組みだろう?と思われた方々もいらっしゃるかと思いますが、イメージはGoogle Analyticsのようなツールを想像してもらえば良いかと思います。
 例えば、Google Analyticsでは、Webサイト上に専用のscriptタグを記述することで、Webサイト上のエンドユーザーの行動ログを取得することが出来ます。それにより、どのページをよく見られているのか、どのページでよく離脱するのか、目標設定をしているコンバージョンページのページはどの程度見られているのかといった分析が出来るようになります。そして、Webサイト上のエンドユーザーにも、匿名情報ではあるもののcookieにユーザーを識別するための情報を付与することで区別することが出来るようになり、エンドユーザーの行動を究極一人ひとりの単位で確認することだって可能となります。
 特に、Google Analyticsの場合は無償ということもあり、多くのWebサイトで上記のような分析をやれていることになりますが、アプリでも概念自体は同様です。それこそ、アプリの場合は、SDKと言われるものをアプリに導入した上で、ログを飛ばすコードを記述するとエンドユーザーの行動ログの送信が出来るようになります。その結果として、Webサイト上での分析と同様に、エンドユーザーがどのスクリーンを閲覧しているのかといった指標を見ることも出来るようになります。
 では、Google AnalyticsのタグやSDKというものは実際にどのような仕組みで成り立っているのでしょうか?という部分が今回の記事でご紹介したい内容になります。Google Analyticsは、多くのWebサイトで利用されておりますが、それ以外にも世の中には大量のWebやアプリの解析ツールがあり、その中でログを取得するために実現している処理自体はGoogle Analyticsと概念レベルでは同じたったりしますので、具体的にどんな仕組みなのかという部分をしっかりと伝えられればと思います。

Webサイトやアプリにおけるログの取得

 まず、Webサイト側でのログの取得からご紹介できればと思っております。
 ちなみに、なぜアプリと一緒にご紹介しないのかというと、Webサイトでは共通言語であるHTML、CSSJavaScriptが、ChromeSafari、Edge、Firefoxといった多くのブラウザでOS問わず共通で開けるようにとブラウザ共通の仕様が決まっておりますが、一方でアプリに関しては全てのOSので同じ言語が使われるということ自体がまず成り立たず、iOSであればswiftという言語、AndroidであればKotlinやJavaといった言語が使われております。そのため、Webサイトのように簡単にタグを埋めれば良いというレベルでは成り立たなかったりします。
 これゆえに、Webサイト上での値の取得とアプリ上での値の取得も難易度が変わり、当然Webサイトの方が難易度は低いです。では、実際に何をしているのかというのをご紹介します。正直キャプチャを覚えておければ概念はほぼ大丈夫かと思います。

ブラウザからのログ送信

 やっていること自体は、上図の中でやっているようにWeb情報(Webページ上やcookie等のブラウザ上の情報)をいわゆるscriptタグというものを利用して、値をセットして、ログを送信するということになります。そのため、ログとして取得できる情報として、ログの収集日時、ブラウザやOSの情報を保持するuserAgent情報、cookie情報、ページURL情報、ページタイトル情報、行動種別(ビューやイベント)、ページ上の任意項目などの情報をJavaScriptの任意の変数にセット(イメージは、値の代入と一緒)し、その情報をAPI等で値を送信します。
 ここで、値のセット自体は、実際にWebサイト上の値の取得系でやったようなことを実施する形になります。少しJavaScripの基本知識も必要となりますが、以下のような形で値をセットしていきます。

値をセットするためのJavaScript

var tmp_logDate = new Date();
var logDate = tmp_logDate.getTime()
var Cookies = document.cookie;
var CookiesArray = logCookies.split('; ');
var logTargetCookie = '';
for(var i=0;i<CookiesArray.length;i++){
    if(CookiesArray[i].split('=')[0].match(/_target/)){
        logTargetCookie += CookiesArray[i].split('=')[1];
    }
}
var logUrl = location.href;
var logPageTitle = document.title;
var logUserAgent = navigator.userAgent;

 そして、このセットした値のそれぞれをログとして、送信していくこととなります。ログの送信時にはどのような方法を利用するかというと、ログを格納するサーバーとそのディレクトリを指定し、HTTP通信(若しくは、HTTPS通信)でデータを転送する形なります。その際に重要になるのはパラメータというものです。
 例えば実在はしないですが、HTTPS通信で「log.digitaldolphin.jp」というドメインの「/weblog」というディレクトリに対して、ログを送信する場合には、「https://log.digitaldolphin.jp/weblog?logDate=1668913629409&logTargetCookie=xxx&logUrl=https://www.digitaldolphin.jp/entry/2022/11/16/005855&logPageTitle=サーバー間のデータのやり取り - デジタル社会を泳ぐイルカ&logUserAgent=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36」のように通信を行います。*1
 この通信により、最終的にログがログ収集サーバーに対して送信されて、ログが蓄積されていきます。そして、この際にパラメータと言われる「?」以降のものが実際にログとして飛ばされるものとなります。(パラメータに関しては、別途ご紹介します。)そして、この飛ばされたパラメータ部分をサーバー側では処理を施し、データベースに格納することで分析などに利用されることになります。

 次に、アプリにおけるログの取得に関して、次に簡単にご紹介できればと思いますが、ほぼWebサイト上のログの取得と同じです。そのため、あんまり詳しく書かないですが、Webページの一つ一つはHTMLやCSSJavaScriptで記載されておりますが、アプリに関してはOS等で扱われるプログラミング言語が変わってきます。そのため、iOSであればswift、AndroidであればJavaやKotlinといったプログラミング言語が利用されております。そして、それぞれの言語にて、上記でご紹介したJavaScriptのように値を各変数にセットして、ログの送信自体は同じようにHTTPSやHTTPで通信することになります。実質やることは、本当にこれだけです。
 よくアプリのログとなると難しいイメージがかなりあるかと思いますが、それはWebと違いアプリで使われる言語が統一でない等が主な理由となり、またWebと違いエンジニアの数もアプリのエンジニアの方が少ないことが理由かと思います。

さいごに

 今回、ログの取得に関してのお話を致しましたが、覚えてほしいことは、「値をセットし、ログとして各値を送信する」という2ステップで基本的にはログは転送されているんだということと、それを上図のようなイメージと合わせて覚えたほうが良いということです。
 それだけがわかっていれば、一旦今回の内容は問題ないかと思います。

*1:実際には、日本語や記号は全てエンコードされて、「https%3A%2F%2Flog.digitaldolphin.jp%2Fweblog%3FlogDate%3D1668913629409%26logTargetCookie%3Dxxx%26logUrl%3Dhttps%3A%2F%2Fwww.digitaldolphin.jp%2Fentry%2F2022%2F11%2F16%2F005855%26logPageTitle%3D%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E9%96%93%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AE%E3%82%84%E3%82%8A%E5%8F%96%E3%82%8A+-+%E3%83%87%E3%82%B8%E3%82%BF%E3%83%AB%E7%A4%BE%E4%BC%9A%E3%82%92%E6%B3%B3%E3%81%90%E3%82%A4%E3%83%AB%E3%82%AB%26logUserAgent%3DMozilla%2F5.0+%28Windows+NT+10.0%3B+Win64%3B+x64%29+AppleWebKit%2F537.36+%28KHTML%2C+like+Gecko%29+Chrome%2F107.0.0.0+Safari%2F537.36」という通信が行われます。