Ab test rammeverk

.gitignore

@@ -12,3 +12,4 @@ yarn-error.log
 /htdocs/
 .vscode
 .env
+secrets.json

package.json

@@ -13,7 +13,7 @@
     "lint-es": "eslint --cache --cache-location '.eslintcache/' --ext .js --ext .jsx --max-warnings=0 src e2e",
     "format": "node prettier.js write",
     "format-check": "node prettier.js lint",
-    "start": "razzle start --inspect --inspect-port 9230",
+    "start": "cross-env GOOGLE_APPLICATION_CREDENTIALS=./secrets.json razzle start --inspect --inspect-port 9230",
     "start-without-ssr": "cross-env RAZZLE_DISABLE_SSR=true razzle start",
     "start-with-local-graphql": "cross-env LOCAL_GRAPHQL_API=true yarn start",
     "start-with-local-graphql-and-article-converter": "cross-env LOCAL_GRAPHQL_API=true RAZZLE_LOCAL_ARTICLE_CONVERTER=true razzle start",
@@ -80,6 +80,7 @@
     "defined": "1.0.0",
     "express": "^4.16.3",
     "express-http-proxy": "^1.4.0",
+    "googleapis": "^39.2.0",
     "graphql": "^14.0.2",
     "graphql-tag": "^2.10.0",
     "helmet": "^3.15.1",
@@ -116,6 +117,7 @@
     "sass-loader": "^7.1.0",
     "serialize-javascript": "^1.5.0",
     "source-map-support": "^0.5.9",
+    "universal-analytics": "^0.4.20",
     "warning": "^4.0.3",
     "webpack-bundle-analyzer": "^3.0.4"
   },

src/App.js

@@ -19,6 +19,8 @@ import Masthead from './containers/Masthead';
 import { routes } from './routes';
 import handleError from './util/handleError';
 import ErrorPage from './containers/ErrorPage/ErrorPage';
