@g2crowd/buyer-intent-provider-sdk 0.3.0 → 0.4.0

package/src/browser/dom.js

@@ -0,0 +1,184 @@
+function parseJson(value) {
+  if (!value) {
+    return undefined;
+  }
+
+  try {
+    return JSON.parse(value);
+  } catch (_error) {
+    return undefined;
+  }
+}
+
+function parseArray(value) {
+  if (!value) {
+    return undefined;
+  }
+
+  const parsed = parseJson(value);
+  if (Array.isArray(parsed)) {
+    return parsed;
+  }
+
+  if (typeof value === 'string') {
+    return value
+      .split(',')
+      .map((entry) => entry.trim())
+      .filter(Boolean);
+  }
+
+  return undefined;
+}
+
+function readTagElement(element) {
+  if (!element) {
+    return undefined;
+  }
+
+  if (element.tagName === 'SCRIPT') {
+    const parsed =
+      parseJson(element.textContent || '') ||
+      parseJson(element.getAttribute('data-buyer-intent'));
+    if (parsed && typeof parsed === 'object') {
+      return parsed;
+    }
+  }
+
+  const dataJson = parseJson(element.getAttribute('data-buyer-intent'));
+  if (dataJson && typeof dataJson === 'object') {
+    return dataJson;
+  }
+
+  const dataset = element.dataset || {};
+  return {
+    productIds: parseArray(dataset.productIds),
+    categoryIds: parseArray(dataset.categoryIds),
+    tag: dataset.tag,
+    sourceLocation: dataset.sourceLocation,
+    context: parseJson(dataset.context),
+  };
+}
+
+export function readTags(elements) {
+  if (typeof document === 'undefined') {
+    return [];
+  }
+
+  const found = elements || new Set();
+  const legacy = document.getElementById('buyer-intent-tags');
+  if (legacy) {
+    found.add(legacy);
+  }
+
+  document.querySelectorAll('[data-buyer-intent]').forEach((element) => {
+    found.add(element);
+  });
+
+  return Array.from(found)
+    .map((element) => ({ element, tag: readTagElement(element) }))
+    .filter((entry) => entry.tag && typeof entry.tag === 'object');
+}
+
+export function readElementConfig(element) {
+  if (!element || !element.dataset) {
+    return {};
+  }
+
+  const { origin, userType, distinctId, activityEndpoint } = element.dataset;
+
+  return { origin, userType, distinctId, activityEndpoint };
+}
+
+export function resolveEventName(element, fallback) {
+  if (element && element.dataset && element.dataset.eventName) {
+    return element.dataset.eventName;
+  }
+
+  return fallback;
+}
+
+function parseIds(raw) {
+  if (!raw) return [];
+  try {
+    const parsed = JSON.parse(raw);
+    if (Array.isArray(parsed)) return parsed.map(Number);
+  } catch (_e) {}
+  return raw.split(',').map((s) => Number(s.trim())).filter((n) => !Number.isNaN(n));
+}
+
+export function readSessionConfig(element) {
+  if (!element || typeof element.closest !== 'function') {
+    return {};
+  }
+
+  const session = element.closest('buyer-intent-session');
+  if (!session) {
+    return {};
+  }
+
+  return {
+    origin: session.getAttribute('origin') || undefined,
+    activityEndpoint: session.getAttribute('activity-endpoint') || undefined,
+    userType: session.getAttribute('user-type') || undefined,
+    distinctId: session.getAttribute('distinct-id') || undefined,
+  };
+}
+
+export function collectSubjectIds(viewElement) {
+  if (!viewElement || typeof viewElement.querySelectorAll !== 'function') {
+    return { productIds: [], categoryIds: [] };
+  }
+
+  const subjects = viewElement.querySelectorAll('buyer-intent-subject');
+  const productIds = [];
+  const categoryIds = [];
+
+  for (const subject of subjects) {
+    const pids = subject.getAttribute('product-ids');
+    const pid = subject.getAttribute('product-id');
+    if (pids) {
+      productIds.push(...parseIds(pids));
+    } else if (pid) {
+      productIds.push(Number(pid));
+    }
+
+    const cids = subject.getAttribute('category-ids');
+    const cid = subject.getAttribute('category-id');
+    if (cids) {
+      categoryIds.push(...parseIds(cids));
+    } else if (cid) {
+      categoryIds.push(Number(cid));
+    }
+  }
+
+  return { productIds, categoryIds };
+}
+
+export function readViewContext(clickElement) {
+  if (!clickElement || typeof clickElement.closest !== 'function') {
+    return {};
+  }
+
+  const view = clickElement.closest('buyer-intent-view');
+  if (!view) {
+    return {};
+  }
+
+  const viewData = readTagElement(view) || {};
+  const subjectIds = collectSubjectIds(view);
+
+  const productIds = [
+    ...(viewData.productIds || []),
+    ...subjectIds.productIds,
+  ];
+  const categoryIds = [
+    ...(viewData.categoryIds || []),
+    ...subjectIds.categoryIds,
+  ];
+
+  return {
+    ...viewData,
+    productIds: productIds.length ? [...new Set(productIds)] : undefined,
+    categoryIds: categoryIds.length ? [...new Set(categoryIds)] : undefined,
+  };
+}

