NextJS

Visit the NextJS Docs to get started with NextJS.

1A Synchronous Script Loading

To best utilize Taplytics JS SDK you will want to install it as a synchronous loading script. This will ensure your users never see your content switching from baseline to their bucketed variations.

Please note that the syncLoader will not work on 2g connections.

We recommend installing the Taplytics JS SDK script as high as possible in your <head> tag, ideally, before any other analytics tools or other scripts are loaded.

To install the Taplytics JS SDK synchronously, call TaplyticsInit with your JS_SDK_Key, which can be found in the settings page of your project in the Taplytics dashboard.

import '../styles/globals.css'
import Head from 'next/head'
import Script from 'next/script'
import React, { useState } from 'react'

function MyApp({ Component, pageProps }) {
  const [loaded, setLoaded] = useState(false)
  React.useEffect(() => {
    if (process.browser && window.Taplytics) {
      ...
    }
  }, [])
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Script
        src="//cdn.taplytics.com/taplytics.min.js"
        strategy="beforeInteractive"
        referrerPolicy="no-referrer-when-downgrade"
      >
      <script 
      type="text/javascript" 
      src="https://cdn.taplytics.com/syncLoader.min.js"
      referrerpolicy="no-referrer-when-downgrade"
      >

          // Initializes the Taplytics SDK
          TaplyticsInit({
            token: "<JS_SDK_Key>",
            {
              user_attributes:{
                  user_id: "user123",
                  email: "[email protected]",
                  qa_user: true
              }
            }
          }); 
      </script>
      <Component {...pageProps} />
    </>
  )
}

export default MyApp

1B Asynchronous Script Loading

Note: you only need to load the script once, do not load the synchronous script and the asynchronous script!

To install Taplytics JS SDK asynchronously, you have to include the following snippet into the header or body of your site:

<script type="text/javascript">
    !function(){var t=window.Taplytics=window.Taplytics||[];if(window._tlq=window._tlq||[],!t.identify&&!t.loaded){t.loaded=!0,t.funcs=["init","identify","track","page","reset","propertiesLoaded","runningExperiments","variable","codeBlock"],t.mock=function(n){return function(){var e=Array.prototype.slice.call(arguments);return e.unshift(n),window._tlq.push(e),t}};for(var n=0;n<t.funcs.length;n++){var e=t.funcs[n];t[e]=t.mock(e)}t.load=function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="//cdn.taplytics.com/taplytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)},t.load()}}();
</script>

This will load Taplytics.js asynchronously, so it will not affect your page load speed. We advise you use the synchronous script loading for any experiments applying content changes.

Other than that, all you have to do is initialize our SDK by using the init function with your JS_SDK_Key, which can be found in the settings page of your project in the Taplytics dashboard.

import '../styles/globals.css'
import Head from 'next/head'
import Script from 'next/script'
import React, { useState } from 'react'

function MyApp({ Component, pageProps }) {
  const [loaded, setLoaded] = useState(false)
  React.useEffect(() => {
    if (process.browser && window.Taplytics) {

      // Initializes the Taplytics SDK
      window.Taplytics.init(
        '<JS_SDK_Key>',
        {
          user_attributes:{
              user_id: "user123",
              email: "[email protected]",
              qa_user: true
          }
        }
      )
    }
  }, [])
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Script
        src="//cdn.taplytics.com/taplytics.min.js"
        strategy="beforeInteractive"
        referrerPolicy="no-referrer-when-downgrade"
      >
        {`!function(){var t=window.Taplytics=window.Taplytics||[];if(window._tlq=window._tlq||[],!t.identify&&!t.loaded){t.loaded=!0,t.funcs=["init","identify","track","page","reset","propertiesLoaded","runningExperiments","variable","codeBlock"],t.mock=function(n){return function(){var e=Array.prototype.slice.call(arguments);return e.unshift(n),window._tlq.push(e),t}};for(var n=0;n<t.funcs.length;n++){var e=t.funcs[n];t[e]=t.mock(e)}t.load=function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="//cdn.taplytics.com/taplytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)},t.load()}}()`}
      </Script>
      <Component {...pageProps} />
    </>
  )
}

export default MyApp

For a complete list of capabilities, please refer to our JS SDK documentation.