Next.js SDK

Обзор

Для работы с экспериментами и фича-флагами в приложениях на Next.js доступны два подхода:

1. Серверный рендеринг (SSR) — предварительный расчет экспериментов на сервере. Используйте серверный SDK expf-sigma-node.js
2. Клиентский рендеринг — получение данных в браузере для динамических компонентов. Используйте клиентский SDK expf-sigma.js

Требования к данным

В обоих подходах для работы с экспериментами нужен id пользователя — по нему будет рассчитана группа эксперимента. Подробнее можно почитать тут

Так-же передавайте данные пользователя в зависимости от настроек в админ-панели. Подробнее

к сведению

Если возникли трудности с передачей id при инициализации SDK, сгенерируйте новый с помощью Fingerprint и сохраните результат в куки

Пример интеграции SDK Next.js v.13+

• подключение sdk c ssr, функция getServerSideProps
• подключение sdk c ssr, функция getInitialProps
• подключение sdk без ssr

Подключение sdk c ssr, функция getServerSideProps

Установка SDK

NPM

npm i expf-sigma-node.js

Yarn

yarn add expf-sigma-node.js

Подключение SDK

Создайте и экспортируйте вспомогательные асинхронные функции.

/helpers/sigma.js

import Sigma from 'expf-sigma-node.js';

const token = <TOKEN>;

export const sigmaGetExperimentParam = async (expId, paramName, userProps = {}) => {
  const userData = userProps;
  const sigma = new Sigma(token, userData);

  const variant = await sigma.getExperiment(expId).then(
    (res) => res.getParamValue(paramName)
  );
  
  if (variant) return variant;
  return;
}

export const sigmaGetAllUserExperiments = async (userProps = {}) => {
  const userData = userProps;
  const sigma = new Sigma(token, userData);

  const userSigmaExps = await sigma.getAllUserExperiments()

  if (userSigmaExps) return userSigmaExps;
  return;
}

Страница с экспериментом

В примере показано, как получить данные эксперимента и предварительно отобразить результат.

• страница запускается во время запроса, и эта страница будет предварительно визуализированная с возвращенными реквизитами.
• реквизиты передаются в качестве аргументов компонентам
• на странице подключен скрипт для передачи данных в GA
• для того чтобы отправить данные в GA, на странице подключен скрипт "https://www.googletagmanager.com/gtag/js" и хук useEffect()
• подробнее о getServerSideProps

/pages/InnerPage/index.js

import BannerName from '../../components/BannerName.js';
import { sigmaGetExperimentParam, sigmaGetAllUserExperiments } from "../../helpers/sigma.js";
import React from 'react';
import Script from 'next/script'

export default function InnerPage({ isBannerNameExperiment, allExperiments }) {
  React.useEffect( () => {
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments) };
    gtag('event', 'get', { 
      event_category: 'check', 
      event_action: 'check', 
      dimension1: allExperiments });
    console.log(window.dataLayer)
  }, []);

  return (
    <>
      <Script 
        src='https://www.googletagmanager.com/gtag/js?id=UA-000000-1' 
        strategy='beforeInteractive'
      />
      <main>
        {isBannerNameExperiment &&  <BannerName /> }
      </main>
    </>
  )
}

export const getServerSideProps = async ({ res, req }) => {
  const userId = userCooKieId || req.userId; // кука или любой id

  const isBannerNameExperiment = await sigmaGetExperimentParam(<expId>, <expParam>, { userId });
  const allExperiments = await sigmaGetAllUserExperiments({ userId });

  return {
    props: {
      isBannerNameExperiment,
      allExperiments,
    },
  }
}

Подключение sdk c ssr, функция getInitialProps

Установка SDK

NPM

npm i expf-sigma-node.js

Yarn

yarn add expf-sigma-node.js

Подключение SDK

Создайте и экспортируйте вспомогательные асинхронные функции.

/helpers/sigma.js

import Sigma from 'expf-sigma-node.js';

const token = <TOKEN>;

export const sigmaGetExperimentParam = async (expId, paramName, userProps = {}) => {
  const userData = userProps;
  const sigma = new Sigma(token, userData);

  const variant = await sigma.getExperiment(expId).then(
    (res) => res.getParamValue(paramName)
  );
  
  if (variant) return variant;
  return;
}

export const sigmaGetAllUserExperiments = async (userProps = {}) => {
  const userData = userProps;
  const sigma = new Sigma(token, userData);

  const userSigmaExps = await sigma.getAllUserExperiments()

  if (userSigmaExps) return userSigmaExps;
  return;
}

Страница с экспериментом

В примере показано, как получить данные эксперимента и предварительно отобразить результат.

• динамический импорт вспомогательных функций в теле InnerPage.getInitialProps
• подробнее о getInitialProps

/pages/InnerPage/index.js

import BannerName from '../../components/BannerName.js';

function InnerPage({ isBannerNameExperiment, allExperiments }) {
  return (
    <>
      <main>
        {isBannerNameExperiment &&  <BannerName /> }
      </main>
    </>
  )
}

InnerPage.getInitialProps = async () => {
  const sigma = await import('../../helpers/sigma.js')
  const userId = userCooKieId || req.userId; // кука или любой id

  const isBannerNameExperiment = await sigma.sigmaGetExperimentParam(<expId>, <expParam>, { userId });
  const allExperiments = await sigma.sigmaGetAllUserExperiments({ userId });

  return { isBannerNameExperiment, allExperiments }
}

export default InnerPage;

Подключение sdk без ssr

Установка SDK

NPM

npm i expf-sigma.js

Yarn

yarn add expf-sigma.js

Подключение SDK

Создайте hook, который будет содержать настройки sdk и результаты экспериментов, фича флагов.

./src/hooks/useSigma.js

import Sigma from "expf-sigma.js";
import { useEffect, useState } from 'react';

export function useSigma () {
  const [sigma, setSigmaState] = useState({});

  useEffect(() => {
    const sigmaData =  async () => {
      const sigma = new Sigma();
      const token = <TOKEN>;

      sigma.init({
        token,
        userData: {
          email: '1ex@mail.ru',
        },
      });

      const browserName = await sigma.checkFlag('browser_name');
      const buttonColor = await sigma.checkFlag('button_color');
      const exParam = await sigma.getExperiment('param').then((res) => res.getParamValue('param_name'));

      setSigmaState({
        browserName,
        buttonColor,
        exParam
      });
    }

    sigmaData();
  }, []);

  return [sigma];
}

В компонентах вызвать hook, например:

./src/components/Title.js

import { useSigma } from "../hooks/useSigma";

export default function Title() {
  const [sigma] = useSigma();

  return (
    <h1>{sigma.browserName}</h1>
  );
}

Чтобы подключить компонент с hook useSigma, нужно отключить ssr и динамически импортировать

import dynamic from 'next/dynamic';

const DynamicComponentWithNoSSR = dynamic(
  () => import('../../components/Title.js'),
  { ssr: false }
)

export default function ClientSide() {
  return (
    <>
      <DynamicComponentWithNoSSR />
    </>
  )
}