Add docType and docId to dataLayer for dataLoaded event

README.md

@@ -69,20 +69,18 @@ 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`.
+- `docType` - Set when `dataLoaded` event fires. Can be either `article` or `reply`.
+- `docId` - Set when `dataLoaded` event fires. The ID of loaded content.
 
 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,

pages/article/[id].js

@@ -297,7 +297,11 @@ function ArticlePage() {
 
   const article = data?.GetArticle;
 
-  usePushToDataLayer(!!article, { event: 'dataLoaded' });
+  usePushToDataLayer(!!article, {
+    event: 'dataLoaded',
+    docType: 'article',
+    docId: query.id,
+  });
 
   if (loading && !article) {
     return (

pages/reply/[id].js

@@ -158,7 +158,11 @@ function ReplyPage() {
   }, [currentUser]);
 
   const reply = data?.GetReply;
-  usePushToDataLayer(!!reply, { event: 'dataLoaded' });
+  usePushToDataLayer(!!reply, {
+    event: 'dataLoaded',
+    docType: 'article',
+    docId: query.id,
+  });
 
   if (loading) {
     return (