@builder.io/sdk-svelte 0.0.5 → 0.0.6

package/package/--package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "type": "module",
   "files": [
     "package",

package/package/components/render-content/render-content.svelte

@@ -11,7 +11,7 @@ import { isBrowser } from "../../functions/is-browser.js";
 import { isEditing } from "../../functions/is-editing.js";
 import { isPreviewing } from "../../functions/is-previewing.js";
 import { components, createRegisterComponentMessage, } from "../../functions/register-component.js";
-import { track } from "../../functions/track.js";
+import { _track } from "../../functions/track.js";
 import RenderBlocks from "../render-blocks.svelte";
 import RenderContentStyles from "./components/render-styles.svelte";
 import { registerInsertMenu, setupBrowserForEditing, } from "../../scripts/init-editing.js";
@@ -77,11 +77,14 @@ function evaluateJsCode() {
 }
 function onClick(_event) {
     if (useContent()) {
-        track({
+        const variationId = useContent?.()?.testVariationId;
+        const contentId = useContent?.()?.id;
+        _track({
             type: "click",
             canTrack: canTrackToUse(),
-            contentId: useContent?.()?.id,
-            orgId: apiKey,
+            contentId,
+            apiKey: apiKey,
+            variationId: variationId !== contentId ? variationId : undefined,
         });
     }
 }
@@ -204,11 +207,14 @@ onMount(() => {
             window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
         }
         if (useContent()) {
-            track({
+            const variationId = useContent?.()?.testVariationId;
+            const contentId = useContent?.()?.id;
+            _track({
                 type: "impression",
                 canTrack: canTrackToUse(),
-                contentId: useContent?.()?.id,
-                orgId: apiKey,
+                contentId,
+                apiKey: apiKey,
+                variationId: variationId !== contentId ? variationId : undefined,
             });
         }
         // override normal content in preview mode

package/package/functions/track.d.ts

@@ -2,20 +2,50 @@ import type { CanTrack } from '../types/can-track.js';
 interface Event {
     type: 'click' | 'impression';
     data: {
+        /**
+         * (Optional) The content's ID. Useful if this event pertains to a specific piece of content.
+         */
         contentId?: string;
+        /**
+         * This is the ID of the space that the content belongs to.
+         */
         ownerId: string;
+        /**
+         * Stringified JSON object containing any additional metadata you want to track.
+         */
         metadata?: string;
+        /**
+         * Session ID of the user. This is provided by the SDK by checking session storage.
+         */
         sessionId: string | undefined;
+        /**
+         * Visitor ID of the user. This is provided by the SDK by checking cookies.
+         */
         visitorId: string | undefined;
+        /**
+         * (Optional) If running an A/B test, the ID of the variation that the user is in.
+         */
+        variationId?: string;
         [index: string]: any;
     };
 }
-declare type EventProperties = {
-    type: Event['type'];
-    orgId: Event['data']['ownerId'];
-    contentId: Event['data']['contentId'];
+declare type EventProperties = Pick<Event, 'type'> & Pick<Event['data'], 'contentId' | 'variationId'> & {
+    /**
+     * Your organization's API key.
+     */
+    apiKey: Event['data']['ownerId'];
+    /**
+     * (Optional) metadata that you want to provide with your event.
+     */
+    metadata?: {
+        [index: string]: any;
+    };
+    /**
+     * (Optional) Any additional (non-metadata) properties to add to the event.
+     */
     [index: string]: any;
 };
 export declare type EventProps = EventProperties & CanTrack;
-export declare function track(eventProps: EventProps): Promise<void | Response>;
+export declare function _track(eventProps: EventProps): Promise<void | Response>;
+export declare const track: (args: EventProperties) => Promise<void | Response>;
 export {};

package/package/functions/track.js

@@ -14,16 +14,16 @@ const getTrackingEventData = async ({ canTrack, }) => {
         visitorId,
     };
 };
-const createEvent = async ({ type: eventType, canTrack, orgId, contentId, ...properties }) => ({
+const createEvent = async ({ type: eventType, canTrack, apiKey, metadata, ...properties }) => ({
     type: eventType,
     data: {
         ...properties,
+        metadata: JSON.stringify(metadata),
         ...(await getTrackingEventData({ canTrack })),
-        ownerId: orgId,
-        contentId,
+        ownerId: apiKey,
     },
 });
-export async function track(eventProps) {
+export async function _track(eventProps) {
     if (!eventProps.canTrack) {
         return;
     }
@@ -46,3 +46,4 @@ export async function track(eventProps) {
         console.error('Failed to track: ', err);
     });
 }
+export const track = (args) => _track({ ...args, canTrack: true });

package/package/index.d.ts

@@ -8,3 +8,4 @@ export * from './functions/register.js';
 export * from './functions/set-editor-settings.js';
 export * from './functions/get-content/index.js';
 export * from './functions/get-builder-search-params/index.js';
+export { track } from './functions/track';

package/package/index.js

@@ -8,3 +8,4 @@ export * from './functions/register.js';
 export * from './functions/set-editor-settings.js';
 export * from './functions/get-content/index.js';
 export * from './functions/get-builder-search-params/index.js';
+export { track } from './functions/track';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "type": "module",
   "files": [
     "package",

package/src/components/render-content/render-content.svelte

@@ -57,7 +57,7 @@
     components,
     createRegisterComponentMessage,
   } from "../../functions/register-component.js";
-  import { track } from "../../functions/track.js";
+  import { _track } from "../../functions/track.js";
   import RenderBlocks from "../render-blocks.svelte";
   import RenderContentStyles from "./components/render-styles.svelte";
   import {
@@ -131,11 +131,14 @@
   }
   function onClick(_event) {
     if (useContent()) {
-      track({
+      const variationId = useContent?.()?.testVariationId;
+      const contentId = useContent?.()?.id;
+      _track({
         type: "click",
         canTrack: canTrackToUse(),
-        contentId: useContent?.()?.id,
-        orgId: apiKey,
+        contentId,
+        apiKey: apiKey,
+        variationId: variationId !== contentId ? variationId : undefined,
       });
     }
   }
@@ -275,11 +278,14 @@
         );
       }
       if (useContent()) {
-        track({
+        const variationId = useContent?.()?.testVariationId;
+        const contentId = useContent?.()?.id;
+        _track({
           type: "impression",
           canTrack: canTrackToUse(),
-          contentId: useContent?.()?.id,
-          orgId: apiKey,
+          contentId,
+          apiKey: apiKey,
+          variationId: variationId !== contentId ? variationId : undefined,
         });
       }
 

package/src/functions/track.ts

@@ -8,11 +8,30 @@ import { isEditing } from './is-editing.js';
 interface Event {
   type: 'click' | 'impression';
   data: {
+    /**
+     * (Optional) The content's ID. Useful if this event pertains to a specific piece of content.
+     */
     contentId?: string;
+    /**
+     * This is the ID of the space that the content belongs to.
+     */
     ownerId: string;
+    /**
+     * Stringified JSON object containing any additional metadata you want to track.
+     */
     metadata?: string;
+    /**
+     * Session ID of the user. This is provided by the SDK by checking session storage.
+     */
     sessionId: string | undefined;
+    /**
+     * Visitor ID of the user. This is provided by the SDK by checking cookies.
+     */
     visitorId: string | undefined;
+    /**
+     * (Optional) If running an A/B test, the ID of the variation that the user is in.
+     */
+    variationId?: string;
     [index: string]: any;
   };
 }
@@ -38,32 +57,44 @@ const getTrackingEventData = async ({
   };
 };
 
-type EventProperties = {
-  type: Event['type'];
-  orgId: Event['data']['ownerId'];
-  contentId: Event['data']['contentId'];
-  [index: string]: any;
-};
+type EventProperties = Pick<Event, 'type'> &
+  Pick<Event['data'], 'contentId' | 'variationId'> & {
+    /**
+     * Your organization's API key.
+     */
+    apiKey: Event['data']['ownerId'];
+    /**
+     * (Optional) metadata that you want to provide with your event.
+     */
+    metadata?: {
+      [index: string]: any;
+    };
+
+    /**
+     * (Optional) Any additional (non-metadata) properties to add to the event.
+     */
+    [index: string]: any;
+  };
 
 export type EventProps = EventProperties & CanTrack;
 
 const createEvent = async ({
   type: eventType,
   canTrack,
-  orgId,
-  contentId,
+  apiKey,
+  metadata,
   ...properties
 }: EventProps): Promise<Event> => ({
   type: eventType,
   data: {
     ...properties,
+    metadata: JSON.stringify(metadata),
     ...(await getTrackingEventData({ canTrack })),
-    ownerId: orgId,
-    contentId,
+    ownerId: apiKey,
   },
 });
 
-export async function track(eventProps: EventProps) {
+export async function _track(eventProps: EventProps) {
   if (!eventProps.canTrack) {
     return;
   }
@@ -88,3 +119,6 @@ export async function track(eventProps: EventProps) {
     console.error('Failed to track: ', err);
   });
 }
+
+export const track = (args: EventProperties) =>
+  _track({ ...args, canTrack: true });

package/src/index.ts

@@ -10,3 +10,4 @@ export * from './functions/register.js';
 export * from './functions/set-editor-settings.js';
 export * from './functions/get-content/index.js';
 export * from './functions/get-builder-search-params/index.js';
+export { track } from './functions/track';