added adroll pixel script to _app (#534)

* added adroll pixel script to _app

* added adRoll ids as env variables and updated aws / docker related files

* removed whitespaces from env

* cookie banner triggers trackers

* init of trackers consents moved to _app

Co-authored-by: sebastianPiekarczyk <sebastian@oazoapps.com>

.env

@@ -9,6 +9,9 @@ MIXPANEL_ENV="development"
 MIXPANEL_KEY="b10b850880cb0a8557d878c2e6024d03"
 COMMIT_SHA="dev"
 INFURA_PROJECT_ID="de82b2d602264e4fbc0929dec0c45baa"
+# AdRoll ids set to dev env.
+ADROLL_ADV_ID="5VWGFTJXUZF6BPUDCH3WWM"
+ADROLL_PIX_ID="4PSXWPAQTJEIXJSPHJCRW4"
 # This is a test value for local development
 INFURA_PROJECT_ID_BACKEND="de82b2d602264e4fbc0929dec0c45baa"
 ETHERSCAN_API_KEY="34JVYM6RPM3J1SK8QXQFRNSHD9XG4UHXVU"

.github/workflows/aws-prod.yaml

@@ -52,6 +52,8 @@ jobs:
                      --build-arg API_HOST=${{ secrets.API_HOST }} \
                      --build-arg MIXPANEL_ENV=production \
                      --build-arg MIXPANEL_KEY=${{ secrets.MIXPANEL_PROD_KEY }} \
+                     --build-arg ADROLL_ADV_ID=${{ secrets.ADROLL_ADV_ID_PROD }} \
+                     --build-arg ADROLL_PIX_ID=${{ secrets.ADROLL_PIX_ID_PROD }} \
                      --build-arg INFURA_PROJECT_ID=${{ secrets.INFURA_PROJECT_ID }} \
                      --build-arg ETHERSCAN_API_KEY=${{ secrets.ETHERSCAN_API_KEY }} \
                      --build-arg BLOCKNATIVE_API_KEY=${{ secrets.BLOCKNATIVE_API_KEY }} \

.github/workflows/aws-staging.yaml

@@ -60,6 +60,8 @@ jobs:
                      --build-arg API_HOST=${{ secrets.API_HOST_STAGING }} \
                      --build-arg MIXPANEL_ENV=staging \
                      --build-arg MIXPANEL_KEY=${{ secrets.MIXPANEL_STAGING_KEY }} \
+                     --build-arg ADROLL_ADV_ID=${{ secrets.ADROLL_ADV_ID_STAGING }} \
+                     --build-arg ADROLL_PIX_ID=${{ secrets.ADROLL_PIX_ID_STAGING }} \
                      --build-arg INFURA_PROJECT_ID=${{ secrets.INFURA_PROJECT_ID }} \
                      --build-arg ETHERSCAN_API_KEY=${{ secrets.ETHERSCAN_API_KEY }} \
                      --build-arg BLOCKNATIVE_API_KEY=${{ secrets.BLOCKNATIVE_STAGING_API_KEY }} \

.github/workflows/dockerhub.yaml

@@ -39,6 +39,8 @@ jobs:
                      --build-arg API_HOST=${{ secrets.API_HOST_STAGING }} \
                      --build-arg MIXPANEL_ENV=staging \
                      --build-arg MIXPANEL_KEY=${{ secrets.MIXPANEL_STAGING_KEY }} \
+                     --build-arg ADROLL_ADV_ID=${{ secrets.ADROLL_ADV_ID_STAGING }} \
+                     --build-arg ADROLL_PIX_ID=${{ secrets.ADROLL_PIX_ID_STAGING }} \
                      --build-arg INFURA_PROJECT_ID=${{ secrets.INFURA_PROJECT_ID }} \
                      --build-arg ETHERSCAN_API_KEY=${{ secrets.ETHERSCAN_API_KEY }} \
                      --build-arg BLOCKNATIVE_API_KEY=${{ secrets.BLOCKNATIVE_API_KEY }} \

.storybook/main.js

@@ -4,7 +4,7 @@ module.exports = {
   stories: [
     '../theme/*.stories.tsx',
     '../features/**/*.stories.tsx',
-    '../components/**/*.stories.tsx ',
+    '../components/**/*.stories.tsx',
   ],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-postcss'],
   // typescript: {

Dockerfile

@@ -15,6 +15,8 @@ ARG COMMIT_SHA
 ARG API_HOST
 ARG MIXPANEL_ENV
 ARG MIXPANEL_KEY
+ARG ADROLL_ADV_ID
+ARG ADROLL_PIX_ID
 ARG SHOW_BUILD_INFO
 ARG ETHERSCAN_API_KEY
 ARG BLOCKNATIVE_API_KEY
@@ -25,6 +27,8 @@ ENV COMMIT_SHA=$COMMIT_SHA \
     API_HOST=$API_HOST \
     MIXPANEL_ENV=$MIXPANEL_ENV \
     MIXPANEL_KEY=$MIXPANEL_KEY \
+    ADROLL_ADV_ID=$ADROLL_ADV_ID \
+    ADROLL_PIX_ID=$ADROLL_PIX_ID \
     ETHERSCAN_API_KEY=$ETHERSCAN_API_KEY \
     BLOCKNATIVE_API_KEY=$BLOCKNATIVE_API_KEY \
     INFURA_PROJECT_ID=$INFURA_PROJECT_ID \

README.md

@@ -114,6 +114,12 @@ Some of the values that are used you can check in the `.env` file.
 - `MIXPANEL_KEY` - The value will be used for `production` environments. This is the project key
   that is generated from Mixpanel.
 
+- `ADROLL_PIX_ID` - The value will be used for `production` environments. This is the project key
+  that is generated from AdRoll Pixel.
+
+- `ADROLL_ADV_ID` - The value will be used for `production` environments. This is the project key
+  that is generated from AdRoll Pixel.
+
 - `USE_TERMS_OF_SERVICE` - In order to use some functionalities the user should read and accept
   Terms of Service. For development purposes, this feature can be disabled. You can disable this
   feature if you'd like to remove that functionality at all. The values are either `0` (disabled) or
@@ -184,8 +190,8 @@ By executing one of the following commands you will run both containers at the s
 
 #### Docker Containers Configuration
 
-If you open `docker-compose.yml` file under the `./scripts` folder, you will see that there are some environmental variables. 
-For the Postgres container, you won't have the need to change them that often. Also the names are pretty explanatory 
+If you open `docker-compose.yml` file under the `./scripts` folder, you will see that there are some environmental variables.
+For the Postgres container, you won't have the need to change them that often. Also the names are pretty explanatory
 
 The configuration params for `multiply-proxy-actions` container are as follows:
 
@@ -201,7 +207,7 @@ The configuration params for `multiply-proxy-actions` container are as follows:
 
 ## Multiply feature
 
-We have added multiply functionality, where generated DAI is immediately used to swap for more collateral. This utilizes the multiply proxy actions smart contract. 
+We have added multiply functionality, where generated DAI is immediately used to swap for more collateral. This utilizes the multiply proxy actions smart contract.
 The documentation for those contracts can be found [here](https://docs.google.com/document/d/1GpPEPrOnDLNHtCgyh5YInOyZUV4XGz-1EVRJK0y-GF4/edit).
 
 ## Contributing

analytics/adroll.ts

@@ -0,0 +1,40 @@
+import getConfig from 'next/config'
+
+const { adRollAdvId, adRollPixId } = getConfig()?.publicRuntimeConfig
+
+export const adRollPixelScript = `
+  adroll_adv_id = "${adRollAdvId}";
+  adroll_pix_id = "${adRollPixId}";
+  adroll_version = "2.0";
+
+  (function(w, d, e, o, a) {
+      w.__adroll_loaded = true;
+      w.adroll = w.adroll || [];
+      w.adroll.f = [ 'setProperties', 'identify', 'track' ];
+      var roundtripUrl = "https://s.adroll.com/j/" + adroll_adv_id
+              + "/roundtrip.js";
+      for (a = 0; a < w.adroll.f.length; a++) {
+          w.adroll[w.adroll.f[a]] = w.adroll[w.adroll.f[a]] || (function(n) {
+              return function() {
+                  w.adroll.push([ n, arguments ])
+              }
+          })(w.adroll.f[a])
+      }
+
+      e = d.createElement('script');
+      o = d.getElementsByTagName('script')[0];
+      e.async = 1;
+      e.src = roundtripUrl;
+      o.parentNode.insertBefore(e, o);
+  })(window, document);
+  adroll.track("pageView");
+`
+
+export function adRollScriptInsert() {
+  const script = document.createElement('script')
+
+  script.type = 'text/javascript'
+  script.innerText = adRollPixelScript
+
+  document.head.appendChild(script)
+}

analytics/common.ts

@@ -0,0 +1,40 @@
+import * as mixpanel from 'mixpanel-browser'
+
+import { adRollScriptInsert } from './adroll'
+
+export const COOKIE_NAMES = ['marketing', 'analytics']
+export const LOCALSTORAGE_KEY = 'cookieSettings'
+
+export type CookieName = typeof COOKIE_NAMES[number]
+
+interface Switch {
+  enable: Function
+  disable: Function
+}
+
+export const manageCookie: Record<CookieName, Switch> = {
+  marketing: {
+    enable: () => adRollScriptInsert(),
+    disable: () => {}, // no needed since adding adRoll instance to app is 0/1 like
+  },
+  analytics: {
+    enable: () => mixpanel.opt_in_tracking(),
+    disable: () => mixpanel.opt_out_tracking(),
+    // todo: delete user data https://developer.mixpanel.com/docs/managing-personal-data
+  },
+}
+
+export function initTrackers() {
+  const trackingLocalState = localStorage.getItem(LOCALSTORAGE_KEY)
+
+  if (trackingLocalState) {
+    const state = JSON.parse(trackingLocalState).enabledCookies
+    COOKIE_NAMES.forEach((cookieName) => {
+      if (state[cookieName]) {
+        manageCookie[cookieName].enable()
+      } else {
+        manageCookie[cookieName].disable()
+      }
+    })
+  }
+}

components/CookieBanner.tsx

@@ -1,15 +1,11 @@
 import { Icon } from '@makerdao/dai-ui-icons'
 import { ChevronUpDown } from 'components/ChevronUpDown'
 import { AppLink } from 'components/Links'
-import * as mixpanel from 'mixpanel-browser'
 import React, { Fragment, MouseEventHandler, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { Box, Button, Card, Container, Flex, Grid, Text } from 'theme-ui'
 
-const COOKIE_NAMES = ['marketing', 'analytics'] as const
-const LOCALSTORAGE_KEY = 'cookieSettings'
-
-type CookieName = typeof COOKIE_NAMES[number]
+import { COOKIE_NAMES, CookieName, LOCALSTORAGE_KEY, manageCookie } from '../analytics/common'
 
 function Checkbox({
   checked,
@@ -38,29 +34,10 @@ function Checkbox({
   )
 }
 
-interface Switch {
-  enable: Function
-  disable: Function
-}
-
-const manageCookie: Record<CookieName, Switch> = {
-  marketing: {
-    // todo: implement these when we have adroll integration
-    enable: () => {},
-    disable: () => {},
-  },
-  analytics: {
-    enable: () => mixpanel.opt_in_tracking(),
-    disable: () => mixpanel.opt_out_tracking(),
-    // todo: delete user data https://developer.mixpanel.com/docs/managing-personal-data
-  },
-}
-
 type SelectedCookies = Record<CookieName, boolean>
 type SavedSettings = { accepted: boolean; enabledCookies: SelectedCookies }
 
 function initSelectedCookies(defaultValue: boolean): SelectedCookies {
-  // @ts-ignore
   return COOKIE_NAMES.reduce((acc, cookieName) => ({ ...acc, [cookieName]: defaultValue }), {})
 }
 
@@ -70,7 +47,9 @@ export function CookieBanner() {
   const [selectedCookies, setSelectedCookies] = useState(initSelectedCookies(true))
   const [settingsAreSaved, setSettingsAreSaved] = useState(false)
 
-  if (settingsAreSaved || localStorage.getItem(LOCALSTORAGE_KEY)) {
+  const trackingLocalState = localStorage.getItem(LOCALSTORAGE_KEY)
+
+  if (settingsAreSaved || trackingLocalState) {
     return null
   }
 

components/stories/CookieBanner.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { CookieBanner } from '../CookieBanner'
 
-export function Banner() {
+export const Default = () => {
   return <CookieBanner />
 }
 

next.config.js

@@ -36,6 +36,8 @@ module.exports = withBundleAnalyzer(
           basePath,
           mixpanelEnv: process.env.MIXPANEL_ENV,
           mixpanelAPIKey: process.env.MIXPANEL_KEY,
+          adRollAdvId: process.env.ADROLL_ADV_ID,
+          adRollPixId: process.env.ADROLL_PIX_ID,
           useTermsOfService: process.env.USE_TERMS_OF_SERVICE === '1',
           showBuildInfo: process.env.SHOW_BUILD_INFO === '1',
           infuraProjectId: process.env.INFURA_PROJECT_ID,

pages/_app.tsx

@@ -26,6 +26,7 @@ import { components, ThemeProvider } from 'theme-ui'
 import Web3 from 'web3'
 
 import { trackingEvents } from '../analytics/analytics'
+import { initTrackers } from '../analytics/common'
 import { mixpanelInit } from '../analytics/mixpanel'
 import nextI18NextConfig from '../next-i18next.config.js'
 
@@ -128,6 +129,8 @@ function App({ Component, pageProps }: AppProps & CustomAppProps) {
         trackingEvents.pageView(url)
       }
     }
+    // mixpanel and adRoll consent trigger
+    initTrackers()
 
     router.events.on('routeChangeComplete', handleRouteChange)
 

scripts/docker-compose.yml

@@ -40,6 +40,8 @@ services:
       - USER_JWT_SECRET=${USER_JWT_SECRET}
       - MIXPANEL_ENV=${MIXPANEL_ENV}
       - MIXPANEL_KEY=${MIXPANEL_KEY}
+      - ADROLL_ADV_ID=${ADROLL_ADV_ID}
+      - ADROLL_PIX_ID=${ADROLL_PIX_ID}
       - INFURA_PROJECT_ID=${INFURA_PROJECT_ID}
       - INFURA_PROJECT_ID_BACKEND=${INFURA_PROJECT_ID_BACKEND}
       - ETHERSCAN_API_KEY=${ETHERSCAN_API_KEY}