From 5359dc344b02d59e79c84c538716a73063db5ecf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9ssica=20Novo?=
 <50515278+JessicaNovo@users.noreply.github.com>
Date: Mon, 18 May 2020 10:00:33 +0100
Subject: [PATCH] #41 tested the google tag manager to id shops clicked

---
 gatsby-config.js              | 20 +++++++++++++++++++-
 package.json                  |  1 +
 src/components/Shops/Card.jsx | 20 +++++++++++++-------
 yarn.lock                     | 14 ++++++++++++++
 4 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/gatsby-config.js b/gatsby-config.js
index 7da1dbd..9d6b7e2 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -180,7 +180,25 @@ module.exports = {
     {
       resolve: 'gatsby-plugin-google-analytics',
       options: {
-        trackingId: 'UA-162021632-1',
+        // trackingId: 'UA-162021632-1',
+        trackingId: 'UA-166369673-1', // I put my account just to test the tagmanager
+      },
+    },
+    {
+      resolve: 'gatsby-plugin-google-tagmanager',
+      options: {
+        id: 'GTM-52RL5N9', // I put my account just to test the tagmanager
+
+        // Include GTM in development.
+        // Defaults to false meaning GTM will only be loaded in production.
+        includeInDevelopment: true,
+
+        // datalayer to be set before GTM is loaded
+        // should be an object or a function that is executed in the browser
+        // Defaults to null
+        defaultDataLayer: {
+          platform: 'gatsby',
+        },
       },
     },
     {
diff --git a/package.json b/package.json
index 6c4bf65..4c2f3c8 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "gatsby-node-helpers": "^0.3.0",
     "gatsby-plugin-alias-imports": "^1.0.5",
     "gatsby-plugin-google-analytics": "^2.2.2",
+    "gatsby-plugin-google-tagmanager": "^2.3.1",
     "gatsby-plugin-manifest": "^2.2.48",
     "gatsby-plugin-material-ui": "^2.1.6",
     "gatsby-plugin-netlify-cms": "^4.2.4",
diff --git a/src/components/Shops/Card.jsx b/src/components/Shops/Card.jsx
index f3f4516..fde5e5d 100644
--- a/src/components/Shops/Card.jsx
+++ b/src/components/Shops/Card.jsx
@@ -69,29 +69,35 @@ const ShopsCard = ({ shop }) => {
         }) }
         disableRipple
         onClick={ handleExpandClick }
+        id={ `click-tracker__${shop.name}__action-area` }
+        data-shop={ shop.name }
       >
-        <CardContent className={ classes.content }>
-          <Typography gutterBottom variant="h5" component="h2" className={ classes.title }>
+        <CardContent className={ classes.content } id={ `click-tracker__${shop.name}__card-content` } data-shop={ shop.name }>
+          <Typography gutterBottom variant="h5" component="h2" className={ classes.title } id={ `click-tracker__${shop.name}__name` } data-shop={ shop.name }>
             { shop.name }
           </Typography>
-          <Typography variant="body2" color="textSecondary" component="p" className={ classes.location }>
+          <Typography variant="body2" color="textSecondary" component="p" className={ classes.location } id={ `click-tracker__${shop.name}__location` } data-shop={ shop.name }>
             { shop.location.join(', ') }
           </Typography>
-          <Typography variant="body2" color="textSecondary" component="p" className={ classes.businessType }>
+          <Typography variant="body2" color="textSecondary" component="p" className={ classes.businessType } id={ `click-tracker__${shop.name}__business-type` } data-shop={ shop.name }>
             { shop.businessType.join(', ') }
           </Typography>
-          <Typography variant="body2" color="textSecondary" component="p" className={ classes.product }>
+          <Typography variant="body2" color="textSecondary" component="p" className={ classes.product } id={ `click-tracker__${shop.name}__product` } data-shop={ shop.name }>
             { shop.product }
           </Typography>
         </CardContent>
 
         <CardActions
-          classes={ {
+          id={ `click-tracker__${shop.name}__card-actions` }
+          data-shop={ shop.name }
+          classes={ clsx({
             root: classes.cardActions,
-          } }
+          }) }
           disableSpacing
         >
           <ExpandMoreIcon
+            id={ `click-tracker__${shop.name}__expand-icon` }
+            data-shop={ shop.name }
             className={ clsx(classes.expand, {
               [classes.expandOpen]: expanded,
             }) }
diff --git a/yarn.lock b/yarn.lock
index ae2d1e7..598682d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -841,6 +841,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.9.6":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.6.tgz#a9102eb5cadedf3f31d08a9ecf294af7827ea29f"
+  integrity sha512-64AF1xY3OAkFHqOb9s4jpgk1Mm5vDZ4L3acHvAml+53nO1XbXLuDodsVpO4OIUsmemlUHMxNdYMNJmsvOwLrvQ==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/standalone@^7.9.5":
   version "7.9.5"
   resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.9.5.tgz#aba82195a39a8ed8ae56eacff72cf2bda551a7c3"
@@ -6790,6 +6797,13 @@ gatsby-plugin-google-analytics@^2.2.2:
     "@babel/runtime" "^7.8.7"
     minimatch "3.0.4"
 
+gatsby-plugin-google-tagmanager@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-google-tagmanager/-/gatsby-plugin-google-tagmanager-2.3.1.tgz#377824a10eacaf209b962527750647d2562bb8a5"
+  integrity sha512-8d6KwBKAeB3MxUuDfKuJG2gcqrLNIyUACd83D99hXSsqLNChTB5uRBq+0pfPtUEEqVpNvzr45wvxNUYwcmHTuA==
+  dependencies:
+    "@babel/runtime" "^7.9.6"
+
 gatsby-plugin-manifest@^2.2.48:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-manifest/-/gatsby-plugin-manifest-2.3.7.tgz#f4fdb4dc04a4dec2b669f5e49c959e7e687cf7c7"