From cdee0e74f977e396d3619b8c6df0a6d5670271fd Mon Sep 17 00:00:00 2001
From: Karishma Chadha <kchadha@media.mit.edu>
Date: Mon, 17 May 2021 11:31:49 -0400
Subject: [PATCH] Send analytics event when the donate button in the banner is
 clicked.

---
 src/views/splash/donate/donate-banner.jsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/views/splash/donate/donate-banner.jsx b/src/views/splash/donate/donate-banner.jsx
index 236387f30..a73fa8c08 100644
--- a/src/views/splash/donate/donate-banner.jsx
+++ b/src/views/splash/donate/donate-banner.jsx
@@ -8,8 +8,23 @@ const Button = require('../../../components/forms/button.jsx');
 
 require('./donate-banner.scss');
 
+const donateURL = 'https://secure.donationpay.org/scratchfoundation';
+
 const navigateToDonatePage = () => {
-    window.location = 'https://secure.donationpay.org/scratchfoundation';
+    window.location = donateURL;
+};
+
+// Following the example in the Google Analytics doc here to track
+// clicks going out to the donate page from this banner:
+// https://support.google.com/analytics/answer/1136920?hl=en
+const captureOutboundLinkToDonate = () => {
+    // `ga` is a global we have thanks to src/template.ejs
+    // use this to send a tracking event for this outbound link
+    // eslint-disable-next-line no-undef
+    ga('send', 'event', 'outbound', 'click', donateURL, {
+        transport: 'beacon',
+        hitCallback: navigateToDonatePage
+    });
 };
 
 const DonateTopBanner = ({
@@ -28,7 +43,7 @@ const DonateTopBanner = ({
                 <Button
                     className="donate-button"
                     key="add-to-studio-button"
-                    onClick={navigateToDonatePage}
+                    onClick={captureOutboundLinkToDonate}
                 >
                     <FormattedMessage id="general.donate" />
                 </Button>