DRY up Gtags and language reporting.

index.html

@@ -8,7 +8,6 @@
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}
     gtag('js', new Date());
-    gtag('set', {app_name: 'Pen'});
     gtag('config', 'G-T8GEX2GPTP');
   </script>
 

src/App.jsx

@@ -5,7 +5,7 @@ import { ThemeProvider, createTheme } from '@mui/material/styles';
 
 import "./App.css";
 
-import { gaWatchStore, gaErrorReport } from "./ga";
+import { gaWatchStore, gaErrorReport, gaLangChange } from "./ga";
 import DocTitle from "./DocTitle";
 import Header from "./Header";
 import Footer from "./Footer";
@@ -15,6 +15,11 @@ import i18n from "./i18n";
 import store from "./store";
 gaWatchStore(store);
 
+i18n.on("languageChanged", (lng) => {
+  gaLangChange(lng);
+  window.document.documentElement.setAttribute('lang', lng);
+});
+
 const theme = createTheme({
   palette: {
     primary: {

src/ga.js

@@ -1,9 +1,20 @@
 import { debounce, partial } from "lodash";
 import { reaction } from "mobx";
 
+export const gtagEvent = (action, params) => {
+  if (window.gtag) {
+    window.gtag("event", action, {
+      app_name: "pen",
+      ...params,
+    });
+  } else {
+    console.warn("gtag not available, event not sent", action, params);
+  }
+};
+
 export const trackEvent = (action, label) => {
-  window.gtag("event", action, {
-    eventLabel: label
+  gtagEvent("event", action, {
+    event_label: label,
   });
 };
 
@@ -15,26 +26,30 @@ export const xHeightChange = partial(trackEvent, "change_x_height");
 
 export const outputAttempt = partial(trackEvent, "output_attempt");
 
-const reactRatio = ratio => {
+export const gaLangChange = (lng) => {
+  gtagEvent("language_change", { language: lng });
+};
+
+const reactioRatio = (ratio) => {
   presetChange(ratio);
 };
 
-const reactRatios = args => {
+const reactioRatios = (args) => {
   const [ratio, ...ratios] = args;
   if (ratio === "custom") ratiosChange(ratios.join(":"));
 };
 
-const reactXHeight = height => {
+const reactioXHeight = (height) => {
   xHeightChange(height);
 };
 
-export const gaWatchStore = store => {
-  reaction(() => store.ratio, reactRatio);
-  reaction(() => [store.ratio, ...store.ratios], debounce(reactRatios, 500));
-  reaction(() => store.xHeight, debounce(reactXHeight, 500));
+export const gaWatchStore = (store) => {
+  reaction(() => store.ratio, reactioRatio);
+  reaction(() => [store.ratio, ...store.ratios], debounce(reactioRatios, 500));
+  reaction(() => store.xHeight, debounce(reactioXHeight, 500));
 };
 
-export const gaErrorReport = e => {
+export const gaErrorReport = (e) => {
   console.error(e);
   window.gtag && window.gtag("exception", { description: e.message });
 };