JavaScriptなしでGoogleAnalyticsデータを収集する

2019/05/292020/04/08

はじめに

JavaScript無効環境では、analytics.jsやgtag.jsでデータ収集することはできません。そのため、別の方法でデータ収集する必要があります。

ここでは、Measurement Protocolを利用して、データを収集します。Measurement Protocolは、analytics.jsの上位に位置するAPIです。GETやPOSTでのアクセスでデータを収集することができます。具体的には、<noscript>と<img src='...'>を使用して、JavaScript無効時に画像ファイルのGETアクセスからAnalyticsのデータを収集します。

ページビューを送信する

パラメータ	例	備考
v	1	バージョン（現状は1固定）
t	pageview	ヒットタイプ
tid	UA-XXXX-Y	トラッキング ID
cid	UUID	クライアント ID
dt	タイトル	ページタイトル
dl	ページURL	ページURL
z	289372387623	キャッシュの無効化

https://www.google-analytics.com/collect?v=1&t=pageview&tid=UA-XXXX-Y&cid=1&dt=ページタイトル&dl=ページURL

JavaScript無効イベントを送信する

パラメータ	例	備考
v	1	バージョン（現状は1固定）
t	event	ヒットタイプ
tid	UA-XXXX-Y	トラッキング ID
cid	UUID	クライアント ID
ni	1	非インタラクションヒット
ec	view	イベントカテゴリー
ea	js_disabled	イベントアクション
ev	値	イベント値
el	ページURL	イベントラベル
z	289372387623	キャッシュの無効化

https://www.google-analytics.com/collect?v=1&t=event&tid=UA-XXXX-Y&cid=1&ni=1&ec=view&ea=js_disabled&ev=0&el=ページURL

サンプルコード

<div style='display:none'>
  <noscript>
    <img src='https://www.google-analytics.com/collect?v=1&t=pageview&tid=UA-XXXX-Y&cid=1&dt=ページタイトル&dl=ページURL' alt='pageview'/>
    <img src='https://www.google-analytics.com/collect?v=1&t=event&tid=UA-XXXX-Y&cid=1&ni=1&ec=view&ea=js_disabled&ev=0&el=ページURL' alt='js-disabled'/>
  </noscript>
</div>

※<noscript>は、style属性なしの<span>に置換されるため、style属性は、<noscript>の外側に指定しています

補足

cidは、UUIDを指定する項目ですが、1を指定してもデータは収集されるようです。UUIDを算出できない環境ならば、1や固定UUIDを指定することで最低限動作するようです。

※ページURLに&が含まれる場合、正常にURLを収集できなため、URLのエンコードが必要となります

備考

JavaScriptありでMeasurement Protocolを利用するサンプルです。JavaScript無効環境と異なり、クライアントIDが取得できます。

(function() {
  const ANALYTICS_URL = 'https://www.google-analytics.com/collect';
  const GA_COOKIE = document.cookie.replace(/(?:(?:^|.*;)\s*_ga\s*\=\s*(?:\w+\.\d\.)([^;]*).*$)|^.*$/, '$1');
  const TRACKING_ID = 'UA-XXXX-Y';
  const CLIENT_ID =  GA_COOKIE || (Math.random() * Math.pow(2, 52));

  // ga('send', 'pageview', {title:document.title, location:location.href});
  navigator.sendBeacon && navigator.sendBeacon(ANALYTICS_URL, [
    'v=1', 't=pageview', 
    'tid=' + TRACKING_ID,
    'cid=' + CLIENT_ID,
    'dt=' + encodeURIComponent(document.title),
    'dl=' + encodeURIComponent(location.href)
  ].join('&'));
  // ga('send', 'event', {eventCategory:'category', eventAction:'action', eventLabel:location.href, eventValue:1, nonInteraction:true});
  navigator.sendBeacon && navigator.sendBeacon(ANALYTICS_URL, [
    'v=1', 't=event', 'ec=category', 'ea=action', 'ni=1',
    'tid=' + TRACKING_ID,
    'cid=' + CLIENT_ID,
    'el=' + encodeURIComponent(location.href),
    'ev=1'
  ].join('&'));
})();

バグ取りの日々