package/{browser → src/browser}/elements/base.js

@@ -33,6 +33,11 @@ function readIntentData(element) {
     data.tag = tag;
   }
 
+  const sourceLocation = element.getAttribute('source-location');
+  if (sourceLocation) {
+    data.sourceLocation = sourceLocation;
+  }
+
   const eventName = element.getAttribute('event-name');
   if (eventName) {
     element.dataset.eventName = eventName;
@@ -58,12 +63,28 @@ function defineElement(tagName, ElementClass) {
   }
 }
 
+class BuyerIntentSessionElement extends BaseHTMLElement {
+  connectedCallback() {
+    this.style.display = 'contents';
+  }
+}
+
+class BuyerIntentSubjectElement extends BaseHTMLElement {
+  connectedCallback() {
+    this.style.display = 'none';
+  }
+}
+
 class BuyerIntentViewElement extends BaseHTMLElement {
   connectedCallback() {
     ensureSDK();
     mergeIntentData(this, readIntentData(this));
     this.dataset.trigger = 'view';
-    this.dispatchEvent(new CustomEvent('buyerintent:view', { bubbles: true }));
+    queueMicrotask(() => {
+      this.dispatchEvent(
+        new CustomEvent('buyerintent:view', { bubbles: true })
+      );
+    });
   }
 }
 
@@ -88,10 +109,14 @@ class BuyerIntentClickElement extends BaseHTMLElement {
   }
 }
 