+import { NDLA_ABTEST_COOKIE_KEY } from './util/getABTests';
+import { isValidCookie, deleteCookie, setCookie } from './util/cookieHandler';
 
 const Route = ({
   component: Component,
@@ -81,6 +83,14 @@ class App extends React.Component {
     ) {
       this.handleLoadInitialProps(this.props);
     }
+    // Update/Set cookies
+    if (isValidCookie(NDLA_ABTEST_COOKIE_KEY, document.cookie)) {
+      deleteCookie(NDLA_ABTEST_COOKIE_KEY);
+    }
+    setCookie(
+      NDLA_ABTEST_COOKIE_KEY,
+      JSON.stringify(this.props.initialProps.experiments),
+    );
   }
 
   componentDidUpdate() {

src/config.js

@@ -71,6 +71,29 @@ const gaTrackingId = () => {
   }
 };
 
+const gaExperiments = () => {
+  switch (ndlaEnvironment) {
+    case 'local':
+      return {};
+    case 'dev':
+      // test IDs
+      return {
+        GOOGLE_ACCOUNT_ID: '74405776',
+        GOOGLE_WEB_PROPERTY_ID: 'UA-74405776-4',
+        GOOGLE_PROFILE_ID: '140877480',
+      };
+    case 'prod':
+      //replace with correct IDs
+      return {
+        GOOGLE_ACCOUNT_ID: '',
+        GOOGLE_WEB_PROPERTY_ID: '',
+        GOOGLE_PROFILE_ID: '',
+      };
+    default:
+      return {};
+  }
+};
+
 const logglyApiKey = () => {
   if (process.env.NODE_ENV === 'unittest') {
     return '';
@@ -93,6 +116,7 @@ const config = {
   learningPathDomain: learningPathDomain(),
   googleTagManagerId: getEnvironmentVariabel('NDLA_GOOGLE_TAG_MANAGER_ID'),
   gaTrackingId: gaTrackingId(),
+  gaExperiments: gaExperiments(),
   zendeskWidgetKey: getEnvironmentVariabel('NDLA_ZENDESK_WIDGET_KEY'),
   localGraphQLApi: getEnvironmentVariabel('LOCAL_GRAPHQL_API', false),
   showAllFrontpageSubjects: true,

src/constants.js

@@ -258,3 +258,4 @@ export const SEARCH_PATH = '/search(.*)';
 export const TOPIC_PATH = '/subjects/:subjectId/:topicPath(.*)?/:topicId';
 export const SUBJECT_PAGE_PATH = '/subjects/:subjectId';
 export const SUBJECTS = '/subjects';
+export const COLLECT_EXPERIMENTS = '/experiments';

src/containers/Masthead/components/MastheadMenu.jsx

@@ -121,7 +121,7 @@ class MastheadMenu extends Component {
 
     return (
       <Fragment>
-        <MastheadMenuModal onMenuExit={this.onMenuExit}>
+        <MastheadMenuModal>
           {onClose => (
             <MastheadTopics
               onClose={onClose}

src/containers/Masthead/components/MastheadMenuModal.jsx

@@ -1,28 +1,89 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import Modal from '@ndla/modal';
 import { injectT } from '@ndla/i18n';
 import { TopicMenuButton } from '@ndla/ui';
+import {
+  ExperimentsContext,
+  Experiment,
+  Variant,
+  isValidExperiment,
+} from '@ndla/abtest';
+import { Hamburger, Menu } from '@ndla/icons/common';
 
-const MastheadMenuModal = ({ children, onMenuExit, t }) => (
-  <Modal
-    size="fullscreen"
-    activateButton={
-      <TopicMenuButton data-testid="masthead-menu-button">
-        {t('masthead.menu.title')}
-      </TopicMenuButton>
-    }
-    animation="subtle"
-    animationDuration={150}
-    backgroundColor="grey"
-    noBackdrop
-    onClose={onMenuExit}>
-    {children}
-  </Modal>
+const experimentId = 'OtejUgVLRHmGTAGv7jbFyA';
+
+const MastheadMenuModal = ({ t, children }) => (
+  <ExperimentsContext.Consumer>
+    {({ experiments }) => (
+      <Modal
+        size="fullscreen"
+        onOpen={() => {
+          if (isValidExperiment({ experiments, id: experimentId })) {
+            // check if this experimentId exists in data from server
+            // this event can be tracked by optimize to evaluate variant effectiveness
+            window.ga('send', {
+              hitType: 'event',
+              eventCategory: 'User interactions',
+              eventAction: 'MenuButtonOpen',
+            });
+          }
+        }}
+        activateButton={
+          <TopicMenuButton Icon={null} data-testid="masthead-menu-button">
+            <Experiment
+              id={experimentId}
+              experiments={experiments}
+              onVariantMount={({ expId, expVar, isActiveExperiment }) => {
+                if (isActiveExperiment) {
+                  window.ga('set', { expId, expVar }); // Perhaps get GA from ndla/tracker?
+                  window.ga('send', {
+                    // report display of experiment variant to analytics/optimize
+                    hitType: 'event',
+                    eventCategory: 'AB test',
+                    eventAction: 'Display variant',
+                    fieldsObject: {
+                      nonInteraction: true,
+                    },
+                  });
+                }
+              }}>
+              <Variant variantIndex={0} original>
+                <Menu /> {t('masthead.menu.title')} orginal
+              </Variant>
+              <Variant variantIndex={1}>
+                <Menu /> {t('abTests.masthead.menu.subjectOverview')}
+              </Variant>
+              <Variant variantIndex={2}>
+                <Menu /> {t('abTests.masthead.menu.overview')}
+              </Variant>
+              <Variant variantIndex={3}>
+                <Menu /> {t('abTests.masthead.menu.topics')}
+              </Variant>
+              <Variant variantIndex={4}>
+                <Hamburger /> {t('masthead.menu.title')}
+              </Variant>
+              <Variant variantIndex={5}>
+                <Hamburger /> {t('abTests.masthead.menu.subjectOverview')}
+              </Variant>
+              <Variant variantIndex={6}>
+                <Hamburger /> {t('abTests.masthead.menu.overview')}
+              </Variant>
+              <Variant variantIndex={7}>
+                <Hamburger /> {t('abTests.masthead.menu.topics')}
+              </Variant>
+            </Experiment>
+          </TopicMenuButton>
+        }
+        animation="subtle"
+        animationDuration={150}
+        backgroundColor="grey"
+        noBackdrop>
+        {children}
+      </Modal>
+    )}
+  </ExperimentsContext.Consumer>
 );
 
-MastheadMenuModal.propTypes = {
-  onMenuExit: PropTypes.func,
-};
+MastheadMenuModal.contentType = ExperimentsContext;
 
 export default injectT(MastheadMenuModal);

src/routes.jsx

@@ -7,6 +7,7 @@
  */
 
 import React from 'react';
+import { ExperimentsContext } from '@ndla/abtest';
 import WelcomePage from './containers/WelcomePage/WelcomePage';
 import ArticlePage from './containers/ArticlePage/ArticlePage';
 import PlainArticlePage from './containers/PlainArticlePage/PlainArticlePage';
@@ -69,5 +70,12 @@ export const routes = [
 ];
 
 export default function(initialProps = {}, locale) {
-  return <App initialProps={initialProps} locale={locale} />;
+  return (
+    <ExperimentsContext.Provider
+      value={{
+        experiments: initialProps.experiments,
+      }}>
+      <App initialProps={initialProps} locale={locale} />
+    </ExperimentsContext.Provider>
+  );
 }

src/server/helpers/Document.js

@@ -27,8 +27,17 @@ const Document = ({ helmet, assets, data }) => {
           rel="stylesheet"
           href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,600,700|Source+Serif+Pro:400,700"
         />
-        {config.gaTrackingId && (
-          <script async src="https://www.google-analytics.com/analytics.js" />
+        {!config.gaTrackingId && (
+          <script
+            dangerouslySetInnerHTML={{
+              // GA bør sikkert håndteres på en annen måte, via helper eller lib etc
+              __html: `(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+                })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+                window.ga('create', 'UA-74405776-4', 'auto');`,
+            }}
+          />
         )}
         <GoogleTagMangerScript />
         {helmet.title.toComponent()}

src/server/routes/defaultRoute.js

@@ -20,6 +20,7 @@ import { createApolloClient } from '../../util/apiHelpers';
 import handleError from '../../util/handleError';
 import { getLocaleInfoFromPath } from '../../i18n';
 import { renderHtml, renderPage } from '../helpers/render';
+import fetchExperiments from '../../util/getABTests';
 
 const assets = require(process.env.RAZZLE_ASSETS_MANIFEST); //eslint-disable-line
 
@@ -53,6 +54,8 @@ const disableSSR = req => {
 async function doRender(req) {
   global.assets = assets; // used for including mathjax js in pages with math
   let initialProps = { loading: true };
+  let googleOptimizeExperiments;
+
   const {
     abbreviation: locale,
     messages,
@@ -65,29 +68,40 @@ async function doRender(req) {
   if (!disableSSR(req)) {
     const route = serverRoutes.find(r => matchPath(basepath, r));
     const match = matchPath(basepath, route);
-    initialProps = await loadGetInitialProps(route.component, {
-      isServer: true,
-      locale,
-      match,
-      client,
-      location: {
-        search: `?${queryString.stringify(req.query)}`,
-      },
-    });
+    [googleOptimizeExperiments, initialProps] = await Promise.all([
+      await fetchExperiments(req),
+      await loadGetInitialProps(route.component, {
+        isServer: true,
+        locale,
+        match,
+        client,
+        location: {
+          search: `?${queryString.stringify(req.query)}`,
+        },
+      }),
+    ]);
+  } else {
+    googleOptimizeExperiments = await fetchExperiments(req);
   }
-
+  initialProps.experiments = googleOptimizeExperiments;
   const context = {};
-  const Page = !disableSSR(req) ? (
-    <ApolloProvider client={client}>
-      <IntlProvider locale={locale} messages={messages}>
-        <StaticRouter basename={basename} location={req.url} context={context}>
-          {routes(initialProps, locale)}
-        </StaticRouter>
-      </IntlProvider>
-    </ApolloProvider>
-  ) : (
-    ''
-  );
+  let Page;
+  if (!disableSSR(req)) {
+    Page = (
+      <ApolloProvider client={client}>
+        <IntlProvider locale={locale} messages={messages}>
+          <StaticRouter
+            basename={basename}
+            location={req.url}
+            context={context}>
+            {routes(initialProps, locale)}
+          </StaticRouter>
+        </IntlProvider>
+      </ApolloProvider>
+    );
+  } else {
+    Page = '';
+  }
 
   const apolloState = client.extract();
   const { html, ...docProps } = renderPage(Page, getAssets(), {