Page views?

Bounce rate?

🤷‍♂️

What if...

we could easily make data-informed decisions...

and increase leads and conversions?

What is it?

A/B and multi-variate testing framework
Test completely different pages via URL redirects
Easy to use visual editor

How does it work?

Goals and objectives for tracking results
Detailed reports
Google Analytics integration
Target segments for specific demographics (premium)

What about our stack?

Single-page-application support: https://support.google.com/optimize/answer/7008840?hl=en#single-page-apps
Server-side rendering possible for larger tests (e.g. different Trip Builder experiences, different home pages, etc.)

SSR Example

import React from "react";
import { Experiment, Variant } from "react-optimize";
import { TripBuilder, TripBuilder2, TripBuilder3 } from "./trip-builder";

const ExampleExperiment: React.FC = () => (
    <Experiment id="<experiment-id>">
        <Variant id="0">
            <TripBuilder />
        </Variant>
        <Variant id="1">
            <TripBuilder2 />
        </Variant>
        <Variant id="2">
            <TripBuilder3 />
        </Variant>
    </Experiment>
);

Optimize Scripts

<Head>
    {/* <!-- Google Optimize anti-flicker snippet --> */}
    <script dangerouslySetInnerHTML={{
        __html: `
            <style>.async-hide { opacity: 0 !important} </style>
            <script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
            h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
            (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
            })(window,document.documentElement,'async-hide','dataLayer',4000,
            {'OPT_CONTAINER_ID':true});`,
    }}></script>
    {/* <!-- Global site tag (gtag.js) - Google Analytics --> */}
    <script dangerouslySetInnerHTML={{
        __html: `
            <script async src="https://www.googletagmanager.com/gtag/js?id=UA-40217979-1">
            </script> <script> window.dataLayer = window.dataLayer || []; function gtag()
            {dataLayer.push(arguments);} gtag('js', new Date()); gtag('config',
            'UA-40217979-1', { 'optimize_id': 'GTM-KP2XRV9'});
        `,
    }}></script>
</Head>

Single page applications and virtual pages

Targeting criteria can be used to define virtual pages for single page web apps. The right condition to use is dependent on the site’s underlying framework, but most single page web app developers will find that URL fragments are the easiest option for their sites.

There are cases where web apps do not map a virtual page to a URL fragment. For example, some sites use newsletter signup interstitials that are excellent candidates for A/B testing. These interstitials (and other similar elements) can be experimented on by adding additional targeting conditions to the Optimize experiment. JavaScript variable targeting can be used to check for the existence of specific content or elements.

Deactivation is very useful for single page apps that use CSS Rules to make style changes to components that are reused across multiple pages. The <STYLE> tags of a virtual page will be cleaned up from the <HEAD> when the app transitions to a different virtual page.

Link to Socedo example

What next?

Add Optimize scripts to Hydra
Analyze performance of A/B testing
Analyze performance of URL testing
Setup SPA support

Getting Started

Create Account
Link to Google Analytics
Add Optimize tag to site code
Add browser extension to Chrome
Create variant and launch test

Google Optimize

By Alex Hughes