@builder.io/sdk-solid 0.1.3-0 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.1.3-0",
+  "version": "0.1.3",
   "description": "",
   "type": "module",
   "main": "./dist/sdk-solid.js",

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

@@ -14,7 +14,7 @@ import {
   components,
   createRegisterComponentMessage,
 } from "../../functions/register-component.js";
-import { _track } from "../../functions/track.js";
+import { _track } from "../../functions/track/index.js";
 import RenderBlocks from "../render-blocks.jsx";
 import RenderContentStyles from "./components/render-styles.jsx";
 import builderContext from "../../context/builder.context.js";
@@ -23,6 +23,7 @@ import {
   setupBrowserForEditing,
 } from "../../scripts/init-editing.js";
 import { checkIsDefined } from "../../helpers/nullable.js";
+import { getInteractionPropertiesForEvent } from "../../functions/track/interaction.js";
 
 function RenderContent(props) {
   const [forceReRenderCount, setForceReRenderCount] = createSignal(0);
@@ -62,6 +63,8 @@ function RenderContent(props) {
 
   const [httpReqsData, setHttpReqsData] = createSignal({});
 
+  const [clicked, setClicked] = createSignal(false);
+
   function contentState() {
     return {
       ...props.content?.data?.state,
@@ -124,7 +127,7 @@ function RenderContent(props) {
     }
   }
 
-  function onClick(_event) {
+  function onClick(event) {
     if (useContent) {
       const variationId = useContent?.testVariationId;
       const contentId = useContent?.id;
@@ -134,8 +137,13 @@ function RenderContent(props) {
         contentId,
         apiKey: props.apiKey,
         variationId: variationId !== contentId ? variationId : undefined,
+        ...getInteractionPropertiesForEvent(event),
+        unique: !clicked(),
       });
     }
+    if (!clicked()) {
+      setClicked(true);
+    }
   }
 
   function evalExpression(expression) {

package/src/functions/track/helpers.js

@@ -0,0 +1,50 @@
+import { TARGET } from "../../constants/target";
+import { isBrowser } from "../is-browser";
+const getLocation = () => {
+  if (TARGET === "reactNative") {
+    return null;
+  } else if (isBrowser()) {
+    const parsedLocation = new URL(location.href);
+    if (parsedLocation.pathname === "") {
+      parsedLocation.pathname = "/";
+    }
+    return parsedLocation;
+  } else {
+    console.warn("Cannot get location for tracking in non-browser environment");
+    return null;
+  }
+};
+const getUserAgent = () => typeof navigator === "object" && navigator.userAgent || "";
+const getUserAttributes = () => {
+  const userAgent = getUserAgent();
+  const isMobile = {
+    Android() {
+      return userAgent.match(/Android/i);
+    },
+    BlackBerry() {
+      return userAgent.match(/BlackBerry/i);
+    },
+    iOS() {
+      return userAgent.match(/iPhone|iPod/i);
+    },
+    Opera() {
+      return userAgent.match(/Opera Mini/i);
+    },
+    Windows() {
+      return userAgent.match(/IEMobile/i) || userAgent.match(/WPDesktop/i);
+    },
+    any() {
+      return isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows() || TARGET === "reactNative";
+    }
+  };
+  const isTablet = userAgent.match(/Tablet|iPad/i);
+  const url = getLocation();
+  return {
+    urlPath: url == null ? void 0 : url.pathname,
+    host: (url == null ? void 0 : url.host) || (url == null ? void 0 : url.hostname),
+    device: isTablet ? "tablet" : isMobile.any() ? "mobile" : "desktop"
+  };
+};
+export {
+  getUserAttributes
+};

package/src/functions/{track.js → track/index.js}

@@ -49,11 +49,12 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { TARGET } from "../constants/target.js";
-import { getSessionId } from "../helpers/sessionId.js";
-import { getVisitorId } from "../helpers/visitorId.js";
-import { isBrowser } from "./is-browser.js";
-import { isEditing } from "./is-editing.js";
+import { TARGET } from "../../constants/target.js";
+import { getSessionId } from "../../helpers/sessionId.js";
+import { getVisitorId } from "../../helpers/visitorId.js";
+import { isBrowser } from "../is-browser.js";
+import { isEditing } from "../is-editing.js";
+import { getUserAttributes } from "./helpers.js";
 const getTrackingEventData = (_0) => __async(void 0, [_0], function* ({
   canTrack
 }) {
@@ -82,8 +83,11 @@ const createEvent = (_a) => __async(void 0, null, function* () {
   return {
     type: eventType,
     data: __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, properties), {
-      metadata: JSON.stringify(metadata)
+      metadata: __spreadValues({
+        url: location.href
+      }, metadata)
     }), yield getTrackingEventData({ canTrack })), {
+      userAttributes: getUserAttributes(),
       ownerId: apiKey
     })
   };

package/src/functions/track/interaction.js

@@ -0,0 +1,53 @@
+function round(num) {
+  return Math.round(num * 1e3) / 1e3;
+}
+const findParentElement = (target, callback, checkElement = true) => {
+  if (!(target instanceof HTMLElement)) {
+    return null;
+  }
+  let parent = checkElement ? target : target.parentElement;
+  do {
+    if (!parent) {
+      return null;
+    }
+    const matches = callback(parent);
+    if (matches) {
+      return parent;
+    }
+  } while (parent = parent.parentElement);
+  return null;
+};
+const findBuilderParent = (target) => findParentElement(target, (el) => {
+  const id = el.getAttribute("builder-id") || el.id;
+  return Boolean((id == null ? void 0 : id.indexOf("builder-")) === 0);
+});
+const computeOffset = ({
+  event,
+  target
+}) => {
+  const targetRect = target.getBoundingClientRect();
+  const xOffset = event.clientX - targetRect.left;
+  const yOffset = event.clientY - targetRect.top;
+  const xRatio = round(xOffset / targetRect.width);
+  const yRatio = round(yOffset / targetRect.height);
+  return {
+    x: xRatio,
+    y: yRatio
+  };
+};
+const getInteractionPropertiesForEvent = (event) => {
+  const target = event.target;
+  const targetBuilderElement = target && findBuilderParent(target);
+  const builderId = (targetBuilderElement == null ? void 0 : targetBuilderElement.getAttribute("builder-id")) || (targetBuilderElement == null ? void 0 : targetBuilderElement.id);
+  return {
+    targetBuilderElement: builderId || void 0,
+    metadata: {
+      targetOffset: target ? computeOffset({ event, target }) : void 0,
+      builderTargetOffset: targetBuilderElement ? computeOffset({ event, target: targetBuilderElement }) : void 0,
+      builderElementIndex: targetBuilderElement && builderId ? [].slice.call(document.getElementsByClassName(builderId)).indexOf(targetBuilderElement) : void 0
+    }
+  };
+};
+export {
+  getInteractionPropertiesForEvent
+};

package/src/index.js

@@ -8,7 +8,7 @@ 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";
-import { track } from "./functions/track";
+import { track } from "./functions/track/index.js";
 export {
   track
 };