Fix GA events

src/components/analytics/google-analytics.test.js

@@ -46,9 +46,9 @@ describe("GoogleAnalytics", () => {
 });
 
 describe("#sendEvent", () => {
-  it("logs if ga is not defined", () => {
+  it("logs if gtag is not defined", () => {
     console.log = jest.fn();
-    window.ga = undefined;
+    window.gtag = undefined;
 
     sendEvent({ eventCategory: "TestEvent", eventAction: "Sending Event" });
 
@@ -57,10 +57,8 @@ describe("#sendEvent", () => {
     );
   });
 
-  it("sends to ga if defined", () => {
-    window.ga = {
-      send: jest.fn()
-    };
+  it("sends to gtag if defined", () => {
+    window.gtag = jest.fn();
 
     sendEvent({
       eventCategory: "TestEvent",
@@ -69,10 +67,8 @@ describe("#sendEvent", () => {
       eventValue: "EventValue"
     });
 
-    expect(window.ga.send).toHaveBeenCalledWith({
-      hitType: "event",
+    expect(window.gtag).toHaveBeenCalledWith("event", "Sending Event", {
       eventCategory: "TestEvent",
-      eventAction: "Sending Event",
       eventLabel: "Event label",
       eventValue: "EventValue"
     });

src/components/analytics/google-analytics.tsx

@@ -11,19 +11,13 @@ export function sendEvent({
   eventLabel,
   eventValue
 }: EventConfig) {
-  if (typeof ga === "undefined") {
+  if (typeof gtag === "undefined") {
     // tslint:disable-next-line:no-console
     console.log(
       `Not sending event: ${eventCategory}:${eventAction}, not in production environment`
     );
   } else {
-    ga.send({
-      eventAction,
-      eventCategory,
-      eventLabel,
-      eventValue,
-      hitType: "event"
-    });
+    gtag("event", eventAction, { eventCategory, eventLabel, eventValue });
   }
 }
 

src/components/landing/landing.tsx

@@ -3,7 +3,7 @@ import jump from "jump.js";
 import React from "react";
 
 import { sendEvent as sendFullStoryEvent } from "../analytics/full-story";
-import { sendEvent as sendDataLayerEvent } from "../analytics/google-analytics";
+import { sendEvent as sendGoogleAnalyticsEvent } from "../analytics/google-analytics";
 import { sendEvent as sendMixpanelEvent } from "../analytics/mixpanel";
 import { RippleButton } from "./components";
 import styles from "./landing.module.scss";
@@ -12,7 +12,7 @@ function Landing() {
   function navToPortfolio() {
     sendFullStoryEvent("Landing CTA");
     sendMixpanelEvent("Landing CTA");
-    sendDataLayerEvent({ eventCategory: "Landing", eventAction: "CTA" });
+    sendGoogleAnalyticsEvent({ eventCategory: "Landing", eventAction: "CTA" });
 
     const $el = document.querySelector("#portfolio");
     if ($el !== null) {

types/declarations.d.ts

@@ -13,9 +13,6 @@ type GAEventInterface = {
   eventLabel?: string;
   eventValue?: string;
 };
-interface GAInterface {
-  send: (event: GAEventInterface) => null;
-}
 
 type Smartlook = (
   eventType: string,
@@ -29,4 +26,8 @@ declare module "react-ab-test";
 declare var FS: FSInterface;
 declare var mixpanel: MixpanelInterface;
 declare var smartlook: Smartlook;
-declare var ga: GAInterface;
+declare var gtag: (
+  event: string,
+  action: string,
+  config: { [key: string]: string | undefined }
+) => null;