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

はじめに

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

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

ページビューを送信する

パラメータ備考
v1バージョン(現状は1固定)
tpageviewヒットタイプ
tidUA-XXXX-Yトラッキング ID
cidUUIDクライアント ID
dtタイトルページタイトル
dlページURLページURL
z289372387623キャッシュの無効化
https://www.google-analytics.com/collect?v=1&t=pageview&tid=UA-XXXX-Y&cid=1&dt=ページタイトル&dl=ページURL

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

パラメータ備考
v1バージョン(現状は1固定)
teventヒットタイプ
tidUA-XXXX-Yトラッキング ID
cidUUIDクライアント ID
ni1非インタラクション ヒット
ecviewイベントカテゴリー
eajs_disabledイベントアクション
evイベント値
elページURLイベントラベル
z289372387623キャッシュの無効化
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('&'));
})();

参考

コメント