【PHP】Webビーコンの利用

どうも、開発部のSです。

最近、Webビーコンを使った、サイトのアクセス解析やメールの開封通知について
調べる機会があったので、今回はWebビーコンの使用例を紹介したいと思います。

まず、Webビーコンを簡単に説明すると、Webページに埋め込まれた小さな画像のことで、
画像を読み込むとサーバにアクセスし、情報が送られます。

Webビーコン使用例(PHP)
・サイトのアクセス解析
  (1) gifを読み込み(HTML) → phpが1×1の透明な画像を返却し、アクセス解析(PHP)
      →サンプル①参照

  (2) JavaScriptを利用してより多くの情報を取得
      JavaScriptの読み込み(HTML) → Ajaxを使いPOST送信(JS) → データを取得し、アクセス解析(PHP)
      →サンプル②参照

・メールの開封通知
  (1) 送信相手ごとに違うIDをHTMLに設定してメール送信 → IDを利用して集計
      idを送る相手によって変更する。アクセスした人を特定して集計できるが、
      送信相手の数によってはHTML作成が大変になる。
      →サンプル①参照

  (2) 送信相手に関わらず同じHTMLメールを送信 → IPアドレスなどを利用して集計
      送信する人が増えても、HTMLを作成する必要がない。だが、人の特定が難しい。
      IPが変わらないことを前提にIPを取得するなど工夫が必要。しくはカウント専用など。
      →サンプル①参照

Webビーコン設定
—————————————————————————————-
 サーバの .htaccess に追記
—————————————————————————————-
  AddHandler myphp-script .php .gif
  #GIF画像をphpプログラムとして作動させる

  RewriteEngine on
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteRule detail/([0-9a-z]+)\.gif$ /XXXX.php?id=$1
  #gifにアクセスがあった場合はXXXX.phpにリダイレクトできる
—————————————————————————————-


サンプル①
—————————————————————————————-
 HTML(メールやWebページなど)
—————————————————————————————-
  <html>
  <body>
    <!– 表示したい内容 –>
    <!– <img src=(URLを指定)?(引数指定)> –>
    <img src=http://localhost/index.php?id=123>
  </body>
  </html>
—————————————————————————————-
 サーバのPHPファイル(index.php)
—————————————————————————————-
 //GIFに見せかける
 header(‘Content-Type: image/gif’);

 //キャッシュされないようにヘッダを設定
 header(‘Expires:Fri, 10 May 2013 00:00:00 GMT’);
 header(‘Cache-Control:private, no-cache, no-cache=Set-Cookie, must-revalidate’);
 header(‘Pragma: no-cache’);
 //1×1の透過画像を返す(ここではbase64エンコードを使っている)
 echo base64_decode(“R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D”);
 //以降、アクセス集計処理を記載
—————————————————————————————-


サンプル②
—————————————————————————————-
 Webビーコンは利用せず、JavaScriptを読み込むHTML
—————————————————————————————-
<html>
<head>
  <!– jqueryの読み込み –>
  <script type=”text/javascript” src=”jquery-1.11.2.min.js”></script>
  <!– JavaScriptの読み込み (src=サーバのJSファイル) –>
  <script type=”text/javascript” src=”referrer.js”></script>
</head>
<body>
  <!– 表示したい内容 –>
</body>

</html>
—————————————————————————————-
 サーバのJSファイル(referrer.js)
—————————————————————————————-
//リファラの取得
    var myRef = document.referrer;
    var myAgent = window.navigator.userAgent;
    //POSTデータ送信(url:サーバのPHPファイル)
    $.ajax({
        type: ‘post’,
        url: ‘index.php’,
        data: {
            Ref: myRef ,
            Agent: myAgent
        }
    });
—————————————————————————————-
 サーバのPHPファイル(index.php)
—————————————————————————————-
<?php
// POST受信
$Ref = $_POST[“Ref”];
$Agent = $_POST[“Agent”];
//以降、アクセス解析処理
?>
—————————————————————————————-

Webビーコンを使う際の参考になればと思います。