Integrations

Prodio Workflows automatically tracks how users interact with your workflows to help you better understand user engagement with your product. If the built-in prodio are not enough, you can easily integrate with almost any analytics tool to get the full picture of your users’ behavior.

Setup

To integrate Prodio Workflows with your analytics tool, pass a tracking function to the Prodio init function. The tracking function will be called every time a user interacts with your workflows, sending an event object with the details of the interaction.

import { init } from "@Prodio/workflow";
 
init({
  projectId: "xxx",
  userId: "abc",
  tracking: (event) => {
    fetch("https://analytics.Prodio.com/track", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        eventType: event.type,
        flowId: event.flowId,
        stepIndex: event.stepIndex,
        location: event.location,
        userId: event.userId,
        projectId: event.projectId,
      }),
    });
  },
});

import { init } from "@Prodio/workflow";
import mixpanel from "mixpanel-browser";
 
init({
  projectId: "xxx",
  userId: "abc",
  tracking: (event) => {
    mixpanel.track(
      event.type, // What happened
      {
        flowId: event.flowId, // What workflow the user is interacting with
        stepIndex: event.stepIndex, // What step they are on
        location: event.location, // What page they are on
        userId: event.userId, // Optional: Mixpanel automatically adds user properties to events when you use mixpanel.identify
      },
    );
  },
});

Events

Events are sent to your tracking function every time a user interacts with a workflow. You can use these events to track how users are engaging with your workflows and analyze the data in your analytics tool.

Event Types

These are the events that Prodio Workflows will send to your tracking function:

• startFlow: When a user starts a workflow.
• nextStep: When a user goes to the next step in a workflow.
• prevStep: When a user goes to the previous step in a workflow.
• finishFlow: When a user finishes a workflow.
• cancelFlow: When a user exits the workflow without finishing it.

Event Object

The event object has the following shape:

interface TrackingEvent {
  type: "startFlow" | "nextStep" | "prevStep" | "finishFlow" | "cancelFlow";
  flowId: string;
  /**
   * Index of the step in the workflow.
   * @example
   * - 0 - First step
   * - 1 - Second step
   * - [2, 1, 0] - First step (0) in the second branch (1) of the third step (2)
   * - [2, 1, 1] - Second step (1) in the second branch (1) of the third step (2)
   * - 3 - Fourth step
   */
  stepIndex?: number | number[];
  /**
   * Hash of the step definition.
   */
  stepHash?: string;
  /**
   * Hash of the whole workflow definition.
   */
  flowHash: string;
  /**
   * userId you've passed to the init function.
   */
  userId?: string;
  /**
   * projectId you've passed to the init function.
   */
  projectId: string;
  /**
   * Browser location
   * @example
   * - "/" - Root
   * - "/checkout"
   * - "/search?query=foo" - Query params are included
   */
  location: string;
}