Merge pull request #533 from cofacts/remove-ua

Remove universal analytics and send more data to dataLayer

.env.sample

@@ -22,9 +22,6 @@ PUBLIC_API_URL=https://dev-api.cofacts.tw
 # Google tag manager ID GTM-XXXXX
 PUBLIC_GTM_ID=
 
-# Google analytics tracking ID UA-XXXXXXXX-X, pass through to dataLayer as GA_TRACKING_ID
-PUBLIC_GA_TRACKING_ID=
-
 # ------
 # Build-time config that does not vary across docker images.
 # All of them must be passed as build arg in Dockerfile, so that Webpack Define plugin can replace

README.md

@@ -69,20 +69,17 @@ Storybook will be available under /storybook/index.html after build.
 
 This project supports Google Tag Manager. You can prepare the following setup in `.env` file:
 - `PUBLIC_GTM_ID`: Google Tag Manager Container ID (`GTM-XXXXXXX`)
-- `PUBLIC_GA_TRACKING_ID`: Google analytics trakcing ID (`UA-XXXXXXXX-X`). `rumors-site` will *not*
-  load Google analytics itself; instead, it will push `GA_TRACKING_ID` to `dataLayer`, and it is your
-  responsibility to pick it up as a Data Layer Variable and setup Google Analytics in Google Tag Manager.
 
-The application will fire the following custom events:
+The application will fire the following custom events in GTM `dataLayer`:
 
 - `routeChangeStart` - when next-router starts route change
 - `routeChangeComplete` - when next-router finish route change
 - `dataLoaded` - when article / reply is loaded in article & reply page
 
 Also, it will push the following custom variable to `dataLayer`;
 
-- `GA_TRACKING_ID` - see `PUBLIC_GA_TRACKING_ID`
 - `CURRENT_USER` - Current user object, set by `useCurrentUser`.
+- `doc` - Set when `dataLoaded` event fires. The loaded content itself in object, including its `__typename`.
 
 Lastly, in Google Tag Manager we use `data-ga` property to track clicks.
 If user clicks a decendant of an React element with `data-ga` property,

lib/gtm.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 
 /**
  * Google tag manager related utility functions
@@ -16,12 +16,15 @@ export function pushToDataLayer(...args: unknown[]) {
 
 /**
  * @param trigger - trigger useEffect() after trigger turns truthy
- * @param args - data to send to pushDataLayer on trigger change
+ * @param args - data to send to pushDataLayer on trigger change. It's sent only once.
+ *               Changes to args afterwards does not trigger push anymore.
  */
-export function usePushToDataLayer(trigger: unknown, args: object) {
+export function usePushToDataLayerOnce(trigger: unknown, args: object) {
+  const triggeredRef = useRef(false);
   const dontTrigger = !trigger;
   useEffect(() => {
-    if (dontTrigger) return;
+    if (dontTrigger || triggeredRef.current) return;
+    triggeredRef.current = true;
     pushToDataLayer(args);
   }, [dontTrigger, args]);
 }