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]].tsx
Copy
export 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 */}
      <Script
        src={`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>
      <PlasmicRootProvider
        loader={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
Copy
<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:

Copy
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:

Copy
<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>

Was this page helpful?

Give feedback on this page