唐揚げ食べたい

六本木で働くwebエンジニアのブログです

php側でGAイベントを送る

概要

デフォルトでは <a href="hogehoge" onClick="ga('send', 'event', 'Videos', 'play', '');">link</a> みたいな感じでGAを仕込むと思いますが、それをphpでやる方法。

ユースケース

たとえばこういう…

DAUを計るためにログインボタンに ga() を仕込んでるんだけど、ログアウトしない限りは翌日もログイン状態が保持される。
そうなると翌日はログインボタンを押下されないから、ログインボタンに ga() 仕込むだけじゃ足りないじゃん!
→ じゃあサーバー側でログインチェックしたときにサーバー側(今回はphp)からイベント送ればいいじゃん!!

f:id:miyakona38572:20200408211833p:plain
処理の流れ
書いてて思ったけど、じゃあずっとphpで送れば?っていう。
いいんです細かいことは。

実装方法

これを使います。 developers.google.com

リファレンスがきれいなので、基本的にはリファレンス通り実装すれば問題ないです。
ハマりそうなのは、クライアントIDの取得部分。
今回のユースケースではログインチェックのためにAPIを叩くので、フロント側で発行されたクライアントIDを使いまわします(本来はフロントでやりたかったはずなのでいいかなって)。
クライアントIDは ga() で取得できます。

developers.google.com

追記。 POSTで送る場合のパラメータ付与、ハマっちゃいました(一回間違えた例で公開するほど…)

developers.google.com

本文には URI エンコードしたペイロード 1 つだけを含め、8,192 バイト以下にする必要があります

ということなのでエンコードしたものをBODYとして送信してください。
jsonとかで送らないでくださいね(自戒)

フロント側

ajaxの宛先はサーバー側にいく想定です。
ga() の中に ajax を入れて tracker.get() してるのがポイントです。
ついでにUAもとっておく。

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
  ga(function(tracker) {
    $.ajax({
      type: 'POST',
      url: 'https://hogehoge/islogin'
      data: {
        client_id: tracker.get('clientId'),
        user_agent:  window.navigator.userAgent
      }
    }).done({
      // 成功時の処理    
    });
  });
});
</script>

サーバー側

単純にcurlします。
パラメータを作るときにはこちらがおすすめ(GETになっちゃいますが)

ga-dev-tools.appspot.com

$url = 'https://www.google-analytics.com/collect';
$params = 'v=1';
$params .= '&t=event';
$params .= '&tid=UA-XXXX-Y'; // 自分のGAの管理画面で確認してね
$params .= '&cid='.urlencode($_POST['client_id']);
$params .= '&ua='.urlencode($_POST['user_agent']);
$params .= '&ec='.urlencode('Videos'); // この例だとencodeする必要ないけど…
$params .= '&ea='.urlencode('play'); // この例だとencodeする必要ないけど…

$ch = curl_init();
curl_setopt($ch , CURLOPT_POST, true);
curl_setopt($ch , CURLOPT_POSTFIELDS, json_encode($params));
curl_setopt($ch , CURLOPT_USERAGENT, $_POST['user_agent']);
curl_exec($ch);

curl_close($ch);

この記事を書くために改めてリファレンス読み返してみると、 ua というパラメータもあるのですね。
プロトコルの方にもUA設定できるけどどう違うんだろう。

おまけ

curlをわざわざ書きたくないよという人はこういうの使うのもいいと思います。
私は使ってないので使い心地とかは知りません github.com

追記

サーバ側の実装例が間違ってたので修正しました。ごめんなさい。

以上です。