Removes unnecesary packages and migrates events to new tag (#1089)

* Removes unnecesary packages and migrates events to new tag * Make function return values * Correct tracking functions * Adds tracking for subscription in the corresponding forms * Correct subscription tracking on CTA component * Fix test for Jorge --------- Co-authored-by: David Tuite <[email protected]>
RoadieHQ · Aug 17, 2023 · e564261 · e564261
1 parent d74d217
commit e564261
Show file tree

Hide file tree

Showing 11 changed files with 47 additions and 94 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -224,21 +224,6 @@ module.exports = {
 
     ...rssFeedPlugin,
 
-    {
-      resolve: `gatsby-plugin-google-analytics`,
-      options: {
-        trackingId: 'UA-166771003-3',
-      },
-    },
-
-    {
-      resolve: 'gatsby-plugin-google-tagmanager',
-      options: {
-        id: 'GTM-WFBJD3P',
-        includeInDevelopment: true,
-      },
-    },
-
     {
       resolve: `gatsby-plugin-google-gtag`,
       options: {

diff --git a/package.json b/package.json
@@ -31,10 +31,8 @@
     "gatsby-plugin-algolia": "^0.25.0",
     "gatsby-plugin-csp": "^1.1.3",
     "gatsby-plugin-feed": "^4.4.0",
-    "gatsby-plugin-google-analytics": "^4.4.0",
     "gatsby-plugin-google-fonts": "^1.0.1",
     "gatsby-plugin-google-gtag": "^5.10.0",
-    "gatsby-plugin-google-tagmanager": "^4.4.0",
     "gatsby-plugin-image": "^2.4.0",
     "gatsby-plugin-manifest": "^4.4.0",
     "gatsby-plugin-module-resolver": "^1.0.3",

diff --git a/src/components/CallToAction/ExtendedGetInstanceCallToAction.js b/src/components/CallToAction/ExtendedGetInstanceCallToAction.js
@@ -13,6 +13,7 @@ import { ScmToolSelect } from '../forms/ScmToolSelect';
 
 import { FORM_NAMES, HONEYPOT_FIELD_NAME } from '../../contactFormConstants';
 import { currentlyExecutingGitBranch, recaptchaEnabled } from '../../environment';
+import { trackRequestTrial, trackSubscribe } from '../../googleAnalytics';
 
 const submitToNetlifyForms = async ({
   email,
@@ -48,6 +49,10 @@ const submitToNetlifyForms = async ({
       method: 'POST',
       body: formData,
     });
+    trackRequestTrial();
+    if (subToNewsletter) {
+      trackSubscribe();
+    }
   } catch (error) {
     console.error('Submission failed', error, resp);
   }

diff --git a/src/components/CallToAction/NetlifyFormCallToAction.js b/src/components/CallToAction/NetlifyFormCallToAction.js
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 
-import trackGoogleAnalyticsEvent from '../../googleAnalytics';
 import trackPlausibleEvent from '../../plausible';
 import EmailCaptureForm from './EmailCaptureForm';
 import { FORM_NAMES, HONEYPOT_FIELD_NAME } from '../../contactFormConstants';
@@ -50,12 +49,6 @@ export const submitEmailToNetlifyForms = async ({
     return Promise.reject();
   }
 
-  trackGoogleAnalyticsEvent({
-    category: 'form',
-    action: 'submit',
-    label: netlifyFormName,
-  });
-
   trackPlausibleEvent(netlifyFormName);
 
   return resp;

diff --git a/src/components/CallToAction/RequestDemoCallToAction.js b/src/components/CallToAction/RequestDemoCallToAction.js
@@ -12,6 +12,7 @@ import { ScmToolSelect } from '../forms/ScmToolSelect';
 
 import { FORM_NAMES, HONEYPOT_FIELD_NAME } from '../../contactFormConstants';
 import { currentlyExecutingGitBranch, recaptchaEnabled } from '../../environment';
+import { trackRequestDemo, trackSubscribe } from '../../googleAnalytics';
 
 const submitToNetlifyForms = async ({
   name,
@@ -46,6 +47,10 @@ const submitToNetlifyForms = async ({
       method: 'POST',
       body: formData,
     });
+    trackRequestDemo();
+    if (subToNewsletter) {
+      trackSubscribe();
+    }
   } catch (error) {
     console.error('Submission failed', error, resp);
   }

diff --git a/src/components/CallToAction/SubscribeToNewsletter.js b/src/components/CallToAction/SubscribeToNewsletter.js
@@ -4,24 +4,25 @@ import { FormSubmissionModal } from 'components/FormSubmissionModal';
 
 import CallToAction from './NetlifyFormCallToAction';
 import { FORM_NAMES } from '../../contactFormConstants';
+import { trackSubscribe } from '../../googleAnalytics';
 
-export const SubscribeToNewsletterSuccessModal = (props) => (
-  <FormSubmissionModal
-    titleText="You're subscribed!"
-    bodyText={
-      <>
-        <p>We publish most Mondays so you&apos;ll receive your first edition soon.</p>
-        <p>
-          In the meantime, we&apos;d love to show you our flexible SaaS Backstage platform...
-        </p>
-      </>
-    }
-    followOn="GET_TRIAL"
-    {...props}
-  />
-);
+export const SubscribeToNewsletterSuccessModal = (props) => {
+  return (
+    <FormSubmissionModal
+      titleText="You're subscribed!"
+      bodyText={
+        <>
+          <p>We publish most Mondays so you&apos;ll receive your first edition soon.</p>
+          <p>In the meantime, we&apos;d love to show you our flexible SaaS Backstage platform...</p>
+        </>
+      }
+      followOn="GET_TRIAL"
+      {...props}
+    />
+  );
+};
 
-export const SubscribeToNewsletterCTA = (props) => (
+export const SubscribeToNewsletterCTA = ({ setModalOpen, ...props }) => (
   <div className="text-center">
     <div className="pb-3">
       <Title text="Become a Backstage expert" />
@@ -30,12 +31,18 @@ export const SubscribeToNewsletterCTA = (props) => (
     <p className="prose prose-primary mb-3 max-w-62 mx-auto">
       To get the latest news, deep dives into Backstage features, and a roundup of recent
       open-source action, sign up for Roadie&apos;s Backstage Weekly.{' '}
-      <Link color="primary" to="/backstage-weekly/">See recent editions.</Link>
+      <Link color="primary" to="/backstage-weekly/">
+        See recent editions.
+      </Link>
     </p>
 
     <CallToAction
       buttonText="Join 1,500+ Backstage enthusiasts"
       netlifyFormName={FORM_NAMES.subscribeToNewsletter}
+      setModalOpen={(open) => {
+        setModalOpen(open);
+        trackSubscribe();
+      }}
       {...props}
     />
   </div>

diff --git a/src/components/Link/Link.js b/src/components/Link/Link.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link as GatsbyLink } from 'gatsby';
-import { OutboundLink } from 'gatsby-plugin-google-analytics';
+import { OutboundLink } from "gatsby-plugin-google-gtag";
 
 const isRelativeTo = (to) => to.startsWith('/') || to.startsWith('#');
 

diff --git a/src/components/Link/Link.test.js b/src/components/Link/Link.test.js
@@ -30,11 +30,11 @@ describe('Link', function () {
     expect(wrapper.name()).to.equal('ForwardRef');
   });
 
-  it('should return an OutboundLink for external links', function () {
+  it('should return a ForwardRef for external links', function () {
     const wrapper = shallow(
       <Link to="http://example.com">Hello</Link>
     );
-    expect(wrapper.name()).to.equal('OutboundLink');
+    expect(wrapper.name()).to.equal('ForwardRef');
   });
 
   it('should attach target=_blank to external links', function () {

diff --git a/src/googleAnalytics.js b/src/googleAnalytics.js
@@ -1,22 +1,7 @@
-import isUndefined from 'lodash/isUndefined';
-import { trackCustomEvent } from 'gatsby-plugin-google-analytics';
-
-import { currentlyExecutingGitBranch } from './environment';
-
-const trackGoogleAnalyticsEvent = (eventParams) => {
-  if (!isUndefined(window.ga)) {
-    window.ga('send', 'pageview', {
-      'dimension1': `'${currentlyExecutingGitBranch()}'`,
-    });
-  }
-
-  trackCustomEvent(eventParams);
-
-  if (!isUndefined(window.gtag)) {
-    window.gtag('event', 'pageview', {
-      'dimension1': `'${currentlyExecutingGitBranch()}'`,
-    });
-  }
+const trackGoogleAnalyticsEvent = (eventName, eventParams) => {
+  return typeof window !== "undefined" && window.gtag("event", eventName, eventParams);
 };
 
-export default trackGoogleAnalyticsEvent;
+export const trackRequestDemo = () => trackGoogleAnalyticsEvent("request_demo");
+export const trackRequestTrial = () => trackGoogleAnalyticsEvent("request_trial");
+export const trackSubscribe = () => trackGoogleAnalyticsEvent("subscribe_newsletter");
diff --git a/src/pages/backstage-weekly.js b/src/pages/backstage-weekly.js
@@ -11,6 +11,7 @@ import {
 import { FORM_NAMES } from '../contactFormConstants';
 import mapContentfulBlogPostToMarkdownRemarkBlogPost from '../mapContentfulBlogPostToMarkdownRemarkBlogPost';
 import CoverImage from '../../content/assets/blog/list-cover-image-1.png';
+import { trackSubscribe } from '../googleAnalytics';
 
 const ImageIssue = ({ post }) => (
   <div className="flex flex-col rounded-lg shadow-lg overflow-hidden">
@@ -96,7 +97,10 @@ const BackstageWeekly = ({ data }) => {
           </div>
 
           <NetlifyFormCallToAction
-            setModalOpen={setModalOpen}
+            setModalOpen={(open) => {
+              setModalOpen(open);
+              trackSubscribe();
+            }}
             buttonText="Join 1,500+ Backstage enthusiasts"
             netlifyFormName={FORM_NAMES.subscribeToNewsletter}
             email={email}

diff --git a/yarn.lock b/yarn.lock
@@ -6934,15 +6934,6 @@ gatsby-plugin-feed@^4.4.0:
     lodash.merge "^4.6.2"
     rss "^1.2.2"
 
-gatsby-plugin-google-analytics@^4.4.0:
-  version "4.25.0"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-google-analytics/-/gatsby-plugin-google-analytics-4.25.0.tgz#9235094d56ddf945eda184c77e1dade08ef2c0da"
-  integrity sha512-fbHrViBAbJ0Ch2gcpuJQlGxWoapaNed42k75eR4gCiZPzaTUvCKagJgLG8ro8ukD1rfD594lgLzdSEaYYcH4WQ==
-  dependencies:
-    "@babel/runtime" "^7.15.4"
-    minimatch "3.0.4"
-    web-vitals "^1.1.2"
-
 gatsby-plugin-google-fonts@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-google-fonts/-/gatsby-plugin-google-fonts-1.0.1.tgz#d71054f7bf207b9a8da227380369e18e6f4e0201"
@@ -6956,14 +6947,6 @@ gatsby-plugin-google-gtag@^5.10.0:
     "@babel/runtime" "^7.20.13"
     minimatch "^3.1.2"
 
-gatsby-plugin-google-tagmanager@^4.4.0:
-  version "4.25.0"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-google-tagmanager/-/gatsby-plugin-google-tagmanager-4.25.0.tgz#bc24b4c34964813374c4f0d5ef77e5d370b3d675"
-  integrity sha512-9l2AoS2eY7O4hPq+Rp/Q1Gg7KcVb2H3+4a6sE7rF0Vo98LQfdLS8/ED/wSY5fQ5+WVR1h7Sm9OEf3wIjTNGXlA==
-  dependencies:
-    "@babel/runtime" "^7.15.4"
-    web-vitals "^1.1.2"
-
 gatsby-plugin-image@^2.4.0:
   version "2.25.0"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-image/-/gatsby-plugin-image-2.25.0.tgz#3ce19dd2101a7858c17dfabe884ec004bb4fa15b"
@@ -9761,13 +9744,6 @@ mini-svg-data-uri@^1.2.3:
   resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939"
   integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==
 
-[email protected]:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
-  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
-  dependencies:
-    brace-expansion "^1.1.7"
-
 [email protected]:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-4.2.1.tgz#40d9d511a46bdc4e563c22c3080cde9c0d8299b4"
@@ -13640,11 +13616,6 @@ web-namespaces@^1.0.0:
   resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-1.1.4.tgz#bc98a3de60dadd7faefc403d1076d529f5e030ec"
   integrity sha512-wYxSGajtmoP4WxfejAPIr4l0fVh+jeMXZb08wNc0tMg6xsfZXj3cECqIK0G7ZAqUq0PP8WlMDtaOGVBTAWztNw==
 
-web-vitals@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-1.1.2.tgz#06535308168986096239aa84716e68b4c6ae6d1c"
-  integrity sha512-PFMKIY+bRSXlMxVAQ+m2aw9c/ioUYfDgrYot0YUa+/xa0sakubWhSDyxAKwzymvXVdF4CZI71g06W+mqhzu6ig==
-
 webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"