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

やること

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

なので、Measurement Protocolを利用して、データを収集します。Measurement Protocolは、analytics.jsの上位に位置するAPIです。GETやPOSTでのアクセスでデータを収集することができます。

具体的には、<noscript><img src='...'>を使用して、JavaScript無効時に画像ファイルとしてGETでアクセスすることで、Analyticsのデータを収集します。

サンプルコード

<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=''/>
    <img src='https://www.google-analytics.com/collect?v=1&t=event&tid=UA-XXXX-Y&cid=1&ec=view&ea=js_disabled&ev=0&el=ページURL' alt=''/>
  </noscript>
</div>

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

ページビューを送信する

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

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

パラメータ 備考
v 1 バージョン(現状は1固定)
tid UA-XXXX-Y トラッキング ID
cid UUID クライアント ID
t event ヒットタイプ
ec view イベントカテゴリー
ea js_disabled イベントアクション
ev イベント値
el ページURL イベントラベル
https://www.google-analytics.com/collect?v=1&t=event&tid=UA-XXXX-Y&cid=1&ec=view&ea=js_disabled&ev=0&el=ページURL

補足

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));

  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('&'));
  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('&'));
})();

参考

コメント: 0

コメントを書く