<script src="https://pathing.cc/pathing.min.js" pathing-api-key="YOUR_API_KEY"></script>Add this script tag to your HTML before the closing </body> tag. Replace YOUR_API_KEY with your Pathing public API key from the dashboard.
Pathing tracks user behavior through events. Events have a type and a payload of data. Some event types are predefined (like "purchase" or "pageview"), but you can also send custom events.
Parameters allow you to attach metadata to event properties. This is useful for providing readable labels and consistent keys for your analytics dashboard.
When initialized, Pathing automatically tracks pageview events, capturing the current URL, page title, and referrer information.
// Track a purchase event
pathing.send.purchase({
product: "Premium Plan",
price: 99.99,
currency: "USD"
});
// Track a playback event
pathing.send.playback({
content: "Product Demo Video",
duration: 120,
progress: 0.75
});// Track a custom event
pathing.send.raw("signup_completed", {
method: "email",
referrer: document.referrer,
timestamp: Date.now()
});Pathing can automatically track events when users interact with DOM elements.
// Bind a purchase event to a button
const purchaseButton = document.querySelector("#purchase-button");
pathing.link.purchase(purchaseButton, {
product: "Premium Plan",
price: 99.99
});// Bind a custom event to an element
const signupLink = document.querySelector("#signup-link");
pathing.link.raw(signupLink, "signup_click", {
source: "header",
page: window.location.pathname
}, { preventDefault: true });Parameters provide metadata for properties in your analytics dashboard.
// Create a parameter with metadata
const productName = new pathing.Parameter(
"Product Name", // Label displayed in the dashboard
"product_name", // Consistent key for database/exports
"Premium Plan" // Actual value sent with the event
);
// Use it in an event
pathing.send.purchase({
product: productName,
price: 99.99
});If you're using TypeScript, you can declare the Pathing global:
declare global {
interface Window {
pathing: {
send: {
purchase: (data: Record<string, any>) => Promise<any>;
playback: (data: Record<string, any>) => Promise<any>;
raw: (type: string, data: Record<string, any>) => Promise<any>;
};
link: {
purchase: (element: HTMLElement, data: Record<string, any>, options?: { preventDefault?: boolean }) => HTMLElement;
raw: (element: HTMLElement, type: string, data: Record<string, any>, options?: { preventDefault?: boolean }) => HTMLElement;
};
Parameter: new (label: string, key: string, value: any) => any;
};
}
}For production environments, you can use various CDN options:
<!-- From pathing.cc (primary) -->
<script src="https://pathing.cc/pathing.min.js" pathing-api-key="YOUR_API_KEY"></script>
<!-- From unpkg (fallback) -->
<script src="https://unpkg.com/pathingjs@latest/dist/pathing.min.js" pathing-api-key="YOUR_API_KEY"></script>
<!-- From jsDelivr (fallback) -->
<script src="https://cdn.jsdelivr.net/npm/pathingjs@latest/dist/pathing.min.js" pathing-api-key="YOUR_API_KEY"></script>