Deco SDK

Setup

On deco.cx admin

1 - Create a project on deco.cx using the template SDK.

2 - Create your configuration rules in a loader called config.ts.

Feel free to edit Config props.

interface Props {
  text: WithTraffic<string>;
  showMenu: WithTraffic<boolean>
}

3 - Create a global block using this loader to manage your content.

The template already gives you one called cms.

On your react app

1 - Create a deco.config.ts file in your root, with this content:

const config = {
    sitename: 'your-site',
    blockId: "your-block-id",
    domain: "your-domain",
    plausibleDomain: "your-analytics-domain",
    plausibleScript: "https://plausible.io/js/script.manual.hash.local.js"
}

export default config;

Use correct plausible script in each environment:

Localhost: https://plausible.io/js/script.manual.hash.local.js

Production: https://plausible.io/js/script.manual.hash.js

2 - Add DecoProvider on top of your components:

import { DecoProvider } from 'deco-sdk';
import config from './../deco.config';

<DecoProvider config={config} >
    <Component />
</DecoProvider>

Using

To access your data, you can use useConfig() hook.

We highly recommend you to create an sdk like this one to facilitate the usage:

// sdk/useFlag.ts

import { useConfig } from "deco-sdk";

export interface Data {
  text: string;
  showMenu: boolean;
}

export const useFlag = <K extends keyof Data>(flag: K): Data[K] | undefined => {
  const context = useConfig<Data>();
  return context?.data?.[flag];
};

Where Data is the same type that you did on deco.cx admin.

It will give you this usage in your components:

function Header(){
    const showMenu = useFlag("showMenu")
    return(
        <>
            <Logo/>
            {showMenu && <Menu/>}
        <>
    )
}

It means that the users percentage that you defined (or default 50%) will be splited between configurations.

Analytics

When you are using <DecoProvider/>, we insert an analytics setup.

All pageviews are already be counting (double check for SPAs).

See your results on deco.cx admin:

Go to Experiments tab and create a Experiment with the same name of your prop (in this example text or showMenu)

To create new events, it is super easy:

import { sendEvent } from 'deco-sdk'

function AddToCart(){
    return(
        <button
            onClick={() => {
                const props = {productId: 222}
                sendEvent("add_to_cart", props)
            }}
        >
            Add To Cart
        </button>
    )
}