Browse all tours
Browse all tours
Which would people more likely click?
Browse all tours
Browse all tours
Browse
Browse
Browse all tours
Browse all tours
Browse
Browse
Browse all tours
Browse all tours
Browse
Browse
🤷♂️
What if...
we could easily make data-informed decisions...
and increase leads and conversions?
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>
);
<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>
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.