WEBアプリケーションにおけるGoogle Analyticsの導入と実装の手引

himenon.github.io

WEB アプリケーションへの導入方法

analytics.jsとgtag.jsを利用する 2 通りの方法があります。 (2020/10/08)現在では、デフォルトでgtag.jsを利用することが進められています。

analytics.js を利用していて、gtag.js に移行したい場合はanalytics.js から gtag.js に移行するに移行方法があります。

また、その他の計測方法はウェブページの測定オプションに記載があります。

TypeScript の型定義

型定義はgtag.jsのほうが直感的で利便性が良いです。

gtag.js

yarn add -D @types/gtag.js

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/gtag.js/index.d.ts

analytics.js

yarn add -D @types/google.analytics

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/google.analytics/index.d.ts

計測する

イベントを送信する

gtag.js

const eventAction = "";
const eventCategory = "";
const eventLabel = "";
const eventValue = "";

// gtag.js
gtag("event", eventAction, {
  event_category: eventCategory,
  event_label: eventLabel,
  value: eventValue,
});

// analytics.js
ga("send", "event", eventCategory, eventAction, eventLabel, eventValue);

ページビュー

const GA_MEASUREMENT_ID = "";

// gtag.jsの場合 configの指定タイミングでpageviewが送信されるようになっている
gtag("config", GA_MEASUREMENT_ID, {
  page_title: document.title,
  page_path: location.pathname,
});

// analytics.jsの場合
ga("create", GA_MEASUREMENT_ID, "auto");
ga("send", "pageview", location.pathname);

仮想ページビューを送信する

手動でpage_viewを送信する方法。Single Page Applicationなどで利用する

const GA_MEASUREMENT_ID = "";
const PAGE_LOCATION = "";
const PAGE_TITLE = "";
const PAGE_PATH = location.pathname;
// gtag.jsの場合
gtag("config", GA_MEASUREMENT_ID, {
  send_page_view: false, // 複数のpageviewが計測されないように、config指定時にpage viewの送信を行わない
});
gtag("event", "page_view", {
  page_title: PAGE_TITLE,
  page_location: PAGE_LOCATION,
  page_path: PAGE_PATH,
  send_to: GA_MEASUREMENT_ID, // 複数のIDが存在する場合、計測対象を明示する
})

// analytics.jsの場合
ga("set", "page", PAGE_LOCATION);
ga("send", "pageview");