Developers
Sync Tracking Plan to Your Codebase

Sync your tracking plan to your codebase

Developers can use the @events.win/cli to import types for your event and start tracking them in your codebase.

Install the CLI

npm i -D @events.win/cli

Copy the developer key

Head to the https://app.events.win/{your-org-slug}/developers and copy the developer key from the organization settings. You'll need this key to authenticate the CLI.

Copy developer key gif

Run the "init" command

# This command will walk you through short initialization steps
# and prompt you to enter the developer key
npx events.win init
Initializing cli gif

Done! πŸŽ‰ You should now have a .events.win folder in your root directory:

Note: You'll only need to run the init command once

.events.win
β”œβ”€β”€ config.yml # This file contains your organization slug and developer key
β”œβ”€β”€ types.ts # This file contains all the types for your tracking plan
β”œβ”€β”€ segmentBrowser.ts # This file contains the Segment (browser) snippet
β”œβ”€β”€ segmentNode.ts # This file contains the Segment (node) snippet
β”œβ”€β”€ amplitudeBrowser.ts # This file contains the Amplitude (browser) snippet
└── amplitudeNode.ts # This file contains the Amplitude (node) snippet

Pull changes for your tracking plan

# This command will pull the latest tracking plan from the Events dashboard
npx events.win pull

Add write keys and other secrets for the sources

You should add the write keys and other secrets for the sources to the segment and amplitude files in the .events.win folder:

import { AnalyticsBrowser } from "@segment/analytics-next";
import { ProductClicked, ProductViewed } from "./types";
 
const analytics = AnalyticsBrowser.load({
  writeKey: "<write-key>", // Add your write key here
});
 
...

Use in your codebase

You can now use the types and snippets in your codebase to start tracking events.

import { productClicked } from "../.events.win/segmentBrowser";
 
productClicked({
  product: {
    sku: "123",
    name: "Product name",
    image_src: "https://example.com/image.jpg",
  },
});

πŸŽ‰ You've learned how to sync your tracking plan to your codebase!