feat: add cta tracking for homepage (#802)

* feat: add cta tracking for homepage

* chore: use gatsby@next for testing

* chore: update theme to include card pass through

* ffeat: add resource card tracking for kit downloads

* docs: add analytics docs

* docs: add analytics docs

* docs: period

.eslintrc

@@ -4,6 +4,9 @@
     "react/prop-types": 0,
     "react/forbid-prop-types": 0
   },
+  "globals": {
+    "fathom": "readonly"
+  },
   "settings": {
     "import/resolver": {
       "node": {

docs/analytics.md

@@ -0,0 +1,3 @@
+# Analytics
+
+We use [Fathom](https://app.usefathom.com/share/vmsgxqrs/carbondesignsystem.com) for analytics tracking. Individual events can be fired off to track 'goals'. Ping the Carbon slack channel to add an event.

package.json

@@ -40,7 +40,7 @@
     "gatsby-plugin-fathom": "^1.1.1",
     "gatsby-plugin-lodash": "^3.1.3",
     "gatsby-plugin-remove-serviceworker": "^1.0.0",
-    "gatsby-theme-carbon": "^1.19.0",
+    "gatsby-theme-carbon": "^1.20.0",
     "html-loader": "^0.5.5",
     "lodash": "^4.17.15",
     "markdown-it": "^9.0.1",

src/gatsby-theme-carbon/templates/Homepage.js

@@ -44,6 +44,7 @@ const customProps = {
                 href="/updates/v10-migration/overview"
                 color="dark"
                 actionIcon="arrowRight"
+                onClick={() => fathom('trackGoal', '0GXPXZKE', 0)}
               />
             </div>
             <HomepageVideo />

src/pages/get-started/design/sketch.mdx

@@ -32,27 +32,31 @@ There are [four Carbon themes](/guidelines/color/overview#themes), two light (Wh
 <Row className="resource-card-group">
   <Column colMd={4} colLg={4} noGutterSm>
     <ResourceCard
+      onClick={() => fathom('trackGoal', 'P0OEN9TS', 0)}
       subTitle="Get the White theme"
       href="sketch://add-library/cloud/JaVzz">
       <MdxIcon name="sketch" />
     </ResourceCard>
   </Column>
   <Column colMd={4} colLg={4} noGutterSm>
     <ResourceCard
+      onClick={() => fathom('trackGoal', 'T7D1HJ3L', 0)}
       subTitle="Get the Gray 10 theme"
       href="sketch://add-library/cloud/Onwv2">
       <MdxIcon name="sketch" />
     </ResourceCard>
   </Column>
   <Column colMd={4} colLg={4} noGutterSm>
     <ResourceCard
+      onClick={() => fathom('trackGoal', 'LYFJTPDE', 0)}
       subTitle="Get the Gray 90 theme"
       href="sketch://add-library/cloud/eo37p">
       <MdxIcon name="sketch" />
     </ResourceCard>
   </Column>
   <Column colMd={4} colLg={4} noGutterSm>
     <ResourceCard
+      onClick={() => fathom('trackGoal', '3XH0SIBJ', 0)}
       subTitle="Get the Gray 100 theme"
       href="sketch://add-library/cloud/d13Ll">
       <MdxIcon name="sketch" />