+defineElement('buyer-intent-session', BuyerIntentSessionElement);
+defineElement('buyer-intent-subject', BuyerIntentSubjectElement);
 defineElement('buyer-intent-view', BuyerIntentViewElement);
 defineElement('buyer-intent-click', BuyerIntentClickElement);
 
 export {
+  BuyerIntentSessionElement,
+  BuyerIntentSubjectElement,
   BuyerIntentViewElement,
   BuyerIntentClickElement,
   mergeIntentData,

package/src/browser/elements/index.js

@@ -0,0 +1,6 @@
+export {
+  BuyerIntentSessionElement,
+  BuyerIntentSubjectElement,
+  BuyerIntentViewElement,
+  BuyerIntentClickElement,
+} from './base.js';

package/{browser → src/browser}/index.js

@@ -1,4 +1,6 @@
 export {
+  BuyerIntentSessionElement,
+  BuyerIntentSubjectElement,
   BuyerIntentViewElement,
   BuyerIntentClickElement,
 } from './elements/index.js';

package/{browser → src/browser}/sdk.js

@@ -1,7 +1,14 @@
 import { createBuyerIntentCore } from './core.js';
 import { sendWithBeacon } from './transport.js';
 import { createIdentityManager } from './identity.js';
-import { readTags, readElementConfig, resolveEventName } from './dom.js';
+import {
+  readTags,
+  readElementConfig,
+  resolveEventName,
+  readSessionConfig,
+  collectSubjectIds,
+  readViewContext,
+} from './dom.js';
 
 const DEFAULT_ACTIVITY_ENDPOINT = '/activity/events';
 const DEFAULT_VIEW_NAME = '$view';
@@ -79,23 +86,12 @@ export function createBuyerIntentSDK() {
     return entries.length > 0;
   }
 
-  function trackPageview(element) {
+  function sendPayload(element, defaultEventName) {
     if (typeof window === 'undefined') {
       return false;
     }
 
-    const pageKey = `${window.location.pathname}${window.location.search}`;
-    if (pageKey === lastPageKey) {
-      return false;
-    }
-
-    lastPageKey = pageKey;
-    const hasTags = applyDomTags(element);
-    if (!hasTags) {
-      return false;
-    }
-
-    const eventName = resolveEventName(element, viewName);
+    const eventName = resolveEventName(element, defaultEventName);
     const payload = core.buildPayload({
       name: eventName,
       url: window.location.href,
@@ -110,25 +106,45 @@ export function createBuyerIntentSDK() {
     return sent;
   }
 
+  function trackPageviewInternal(element) {
+    if (typeof window === 'undefined') {
+      return false;
+    }
+
+    const pageKey = `${window.location.pathname}${window.location.search}`;
+    if (pageKey === lastPageKey) {
+      return false;
+    }
+
+    lastPageKey = pageKey;
+    return sendPayload(element, viewName);
+  }
+
+  function trackPageview(element) {
+    if (typeof window === 'undefined') {
+      return false;
+    }
+
+    const pageKey = `${window.location.pathname}${window.location.search}`;
+    if (pageKey === lastPageKey) {
+      return false;
+    }
+
+    lastPageKey = pageKey;
+    const hasTags = applyDomTags(element);
+    if (!hasTags) {
+      return false;
+    }
+
+    return sendPayload(element, viewName);
+  }
+
   function trackClick(element) {
     if (typeof window === 'undefined' || !element) {
       return false;
     }
 
-    applyDomTags(element);
-    const eventName = resolveEventName(element, DEFAULT_CLICK_NAME);
-    const payload = core.buildPayload({
-      name: eventName,
-      url: window.location.href,
-      origin: origin || window.location.hostname,
-      distinctId: identity.ensure(),
-      userType,
-      visit: buildVisitContext(),
-    });
-
-    const sent = sendWithBeacon(activityEndpoint, payload);
-    core.resetPageState();
-    return sent;
+    return sendPayload(element, DEFAULT_CLICK_NAME);
   }
 
   function init(options = {}) {
@@ -196,13 +212,58 @@ export function createBuyerIntentSDK() {
     return () => nextRouter.events.off('routeChangeComplete', handler);
   }
 
+  function resolveConfig(element) {
+    const session = readSessionConfig(element);
+    const own = readElementConfig(element);
+    return {
+      origin: session.origin || own.origin,
+      activityEndpoint: session.activityEndpoint || own.activityEndpoint,
+      userType: session.userType || own.userType,
+      distinctId: session.distinctId || own.distinctId,
+    };
+  }
+
+  function applyConfig(config) {
+    if (config.activityEndpoint) {
+      setActivityEndpoint(config.activityEndpoint);
+    }
+    if (config.origin || config.userType || config.distinctId) {
+      setBaseProperties({
+        origin: config.origin,
+        userType: config.userType,
+        distinctId: config.distinctId,
+      });
+    }
+  }
+
   function handleView(element) {
     if (!element || firedViewElements.has(element)) {
       return false;
     }
 
     firedViewElements.add(element);
-    return trackPageview(element);
+
+    // 1. Resolve config: session ancestor > element's own data-* attrs
+    const config = resolveConfig(element);
+    applyConfig(config);
+
+    // 2. Read page tags from element's data-buyer-intent (existing flow)
+    const entries = readTags(new Set([element]));
+    entries.forEach(({ element: tagElement, tag }) => {
+      if (tagElement !== element) {
+        applyElementConfig(tagElement);
+      }
+      core.tagPage(tag);
+    });
+
+    // 3. Collect IDs from descendant <buyer-intent-subject> elements
+    const subjectIds = collectSubjectIds(element);
+    if (subjectIds.productIds.length || subjectIds.categoryIds.length) {
+      core.tagPage(subjectIds);
+    }
+
+    // 4. Fire pageview
+    return trackPageviewInternal(element, config);
   }
 
   function handleClick(element) {
@@ -210,7 +271,20 @@ export function createBuyerIntentSDK() {
       return false;
     }
 
-    applyElementConfig(element);
+    // 1. Resolve config: session ancestor > element's own data-* attrs
+    const config = resolveConfig(element);
+    applyConfig(config);
+
+    // 2. Inherit tag/IDs from ancestor <buyer-intent-view>
+    const viewCtx = readViewContext(element);
+    if (viewCtx && typeof viewCtx === 'object') {
+      core.tagPage(viewCtx);
+    }
+
+    // 3. Also read click element's own data-buyer-intent
+    const entries = readTags(new Set([element]));
+    entries.forEach(({ tag }) => core.tagPage(tag));
+
     return trackClick(element);
   }
 

package/{index.d.ts → src/index.d.ts}

@@ -1,3 +1,5 @@
+export class BuyerIntentSessionElement extends HTMLElement {}
+export class BuyerIntentSubjectElement extends HTMLElement {}
 export class BuyerIntentViewElement extends HTMLElement {}
 export class BuyerIntentClickElement extends HTMLElement {}
 
@@ -11,10 +13,18 @@ export type ViewTag =
 
 export type ClickEventName = '/ad/clicked' | '/leads/create';
 
+/**
+ * - `guest` — logged-out visitor
+ * - `standard` — logged-in user (default)
+ * - `vendor-admin` — vendor role viewing their own content
+ * - `observer` — internal employee / superuser
+ */
+export type UserType = 'guest' | 'standard' | 'vendor-admin' | 'observer';
+
 interface BuyerIntentBaseAttrs {
   'data-origin'?: string;
   'data-activity-endpoint'?: string;
-  'data-user-type'?: string;
+  'data-user-type'?: UserType;
   'data-distinct-id'?: string;
   'data-buyer-intent'?: string;
   'product-id'?: string;
@@ -22,17 +32,36 @@ interface BuyerIntentBaseAttrs {
   'category-id'?: string;
 }
 
+export interface BuyerIntentSessionAttrs {
+  origin?: string;
+  'activity-endpoint'?: string;
+  'user-type'?: UserType;
+  'distinct-id'?: string;
+}
+
+export interface BuyerIntentSubjectAttrs {
+  'product-id'?: string;
+  'product-ids'?: string;
+  'category-id'?: string;
+  'category-ids'?: string;
+}
+
 export interface BuyerIntentViewAttrs extends BuyerIntentBaseAttrs {
-  tag: ViewTag;
+  tag?: ViewTag | string;
+  'source-location'?: string;
 }
 
 export interface BuyerIntentClickAttrs extends BuyerIntentBaseAttrs {
-  'event-name': ClickEventName;
+  'event-name'?: ClickEventName | string;
 }
 
 declare global {
   namespace JSX {
     interface IntrinsicElements {
+      'buyer-intent-session': BuyerIntentSessionAttrs &
+        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+      'buyer-intent-subject': BuyerIntentSubjectAttrs &
+        React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
       'buyer-intent-view': BuyerIntentViewAttrs &
         React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
       'buyer-intent-click': BuyerIntentClickAttrs &
@@ -46,7 +75,7 @@ export type BuyerIntentInitOptions = {
   origin?: string;
   viewName?: string;
   distinctId?: string;
-  userType?: string;
+  userType?: UserType;
 };
 
 export type BuyerIntentTagOptions = {
@@ -60,7 +89,7 @@ export type BuyerIntentTagOptions = {
 export type BuyerIntentBaseOptions = {
   origin?: string;
   distinctId?: string;
-  userType?: string;
+  userType?: UserType;
 };
 
 export type BuyerIntentVisitProperties = {

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

@@ -1,6 +1,8 @@
 export {
   buyerIntent,
   createBuyerIntentSDK,
+  BuyerIntentSessionElement,
+  BuyerIntentSubjectElement,
   BuyerIntentViewElement,
   BuyerIntentClickElement,
 } from './browser/index.js';

package/{react → src/react}/index.d.ts

@@ -1,15 +1,31 @@
 import type * as React from 'react';
+import type { UserType } from '../index';
 
 type CommonProps = {
   sourceLocation?: string;
   context?: Record<string, unknown>;
   origin?: string;
   activityEndpoint?: string;
-  userType?: string;
+  userType?: UserType;
   distinctId?: string;
   children?: React.ReactNode;
 };
 
+export type SessionProviderProps = {
+  origin?: string;
+  activityEndpoint?: string;
+  userType?: UserType;
+  distinctId?: string;
+  children?: React.ReactNode;
+};
+
+export type SubjectTrackerProps = {
+  productId?: number;
+  categoryId?: number;
+  productIds?: number[];
+  categoryIds?: number[];
+};
+
 export type ViewTrackerProps = CommonProps & {
   tag?: string;
   productId?: number;
@@ -29,6 +45,8 @@ type CategoryViewProps = CommonProps & { categoryId: number };
 type ProductIdsViewProps = CommonProps & { productIds: number[] };
 type ProductIdClickProps = CommonProps & { productId: number };
 
+export const SessionProvider: React.FC<SessionProviderProps>;
+export const SubjectTracker: React.FC<SubjectTrackerProps>;
 export const ViewTracker: React.FC<ViewTrackerProps>;
 export const ClickTracker: React.FC<ClickTrackerProps>;
 
@@ -42,6 +60,10 @@ export const AdClick: React.FC<ProductIdClickProps>;
 export const LeadCreateClick: React.FC<ProductIdClickProps>;
 
 export const BuyerIntent: {
+  Session: React.FC<SessionProviderProps>;
+  Subject: React.FC<SubjectTrackerProps>;
+  View: React.FC<ViewTrackerProps>;
+  Click: React.FC<ClickTrackerProps>;
   ViewTracker: React.FC<ViewTrackerProps>;
   ClickTracker: React.FC<ClickTrackerProps>;
   ProfileView: React.FC<ProductIdViewProps>;

package/{react → src/react}/index.js

@@ -1,5 +1,7 @@
 import '../browser/elements/index.js';
 import {
+  SessionProvider,
+  SubjectTracker,
   ViewTracker,
   ClickTracker,
   ProfileView,
@@ -13,6 +15,8 @@ import {
 } from '../browser/components/index.js';
 
 export {
+  SessionProvider,
+  SubjectTracker,
   ViewTracker,
   ClickTracker,
   ProfileView,
@@ -26,6 +30,10 @@ export {
 };
 
 export const BuyerIntent = {
+  Session: SessionProvider,
+  Subject: SubjectTracker,
+  View: ViewTracker,
+  Click: ClickTracker,
   ViewTracker,
   ClickTracker,
   ProfileView,

package/browser/components/tracker.js

@@ -1,40 +0,0 @@
-import React from 'react';
-
-function buildAttrs({
-  productId,
-  productIds,
-  categoryId,
-  tag,
-  eventName,
-  sourceLocation,
-  context,
-  origin,
-  activityEndpoint,
-  userType,
-  distinctId,
-}) {
-  const payload = { sourceLocation, context };
-  const attrs = {
-    'data-buyer-intent': JSON.stringify(payload),
-    'data-origin': origin,
-    'data-activity-endpoint': activityEndpoint,
-    'data-user-type': userType,
-    'data-distinct-id': distinctId,
-  };
-
-  if (tag) attrs.tag = tag;
-  if (eventName) attrs['event-name'] = eventName;
-  if (productId != null) attrs['product-id'] = String(productId);
-  if (productIds) attrs['product-ids'] = JSON.stringify(productIds);
-  if (categoryId != null) attrs['category-id'] = String(categoryId);
-
-  return attrs;
-}
-
-export function ViewTracker({ children, ...rest }) {
-  return React.createElement('buyer-intent-view', buildAttrs(rest), children);
-}
-
-export function ClickTracker({ children, ...rest }) {
-  return React.createElement('buyer-intent-click', buildAttrs(rest), children);
-}