Support for Ad Words tracking (#490)

.github/workflows/alpha.yml

@@ -2,7 +2,7 @@ name: 'Alpha Build'
 
 on:
   push:
-    branches: [v5000/doc]
+    branches: [v501/add-aw]
 
 jobs:
   frontend:

README.md

@@ -88,10 +88,15 @@ You have two ways of running Retrospected:
 
 You can start an instance of Retrospected in 5 minutes by following the [quick-start guide](https://docs.retrospected.com/docs/self-hosting/quick-start).
 
-This will run a demo version, which you can turn into a fully licenced version by purchasing a [Self Hosted licence](https://www.retrospected.com/subscribe?product=self-hosted).
+This will run a demo version, which you can turn into a fully licenced version by purchasing a [Self Hosted licence](https://app.retrospected.com/subscribe?product=self-hosted).
 
 ## Versions History
 
+### Version 5.0.1
+
+- Add Google Ad-Words tracking
+- Fix self-hosted licence checking URL
+
 ### Version 5.0.0
 
 - 👩‍💻 Brand new landing page, built with NextJS, separated from the main app. The app is now available at [https://app.retrospected.com](https://app.retrospected.com) and the landing page at [https://www.retrospected.com](https://www.retrospected.com).
@@ -325,7 +330,7 @@ This will run a demo version, which you can turn into a fully licenced version b
 
 - Add a page explaining how local encryption works
 - Re-introducing rate limiting, both for the REST API and the Websocket connections, in Node and Nginx
-- Reduce the quantity of data sent over Websockets (for instance, only sending post ID instead of whole post when voting)
+- Reduce the quantity of data sent over WebSockets (for instance, only sending post ID instead of whole post when voting)
 - Reduce the number of SQL queries on the backend, simplifying the backend logic
 - Return an error message to the UI if a Websocket message doesn't succeed
 - Improve websocket reconnection logic

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retrospected/backend",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "license": "GNU GPLv3",
   "private": true,
   "type": "module",

backend/src/index.ts

@@ -79,7 +79,7 @@ isLicenced().then((hasLicence) => {
     console.log(
       chalk`⚠️  {red This software is not licenced.
    You can obtain a licence here:
-   https://www.retrospected.com/subscribe?product=self-hosted}`
+   https://app.retrospected.com/subscribe?product=self-hosted}`
     );
     console.log(
       chalk`{red ------------------------------------------------------------- }`

backend/src/security/is-licenced.ts

@@ -80,7 +80,7 @@ async function isLicencedBase(): Promise<LicenceMetadata | null> {
   const payload: SelfHostedCheckPayload = { key: licenceKey };
   try {
     const response = await fetch(
-      'https://www.retrospected.com/api/self-hosted-licence',
+      'https://app.retrospected.com/api/self-hosted-licence',
       {
         method: 'POST',
         body: JSON.stringify(payload),

docs/docs/self-hosting/optionals.md

@@ -108,6 +108,8 @@ services:
     environment:
       # -- Optional --
       GA_ID: '' # Optional, Google Analytics ID (UA-1234456-7)
+      GOOGLE_AD_WORDS_ID: '' # Optional, Google Adwords ID (AW-1234456)
+      GOOGLE_AD_WORDS_EVENT: '' # Optional, Google Adwords Event ID (AW-1234456/1234456)
       SENTRY_URL: '' # Optional, Sentry URL (https://[email protected]/1234567)
       GIPHY_API_KEY: '' # Optional, can be obtained here: https://developers.giphy.com/
       DEFAULT_LANGUAGE: 'en-GB' # Set the default language for new users

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docs",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",

frontend/docker/frontend-entrypoint.sh

@@ -7,6 +7,8 @@ envsubst '${BACKEND_HOST} ${BACKEND_PORT}' < /etc/nginx/conf.d/default.conf.temp
 
 # Replacing Google Analytics and Sentry IDs. Separator is # because the sentry URL contains a /
 sed -i "s#NO_GA#${GA_ID:-}#g" /usr/share/nginx/html/index.html
+sed -i "s#NO_AD_WORDS_ID#${GOOGLE_AD_WORDS_ID:-}#g" /usr/share/nginx/html/index.html
+sed -i "s#NO_AD_WORDS_EVENT#${GOOGLE_AD_WORDS_EVENT:-}#g" /usr/share/nginx/html/index.html
 sed -i "s#NO_SENTRY#${SENTRY_URL:-}#g" /usr/share/nginx/html/index.html
 sed -i "s#NO_GIPHY#${GIPHY_API_KEY:-}#g" /usr/share/nginx/html/index.html
 sed -i "s#NO_STRIPE#${STRIPE_KEY:-}#g" /usr/share/nginx/html/index.html

frontend/index.html

@@ -23,6 +23,8 @@
   <script>
     window.__env__ = {
       GOOGLE_ANALYTICS_ID: 'NO_GA',
+      GOOGLE_AD_WORDS_ID: 'NO_AD_WORDS_ID',
+      GOOGLE_AD_WORDS_EVENT: 'NO_AD_WORDS_EVENT',
       SENTRY_URL: 'NO_SENTRY',
       GIPHY_API_KEY: 'NO_GIPHY',
       STRIPE_KEY: 'NO_STRIPE',

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retrospected/frontend",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "license": "GNU GPLv3",
   "private": true,
   "dependencies": {

frontend/src/track.ts

@@ -3,12 +3,28 @@ import { Plan, TrackingEvent } from 'common';
 import * as Sentry from '@sentry/browser';
 import config from './utils/getConfig';
 import { isProduction } from 'is-production';
+import { noop } from 'lodash';
+import { InitOptions } from 'react-ga4/types/ga4';
 
 let sentryErrorCount = 0;
 
 export const initialiseAnalytics = () => {
   if (isGAEnabled()) {
-    ReactGA.initialize(config.GoogleAnalyticsId);
+    ReactGA.initialize(
+      [
+        {
+          trackingId: config.GoogleAnalyticsId,
+        },
+        config.googleAdWordsId
+          ? {
+              trackingId: config.googleAdWordsId,
+              gaOptions: {
+                name: 'aw',
+              },
+            }
+          : null,
+      ].filter(Boolean) as InitOptions[]
+    );
   }
 };
 
@@ -81,6 +97,15 @@ export const trackPageView = (path: string) => {
   }
 };
 
+export const trackAdWordsConversion = () => {
+  if (isGAEnabled() && config.googleAdWordsEvent) {
+    ReactGA._gtag('event', 'conversion', {
+      send_to: config.googleAdWordsEvent,
+      event_callback: noop,
+    });
+  }
+};
+
 const isGAEnabled = () => {
   return isProduction() && config.hasGA;
 };

frontend/src/utils/getConfig.ts

@@ -1,5 +1,7 @@
 interface HtmlConfig {
   GOOGLE_ANALYTICS_ID: string;
+  GOOGLE_AD_WORDS_ID: string;
+  GOOGLE_AD_WORDS_EVENT: string;
   SENTRY_URL: string;
   GIPHY_API_KEY: string;
   STRIPE_KEY: string;
@@ -13,6 +15,8 @@ interface Config {
   hasSentry: boolean;
   hasGiphy: boolean;
   GoogleAnalyticsId: string;
+  googleAdWordsId: string;
+  googleAdWordsEvent: string;
   SentryUrl: string;
   GiphyApiKey: string;
   StripeKey: string;
@@ -32,6 +36,8 @@ window.__env__ = window.__env__ || {};
 function getKey(
   key:
     | 'GOOGLE_ANALYTICS_ID'
+    | 'GOOGLE_AD_WORDS_ID'
+    | 'GOOGLE_AD_WORDS_EVENT'
     | 'SENTRY_URL'
     | 'GIPHY_API_KEY'
     | 'STRIPE_KEY'
@@ -51,6 +57,11 @@ function getKey(
 
 function getConfig(): Config {
   const googleAnalyticsId = getKey('GOOGLE_ANALYTICS_ID', 'NO_GA');
+  const googleAdWordsId = getKey('GOOGLE_AD_WORDS_ID', 'NO_AD_WORDS_ID');
+  const googleAdWordsEvent = getKey(
+    'GOOGLE_AD_WORDS_EVENT',
+    'NO_AD_WORDS_EVENT'
+  );
   const sentryUrl = getKey('SENTRY_URL', 'NO_SENTRY');
   const giphyApiKey = getKey('GIPHY_API_KEY', 'NO_GIPHY');
   const stripeKey = getKey('STRIPE_KEY', 'NO_STRIPE');
@@ -73,6 +84,8 @@ function getConfig(): Config {
     hasSentry: !!sentryUrl,
     hasGiphy: !!giphyApiKey,
     GoogleAnalyticsId: googleAnalyticsId,
+    googleAdWordsId,
+    googleAdWordsEvent,
     SentryUrl: sentryUrl,
     GiphyApiKey: giphyApiKey,
     StripeKey: stripeKey,

frontend/src/views/Home.tsx

@@ -7,7 +7,7 @@ import { colors } from '@mui/material';
 import { Lock, ThumbUpAlt } from '@mui/icons-material';
 import PreviousGames from './home/PreviousGames';
 import { SessionMetadata } from 'common';
-import { trackEvent } from './../track';
+import { trackAdWordsConversion, trackEvent } from './../track';
 import { createGame, createEncryptedGame, deleteSession } from '../api';
 import { Page } from '../components/Page';
 import usePreviousSessions from '../hooks/usePreviousSessions';
@@ -48,6 +48,7 @@ function Home() {
     const session = await createGame();
     if (session) {
       trackEvent('home/create/default');
+      trackAdWordsConversion();
       navigate('/game/' + session.id);
     } else {
       enqueueSnackbar('Something went wrong when creating the session', {
@@ -62,6 +63,7 @@ function Home() {
     if (session) {
       storeEncryptionKeyLocally(session.id, key);
       trackEvent('home/create/encrypted');
+      trackAdWordsConversion();
       navigate(`/game/${session.id}#${key}`);
     } else {
       enqueueSnackbar(

integration/package.json

@@ -1,6 +1,6 @@
 {
   "name": "retro-board-integration",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "Integrations tests",
   "main": "index.js",
   "directories": {

k8s/frontend-deployment.yaml

@@ -24,6 +24,10 @@ spec:
               value: '3201'
             - name: GA_ID
               value: ''
+            - name: GOOGLE_AD_WORDS_ID
+              value: ''
+            - name: GOOGLE_AD_WORDS_EVENT
+              value: ''
             - name: SENTRY_URL
               value: ''
             - name: GIPHY_API_KEY

marketing/package.json

@@ -1,6 +1,6 @@
 {
   "name": "marketing",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3001",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "retrospected",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "An agile retrospective board - Powering www.retrospected.com",
   "private": true,
   "scripts": {