Developers
Events.win CLI

Overview of the @events.win/cli

Setup

️😤

Skip the overview, I just want to run the CLI and sync my tracking plan 👉 Setup Instructions

Files structure

The CLI generates a .events.win folder in your project root. This folder contains the following files:

      • config.yml
      • types.ts
  • config.yml

    events.win:
      version: 1 # This is the version of the config file, don't change this
      # This is your developer key (from https://app.events.win/{your-org-slug}/developers)
      # You can change this as needed
      developerKey: shhhhhhh
      # This section contains the sources the CLI will generate code for
      sources:
        - segmentBrowser
        - segmentNode
        - amplitudeBrowser
        - amplitudeNode
      # This section contains the export types the CLI will generate code for
      exportTypes:
        - typescript
        - javascript

    types.ts

    This file contains all the types for your tracking plan.

    Example:

    // Definitions for Product
    export interface Product {
      /**
       * Unique id of the product on the store
       */
      sku: string;
      /**
       * Name of the product on the store
       */
      name: string;
      /**
       * Link to the image shown in the store
       */
      image_src: string;
    }
     
    // Definitions for ProductClicked
    export interface ProductClicked {
      product: Product;
    }
     
    // Definitions for ProductViewed
    export interface ProductViewed {
      product: Product;
    }

    Analytic sources

    The CLI generates files that you can use for you analytics sources. For example, if you have a Segment source in your config file and select TypeScript and JavaScript, the CLI will generate the following files:

    segmentBrowser.ts

    This file contains the Segment (browser) snippet.

    Example:

    import { AnalyticsBrowser } from "@segment/analytics-next";
    import { ProductClicked, ProductViewed } from "./types";
     
    const analytics = AnalyticsBrowser.load({
      writeKey: "<write-key>", // Add your write key here
    });
     
    export const productClicked = (payload: ProductClicked) => {
      analytics.track("product-clicked", payload);
    };
     
    export const productViewed = (payload: ProductViewed) => {
      analytics.track("product-viewed", payload);
    };
    segmentBrowser.js (JSDoc)
    import { AnalyticsBrowser } from "@segment/analytics-next";
    const analytics = AnalyticsBrowser.load({ writeKey: "<YOUR_WRITE_KEY>" });
     
    /**
     * No description available.
     * @typedef {Object} User
     * @property {string} User.id
     * @property {string} User.name
     * @property {string} User.signupDate
     */
    /**
     * All products displayed in our ecommerce store
     * @typedef {Object} Product
     * @property {string} Product.sku - Unique identifier for the product
     * @property {string} Product.name - Name of the product
     * @property {User[]} Product.buyers - Users who have bought
     */
    /**
     * No description available.
     * @typedef {Object} NewSchema
     * @property {string} NewSchema.myProperty
     */
     
    /**
     * Triggers when a product is viewed on product listing pages and product details page.
     * @param {Object} payload - Payload details.
     * @param {Product} payload.product
     */
    export const productViewed = (payload) => {
      analytics.track("product-viewed", payload);
    };
     
    /**
     * Triggers when products are clicked on product listing pages, or when clicked from carousels on landing and product listing pages.
     * @param {Object} payload - Payload details.
     * @param {string} payload.sku - Unique identifier of the product
     * @param {number} payload.count
     * @param {string[]} payload.categories - List of categories on the product
     */
    export const productClicked = (payload) => {
      analytics.track("product-clicked", payload);
    };