皆さんが日々目にするインターネット広告には、アドテク(アドテクノロジー)と呼ばれる技術が使われています。
この技術の1つに「計測タグ」というHTMLタグがあり、世界中の様々なウェブページに設置され、ユーザのトラッキングを実現しています。
アドテクに興味がある方、興味が湧いた方、HTML/JavaScriptやWebアプリの知識を学びながら、作ってみませんか？

• インターネット上のユーザをトラッキングする技術
• HTMLタグ
• Web APIの設計
• 最終アウトプット(ログ収集、データの蓄積手法)をイメージした実装を行うこと

Cookieについて

•  HTTPのリクエストヘッダにCookieを付与するとサーバにCookieを送信できる
•  計測タグでAPIにリクエストを送る場合はimgタグを使い、1x1のピクセル画像が表示されるようにするのがオススメ。
•  Cookie の発行元（ファーストパーティ、サードパーティ）やセキュリティ上の制約について意識する必要がある。ローカルで環境構築する場合も、この点がうまく検証できるように設定する。

APIの設計

• 「誰が、いつ、どこから」アクセスしたかログを出力するようにしましょう。
•  追加で以下のような機能を考慮しても構いません。
•  たとえば、ECサイトの場合、来訪者が「１トップページ、２検索ページ、３商品ページ、４カートページ、５購入完了ページ」のどこまで行動を進めたか知りたい可能性がある。
•  また、ページの種類に応じて、任意のパラメータをタグおよびAPIに渡せるように設計する必要があるかもしれません。ECサイトの場合「商品ID」など。
•  例に挙げたECサイトだけでなく、様々な種類のウェブサイトにも使えるように汎用的に設計する必要があるかもしれません。（例：ウェブまんが）
•  アクセスログ分析の際にデータ同士の時間の整合性が合っている必要があるかもしれません。
•  ブラウザからのDo not track(DNT)要求がある場合にはトラック対象から外すようにしましょう
•  APIの設計ではHTTPリクエスト、HTTPレスポンスの形式を考えます。 
•  例えばHTTPにはGET, POSTなどのメソッドが用意されており、適切なメソッドを選びましょう。
•  何か情報を渡したい場合は、クエリストリング、リクエストボディ、リクエストヘッダを活用しましょう。
APIの設計方法は、Swaggerを利用する方法もあります。
以下はSwaggerで設計した一例です。
openapi: 3.0.0
info:
  title: 計測API例
  version: "0.0.1"
paths:
  /api/v1/users:
    post:
      description: |
        ユーザーを識別するidを生成して通知するためのAPI\
        計測タグはこのタグから返却されたidをcookieにセットする\
      requestBody:
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/users_for_post_request'
      responses:
        201:
          description: success
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/users_for_post_response'
  /api/v1/viewed:
    put:
      description: |
        ユーザーの計測タグ表示を記録するためのAPI
      parameters:
        - in: cookie
          name: user_id
          description: クッキーに記録されたユーザーを識別するためのid
          required: True
          example: 1bc29b36f623ba82aaf6724fd3b16718
          schema:
            type: integer
        - in: header
          name: DNT
          description: httpヘッダー上のDo not track ヘッダー
          required: False
          example: 0
          schema:
            type: integer
      responses:
        200:
          description: success
          content:
            application/json:
              schema:
                type: object
components:
  schemas:
    users_for_post_request:
        type: object
        description: 広告予測に活用する予定の情報などを追加する
    users_for_post_response:
      type: object
      properties:
        user_id:
          type: string
          example: 1bc29b36f623ba82aaf6724fd3b16718
この例では計測とユーザidの発行にAPIを分けていますが、計測タグは速度が重要なので一つに統合してリクエスト数を減らす方がよいかもしれません。
余裕があれば、swaggerでは記述できなかったサーバーサイド内部の動きについての設計書も別途作成しましょう。

個人情報

• 個人の特定できる情報は記録しない
対応ブラウザ
計測タグの場合、多様なブラウザが実行を行うため最新のブラウザ機能が使用できない場合が多いです。そのため下記のような考慮を行う事が必要になるかもしれません。
•  ビジネス要件から対応ブラウザの範囲決定
•  各ブラウザでの機能対応状況の調査
•  各ブラウザでの動作確認

JavaScript発火

JavaScriptはHTMLのロードに合わせて実行が行われますがそのタイミングを細かく制御することができます。
実行のタイミングによって計測タグでは下記のような問題が発生します。
•  ECサイトの商品情報をHTMLから手に入れる場合、DOMロード完了後に取得を行う必要がある
•  DOMロード後の計測を行った場合、離脱ユーザを検知できなくなる

冗長化、スケールアウト

多数のアクセスが発生する場合や、システムの稼働率を高めるためにはアプリケーションを複数起動させる要求からは免れないでしょう。
なるべく開発の初期から考慮して開発しましょう。

カウントアップ処理

Webでは多数のコンピュータがそれぞれタイミングで処理を行っています。
このような並行状態のある処理ではデータ不整合が発生する可能性があるので考慮しましょう。

セキュリティ

今回のアプリケーションの場合、主要なものとして下記のセキュリティリスクを考慮する必要があります。
他にも考えられるリスクがあれば対処しましょう。
•  XSS（計測タグ）
•  コードインジェクション（API）

•  HTTPのレスポンスヘッダにSet-Cookieを付与するとクライアントのブラウザにCookieを付与出来る