Skip to main content

SDK Setup and Feature Flag Tutorial

caution

Always check your SDK documentation to ensure you are using the correct method names.
The methods below are from the Node.js SDK.
Some features or methods may not be available in all SDKs.

SDK Checklist Overview​

This guide provides a step-by-step checklist to set up and use the Kameleoon SDK, configure Feature Flags, and optionally enable Hybrid Mode (SDK + engine.js).

1. Basics​

One-Time Setup (In the SDK)​

Step 1 – Install, Configure, and Initialize the SDK​

  • Install the SDK and configure it, paying attention to:
    • updateInterval: Defines how often the SDK fetches the latest configuration from Kameleoon.
    • trackingInterval: Defines how often the SDK sends tracked data to Kameleoon.
  • Create a new KameleoonClient and call initialize() to load configuration.
  • PHP SDK only: Install a cron job to collect data.

Step 2 – Set the Visitor Code​

  • Use getVisitorCode() or your own method to set the kameleoonVisitorCode cookie.

Step 3 (Optional) – Enable Cross-Device Experimentation & Custom Bucketing Key​

  • Cross-Device Experimentation: Share the same kameleoonVisitorCode across devices.
  • Custom Bucketing Key: Show the same variation to a defined group of visitors (e.g., users from the same organization).

Step 4 – Handle Consent​

  • If your experiment requires consent, call setLegalConsent().
    (Not needed if the feature flag type uses Delivery Rules.)

Step 5 – Send Predefined Data​

  • Use addData() to target:
    • Device
    • Browser
    • Page URL
    • Other predefined criteria
  • Call flush() to send data to Kameleoon.
    (Note: flush is also called implicitly by isFeatureActive, getVariation, and trackConversion.)

Step 6 – Exclude and Tag Bots​

  • Exclude bots from results using addData() with the userAgent type.
  • To tag internal bots, pass curl/8.0 to userAgent in addData().

One-Time Setup (In the Kameleoon App)​

Step 7 – Create a Feature Flag​

  • Create a new Feature Flag in the Kameleoon App.
  • Add at least one rule (Delivery or Experiment) to the Rollout Planner.

Step 8 – Define Your Segment​

  • Option 1: Target all visitors in the Kameleoon App and implement custom logic in the SDK.
  • Option 2 (Recommended): Use a Kameleoon segment in the Kameleoon App.
    • Ensure you use addData() in the SDK to send data used for targeting (page URL, device, browser, etc.).

Step 9 – Attach Goals to the Flag​

  • Attach at least one goal to track conversions.

Step 10 – Activate the Flag​

  • Turn the flag on in the Kameleoon App to start serving variations.

Setup for Each Flag (In the SDK)​

Step 11 – Check Feature Activation​

  • Call isFeatureActive() to check if a visitor is targeted:
    • Returns false if the variation is "off"
    • Returns true if active
  • Call getVariation() to retrieve the variation key.

Step 12 – Track Conversions & Set Custom Data​

  • Call trackConversion() with relevant parameters to track goals.
  • Optionally, use addData() for custom targeting and segmentation.

Step 13 (Optional) – Use Previously Collected Data or External Data​

  • Previously Collected Data: Call getRemoteVisitorData() to reuse collected or preloaded conditions.
  • External Data: Use the Data API to collect external data and retrieve it in the SDK via getRemoteData().

2. Hybrid Mode (Optional)​

Follow these steps only if using Hybrid Mode (Client-side SDK + engine.js).

One-Time Setup (In the SDK)​

Step 1 – Install engine.js​

  • Add the engine.js script to your front-end.

Step 2 – Handle Frontend Consent​

If consent is required, handle it using:

  • The Activation API
  • The kameleoonQueue via Tag Manager
  • A direct code snippet:
window.kameleoonQueue.push(['Kameleoon.API.Core.enableLegalConsent', 'BOTH']); 
// or
window.kameleoonQueue.push(['Kameleoon.API.Core.disableLegalConsent', 'BOTH']);

Step 3 – Sync Visitor Code​

If consent is required, sync the visitor code cookie between the SDK and the front-end:

window.kameleoonQueue.push({
  level: "IMMEDIATE",
  command: () => Kameleoon.API.Visitor.setVisitorCode("<USER_ID>")
});

Optional: Send Data to External Tools (Hybrid Mode)​

One-Time Setup (In the Kameleoon App)​

Step 1 – Activate Third-Party Integration​
  • In the Integrations section of the Kameleoon App, enable the analytics tool you want to use (e.g., GA4).

Setup for Each Flag (In the Kameleoon App)​

Step 2 – Turn On the Integration​
  • In the Feature Flag Dashboard, activate the tool for your chosen rule type (Experiment or Delivery).
  • Ensure integration is enabled in the correct environment (Production, Development, or Staging).

Setup for Each Flag (In the SDK)​

Step 3 – Retrieve Tracking Code​
  • Call getEngineTrackingCode() in your SDK code within 5 seconds of activating the feature (isFeatureActive or getVariation).
Step 4 – Inject Tracking Code into the Page​

Insert the returned code into the HTML:

window.kameleoonQueue = window.kameleoonQueue || [];
window.kameleoonQueue.push(['Experiments.assignVariation', 244200, 962266]);
window.kameleoonQueue.push(['Experiments.trigger', 244200, true]);
Step 5 – Verify Event Transmission​
  • On the targeted page, inspect the page elements to confirm code injection.
  • For GA4, verify the event is pushed into the dataLayer.
  • In the Network tab, confirm that the event is sent to the correct analytics tool (GA4 should show a “collect” event).