Integrating dynamic variations with third-party analytics
You can integrate with third-party A/B testing frameworks or analytics services to see how visitors in different buckets or segments perform.
Setting it up in Plasmic Studio
When configuring your A/B tests or personalization segments, you can optionally specify an external ID. This is how you can establish the association with third-party platforms.
If you don’t already have an A/B testing solution, here are some common ones:
@marvelapp/react-ab-testing
: Simple pure client-side solution that randomly chooses a bucket and persists this to localStorage.- Google Optimize: Free solution.
- Optimizely
Setting external ids
In plasmic you can assign external ids for your experiments and variants to be able to connect, measure and visualize the impact of your experiments in third party tools.
These ids should be added base on the tool that you want to integrate. For example:
If you only want to integrate with Google Analytics, you can simply create a custom dimension:
That would be the name of the field that you want to appear on your Google Analytics page, you can set the variation names as you want too. Pay atention that since we are only interested in analytics it’s possible for you to choose the ids to be more meaningful names for you. For other alternatives this id is created by the tool that you are using.
If you want to integrate with Google Optimize you can get these ids on your experiment page:
In the Google Optimize each variation id is a single number, so your Original variant has id=‘0’ and your B variant has id=‘1’.
Getting the picked external ids in code
As it’s stated in How to render variations the variation rendering is based on the variation
object returned by getActiveVariation
, but to integrate with other tools what it’s necessary is a mapping based on external ids, your loader instance has exposed an method getExternalIds
, if you call this method passing your variation
object you will get a map where the keys are external ids and the values are picked variants, you can pass this information to the tools that you are integrating. For example:
In case you are using only Google Analytics, it’s only required to pass the externalIds
that you got using getExternalIds
in the events that you send. Example extending the [[...catchall]].tsx
from How to render variations:
pages/[[...catchall]].tsxexport const getStaticProps: GetStaticProps = async (context) => {...const plasmicData = ...const variation = ...const externalIds = PLASMIC.getExternalVariation(variation);return {props: {variation,externalIds,plasmicData,},revalidate: 60,};};export default function CatchallPage(props: { plasmicData?: ComponentRenderData; variation?: any, externalIds: any }) {const { variation, externalIds, plasmicData } = props;if (!plasmicData) {return <Error statusCode={404} />;}// Render Plasmic page with the variation picked in `getStaticProps()`return (<>{/* Adds gtag, this can be installed globally, GA_MEASUREMENT_ID is the google analytics id that you get on your dashboard */}<Scriptsrc={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}strategy="afterInteractive"/>{/* Now we only have to append the externalIds as properties to any event that we send to google analytics */}<Script id="google-analytics" strategy="afterInteractive">{`window.dataLayer = window.dataLayer || [];function gtag(){window.dataLayer.push(arguments);}gtag('js', new Date());gtag('config', '${GA_MEASUREMENT_ID}', { 'send_page_view': false });gtag('event', 'pageview', ${JSON.stringify(externalIds)});`}</Script><PlasmicRootProviderloader={PLASMIC}prefetchedData={plasmicData}variation={variation}><PlasmicComponent component={plasmicData.entryCompMetas[0].name} /></PlasmicRootProvider></>);}
For Google Optimize we can do something similar to the previous example, but we have to append the experimentId
and a variantId
in a different way.
pages/[[...catchall]].tsx<Script id="google-analytics" strategy="afterInteractive">{`window.dataLayer = window.dataLayer || [];function gtag(){window.dataLayer.push(arguments);}gtag('js', new Date());gtag('config', '${GA_MEASUREMENT_ID}', { 'send_page_view': false });gtag('event', 'pageview', ${JSON.stringify(externalIds)});${Object.keys(externalIds).map((experiment_id) => {const variant_id = externalIds[experiment_id];return `gtag('event', 'experiment_impression', {'experiment_id': "${experiment_id}",'variant_id': "${experiment_id}.${variant_id}", // specific for google optimize'send_to': 'GA_MEASUREMENT_ID',});`;}).join('\n')}`}</Script>
You can find more information on this in Add Google Analytics measurement code to variants.
Integrate with other A/B testing tools
In case you are using a third-party tool that picks the A/B variant for you and want to use your designs created in plasmic, setting external ids is also useful. You can render the variations in a similar way to the default rendering. The variation
prop in <PlasmicRootProvider />
accepts information containing external ids, for the key the format should be ext.{YOUR_EXTERNAL_ID}
. As described in the following examples:
If you are using Google Optimize:
const variationId = google_optimize && google_optimize.get(`${YOUR_EXPERIMENT_ID}`);<PlasmicRootProvider loader={PLASMIC} variation={{ `ext.${YOUR_EXPERIMENT_ID}`: `${variationId}` }}>{/* YOUR PLASCMIC COMPONENTS HERE */}</PlasmicRootProvider>
For more info on how to install the optimize script and about the google_optimize
api: Install optimize script and Optimize javascript api
If you are using @marvelapp/react-ab-testing
you can do in the following way:
<Experiment name="My Example"><Variant name="A"><PlasmicRootProvider loader={PLASMIC} variation={{ 'ext.My Example': 'A' }}>{/* YOUR PLASCMIC COMPONENTS HERE */}</PlasmicRootProvider></Variant><Variant name="B"><PlasmicRootProvider loader={PLASMIC} variation={{ 'ext.My Example': 'B' }}>{/* YOUR PLASCMIC COMPONENTS HERE */}</PlasmicRootProvider></Variant></Experiment>