@segment/analytics-browser-actions-wiseops 1.0.0

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@segment/analytics-browser-actions-wiseops",
+  "version": "1.0.0",
+  "license": "MIT",
+  "main": "./dist/cjs",
+  "module": "./dist/esm",
+  "scripts": {
+    "build": "yarn build:esm && yarn build:cjs",
+    "build:cjs": "tsc --module commonjs --outDir ./dist/cjs",
+    "build:esm": "tsc --outDir ./dist/esm"
+  },
+  "typings": "./dist/esm",
+  "dependencies": {
+    "@segment/actions-core": "^3.71.0",
+    "@segment/browser-destination-runtime": "^1.0.0"
+  },
+  "peerDependencies": {
+    "@segment/analytics-next": "*"
+  }
+}

package/src/__tests__/index.test.ts

@@ -0,0 +1,48 @@
+import { Analytics, Context } from '@segment/analytics-next'
+import wisepopsDestination, { destination } from '../index'
+import { Subscription } from '@segment/browser-destination-runtime/types'
+import nock from 'nock'
+
+const subscriptions: Subscription[] = [
+  {
+    partnerAction: 'trackPage',
+    name: 'Track Page',
+    enabled: true,
+    subscribe: 'type = "page"',
+    mapping: {}
+  }
+]
+
+describe('Wisepops', () => {
+  test('initialize Wisepops with a website hash', async () => {
+    const startTime = Date.now();
+    jest.spyOn(destination, 'initialize')
+    nock('https://loader.wisepops.com').get('/get-loader.js?plugin=segment&v=1&site=1234567890').reply(200, {})
+
+    const [event] = await wisepopsDestination({
+      websiteId: '1234567890',
+      subscriptions
+    })
+
+    await event.load(Context.system(), {} as Analytics)
+    expect(destination.initialize).toHaveBeenCalled()
+
+    expect(window.wisepops.q).toEqual([['options', {autoPageview: false}]]);
+    expect(window.wisepops.l).toBeGreaterThanOrEqual(startTime);
+    expect(window.wisepops.l).toBeLessThanOrEqual(Date.now());
+
+    const scripts = window.document.querySelectorAll('script')
+    expect(scripts).toMatchInlineSnapshot(`
+      NodeList [
+        <script
+          src="https://loader.wisepops.com/get-loader.js?plugin=segment&v=1&site=1234567890"
+          status="loading"
+          type="text/javascript"
+        />,
+        <script>
+          // the emptiness
+        </script>,
+      ]
+    `)
+  })
+})

package/src/generated-types.ts

@@ -0,0 +1,8 @@
+// Generated file. DO NOT MODIFY IT BY HAND.
+
+export interface Settings {
+  /**
+   * The identifier of your Wisepops' website. You can find it in [your setup code on Wisepops](https://app.wisepops.com/f/settings/websites).
+   */
+  websiteId: string
+}

package/src/index.ts

@@ -0,0 +1,95 @@
+import type { Settings } from './generated-types'
+import type { BrowserDestinationDefinition } from '@segment/browser-destination-runtime/types'
+import { browserDestination } from '@segment/browser-destination-runtime/shim'
+import type { Wisepops } from './types'
+
+import { defaultValues } from '@segment/actions-core'
+
+import setCustomProperties from './setCustomProperties'
+import trackEvent from './trackEvent'
+import trackGoal from './trackGoal'
+import trackPage from './trackPage'
+
+declare global {
+  interface Window {
+    wisepops: Wisepops
+    WisePopsObject: string
+  }
+}
+
+export const destination: BrowserDestinationDefinition<Settings, Wisepops> = {
+  name: 'Wisepops',
+  slug: 'actions-wisepops',
+  mode: 'device',
+
+  presets: [
+    {
+      name: 'Set User Traits as Custom Properties',
+      subscribe: setCustomProperties.defaultSubscription!,
+      partnerAction: 'setCustomProperties',
+      mapping: defaultValues(setCustomProperties.fields)
+    },
+    {
+      name: 'Set Group Traits as Custom Properties',
+      subscribe: 'type = "group"',
+      partnerAction: 'setCustomProperties',
+      mapping: {
+        traits: { '@path': '$.traits' },
+        id: { '@path': '$.groupId' },
+        idProperty: 'groupId',
+        prefix: 'group',
+      }
+    },
+    {
+      name: trackEvent.title,
+      subscribe: trackEvent.defaultSubscription!,
+      partnerAction: 'trackEvent',
+      mapping: defaultValues(trackEvent.fields)
+    },
+    {
+      name: trackGoal.title,
+      subscribe: trackGoal.defaultSubscription!,
+      partnerAction: 'trackGoal',
+      mapping: defaultValues(trackGoal.fields)
+    },
+    {
+      name: trackPage.title,
+      subscribe: trackPage.defaultSubscription!,
+      partnerAction: 'trackPage',
+      mapping: defaultValues(trackPage.fields)
+    }
+  ],
+
+  settings: {
+    websiteId: {
+      description:
+        "The identifier of your Wisepops' website. You can find it in [your setup code on Wisepops](https://app.wisepops.com/f/settings/websites).",
+      label: 'Website Identifier',
+      type: 'string',
+      required: true
+    }
+  },
+
+  initialize: async ({ settings }, deps) => {
+    window.WisePopsObject = 'wisepops'
+    window.wisepops =
+      window.wisepops ||
+      function (...arg) {
+        ;(window.wisepops.q = window.wisepops.q || []).push(arg)
+      }
+    window.wisepops.l = Date.now()
+    window.wisepops('options', { autoPageview: false })
+    // Can load asynchronously, no need to wait
+    void deps.loadScript(`https://loader.wisepops.com/get-loader.js?plugin=segment&v=1&site=${settings.websiteId}`)
+    return window.wisepops
+  },
+
+  actions: {
+    setCustomProperties,
+    trackEvent,
+    trackGoal,
+    trackPage,
+  }
+}
+
+export default browserDestination(destination)

package/src/setCustomProperties/__tests__/index.test.ts

@@ -0,0 +1,163 @@
+import { Analytics, Context } from '@segment/analytics-next'
+import setCustomPropertiesObject from '../index'
+import wisepopsDestination from '../../index'
+import { Subscription } from '@segment/browser-destination-runtime/types'
+
+import { loadScript } from '@segment/browser-destination-runtime/load-script'
+jest.mock('@segment/browser-destination-runtime/load-script')
+beforeEach(async () => {
+  // Prevent Wisepops SDK from being loaded.
+  ;(loadScript as jest.Mock).mockResolvedValue(true)
+})
+
+describe('Wisepops.setCustomProperties', () => {
+  test('custom properties', async () => {
+    const subscriptions: Subscription[] = [
+      {
+        partnerAction: 'setCustomProperties',
+        name: setCustomPropertiesObject.title,
+        enabled: true,
+        subscribe: setCustomPropertiesObject.defaultSubscription!,
+        mapping: {
+          traits: {
+            '@path': '$.traits'
+          },
+          id: {
+            '@path': '$.userId'
+          },
+          idProperty: 'userId',
+        }
+      }
+    ]
+
+    const [setCustomProperties] = await wisepopsDestination({
+      websiteId: '1234567890',
+      subscriptions
+    })
+
+    expect(setCustomProperties).toBeDefined()
+
+    await setCustomProperties.load(Context.system(), {} as Analytics)
+    jest.spyOn(window.wisepops.q as any, 'push')
+
+    {
+      const context = new Context({
+        type: 'identify',
+        traits: {
+          firstName: 'John',
+        }
+      });
+
+      setCustomProperties.identify?.(context)
+
+      expect(window.wisepops.q.push).toHaveBeenCalledWith(['properties', {
+        firstName: 'John',
+      }])
+    }
+
+    {
+      const context = new Context({
+        type: 'identify',
+        userId: '42',
+        traits: {
+          email: 'test@example.com',
+          firstName: 'John',
+          address: {
+            city: 'Paris',
+            country: 'France'
+          }
+        }
+      });
+
+      setCustomProperties.identify?.(context)
+
+      expect(window.wisepops.q.push).toHaveBeenCalledWith(['properties', {
+        userId: '42',
+        email: 'test@example.com',
+        firstName: 'John',
+        address: {
+          city: 'Paris',
+          country: 'France'
+        }
+      }])
+    }
+  })
+
+  test('nested custom properties', async () => {
+    const subscriptions: Subscription[] = [
+      {
+        partnerAction: 'setCustomProperties',
+        name: setCustomPropertiesObject.title,
+        enabled: true,
+        subscribe: setCustomPropertiesObject.defaultSubscription!,
+        mapping: {
+          traits: {
+            '@path': '$.traits'
+          },
+          prefix: 'user',
+          id: {
+            '@path': '$.userId'
+          },
+          idProperty: 'userId',
+        }
+      }
+    ]
+
+    const [setCustomProperties] = await wisepopsDestination({
+      websiteId: '1234567890',
+      subscriptions
+    })
+
+    expect(setCustomProperties).toBeDefined()
+
+    await setCustomProperties.load(Context.system(), {} as Analytics)
+    jest.spyOn(window.wisepops.q as any, 'push')
+
+    {
+      const context = new Context({
+        type: 'identify',
+        traits: {
+          firstName: 'John',
+        }
+      });
+
+      setCustomProperties.identify?.(context)
+
+      expect(window.wisepops.q.push).toHaveBeenCalledWith(['properties', {
+        user: {
+          firstName: 'John',
+        }
+      }])
+    }
+
+    {
+      const context = new Context({
+        type: 'identify',
+        userId: '42',
+        traits: {
+          email: 'test@example.com',
+          firstName: 'John',
+          address: {
+            city: 'Paris',
+            country: 'France'
+          }
+        }
+      });
+
+      setCustomProperties.identify?.(context)
+
+      expect(window.wisepops.q.push).toHaveBeenCalledWith(['properties', {
+        user: {
+          userId: '42',
+          email: 'test@example.com',
+          firstName: 'John',
+          address: {
+            city: 'Paris',
+            country: 'France'
+          }
+        }
+      }])
+    }
+
+  })
+})

package/src/setCustomProperties/generated-types.ts

@@ -0,0 +1,22 @@
+// Generated file. DO NOT MODIFY IT BY HAND.
+
+export interface Payload {
+  /**
+   * The custom properties to send to Wisepops.
+   */
+  traits: {
+    [k: string]: unknown
+  }
+  /**
+   * A unique identifier. Typically, a user ID or group ID.
+   */
+  id?: string
+  /**
+   * How to name the entity ID among the other custom properties?
+   */
+  idProperty?: string
+  /**
+   * This lets you define the properties as a nested object. If you set the property `"name"` with the prefix `"group"`, you'll access it in Wisepops as `"group.name"`.
+   */
+  prefix?: string
+}

package/src/setCustomProperties/index.ts

@@ -0,0 +1,58 @@
+import type { BrowserActionDefinition } from '@segment/browser-destination-runtime/types'
+import type { Settings } from '../generated-types'
+import type { Payload } from './generated-types'
+import type { Wisepops } from '../types'
+
+const action: BrowserActionDefinition<Settings, Wisepops, Payload> = {
+  title: 'Set Custom Properties',
+  description: 'Define [custom properties](https://support.wisepops.com/article/yrdyv1tfih-set-up-custom-properties) to let Wisepops target them in your scenarios.',
+  defaultSubscription: 'type = "identify"',
+  platform: 'web',
+  fields: {
+    traits: {
+      description: "The custom properties to send to Wisepops.",
+      label: 'Custom Properties',
+      type: 'object',
+      required: true,
+      default: {
+        '@path': '$.traits'
+      }
+    },
+    id: {
+      description: 'A unique identifier. Typically, a user ID or group ID.',
+      label: 'Entity ID',
+      type: 'string',
+      required: false,
+      default: {
+        '@path': '$.userId'
+      }
+    },
+    idProperty: {
+      description: 'How to name the entity ID among the other custom properties?',
+      label: 'Property name for the entity ID',
+      type: 'string',
+      required: false,
+      default: 'userId'
+    },
+    prefix: {
+      description: 'This lets you define the properties as a nested object. If you set the property `"name"` with the prefix `"group"`, you\'ll access it in Wisepops as `"group.name"`.',
+      label: 'Prefix',
+      type: 'string',
+      required: false,
+    },
+  },
+  perform: (wisepops, event) => {
+    let properties = event.payload.traits;
+    if (event.payload.idProperty && event.payload.id) {
+      properties[event.payload.idProperty] = event.payload.id;
+    }
+    if (event.payload.prefix) {
+      properties = {
+        [event.payload.prefix]: properties
+      };
+    }
+    wisepops('properties', properties);
+  }
+}
+
+export default action

package/src/trackEvent/__tests__/index.test.ts

@@ -0,0 +1,50 @@
+import { Analytics, Context } from '@segment/analytics-next'
+import trackEventObject from '../index'
+import wisepopsDestination from '../../index'
+import { Subscription } from '@segment/browser-destination-runtime/types'
+
+import { loadScript } from '@segment/browser-destination-runtime/load-script'
+jest.mock('@segment/browser-destination-runtime/load-script')
+beforeEach(async () => {
+  // Prevent Wisepops SDK from being loaded.
+  ;(loadScript as jest.Mock).mockResolvedValue(true)
+})
+
+describe('Wisepops.trackEvent', () => {
+  const subscriptions: Subscription[] = [
+    {
+      partnerAction: 'trackEvent',
+      name: trackEventObject.title,
+      enabled: true,
+      subscribe: 'type = "track"',
+      mapping: {
+        eventName: {
+          '@path': '$.event'
+        }
+      }
+    }
+  ]
+
+  test('custom event', async () => {
+    const [trackEvent] = await wisepopsDestination({
+      websiteId: '1234567890',
+      subscriptions
+    })
+
+    expect(trackEvent).toBeDefined()
+
+    await trackEvent.load(Context.system(), {} as Analytics)
+    jest.spyOn(window.wisepops.q as any, 'push')
+
+    const context = new Context({
+      type: 'track',
+      event: 'Something happens',
+      properties: {
+        eventParam: 'An event parameter'
+      }
+    })
+    trackEvent.track?.(context)
+
+    expect(window.wisepops.q.push).toHaveBeenCalledWith(['event', 'Something happens'])
+  })
+})

package/src/trackEvent/generated-types.ts

@@ -0,0 +1,8 @@
+// Generated file. DO NOT MODIFY IT BY HAND.
+
+export interface Payload {
+  /**
+   * The name of the event to send to Wisepops.
+   */
+  eventName: string
+}

package/src/trackEvent/index.ts

@@ -0,0 +1,27 @@
+import type { BrowserActionDefinition } from '@segment/browser-destination-runtime/types'
+import type { Settings } from '../generated-types'
+import type { Payload } from './generated-types'
+import type { Wisepops } from '../types';
+
+const action: BrowserActionDefinition<Settings, Wisepops, Payload> = {
+  title: 'Track Event',
+  description: "Send a [custom event](https://support.wisepops.com/article/zbpq1z0exk-set-up-custom-events-to-trigger-popups) to Wisepops. Keep in mind that events are counted as page views in your Wisepops' monthly quota.",
+  defaultSubscription: 'type = "track"',
+  platform: 'web',
+  fields: {
+    eventName: {
+      description: 'The name of the event to send to Wisepops.',
+      label: 'Event Name',
+      type: 'string',
+      required: true,
+      default: {
+        '@path': '$.event'
+      }
+    },
+  },
+  perform: (wisepops, event) => {
+    wisepops('event', event.payload.eventName);
+  }
+}
+
+export default action

package/src/trackGoal/__tests__/index.test.ts

@@ -0,0 +1,52 @@
+import { Analytics, Context } from '@segment/analytics-next'
+import trackGoalObject from '../index'
+import wisepopsDestination from '../../index'
+import { Subscription } from '@segment/browser-destination-runtime/types'
+
+import { loadScript } from '@segment/browser-destination-runtime/load-script'
+jest.mock('@segment/browser-destination-runtime/load-script')
+beforeEach(async () => {
+  // Prevent Wisepops SDK from being loaded.
+  ;(loadScript as jest.Mock).mockResolvedValue(true)
+})
+
+describe('Wisepops.trackGoal', () => {
+  const subscriptions: Subscription[] = [
+    {
+      partnerAction: 'trackGoal',
+      name: trackGoalObject.title,
+      enabled: true,
+      subscribe: trackGoalObject.defaultSubscription!,
+      mapping: {
+        goalName: {
+          '@path': '$.event'
+        },
+        goalRevenue: {
+          '@path': '$.properties.revenue'
+        },
+      }
+    }
+  ]
+
+  test('named goal with revenue', async () => {
+    const [trackGoal] = await wisepopsDestination({
+      websiteId: '1234567890',
+      subscriptions
+    })
+    expect(trackGoal).toBeDefined()
+
+    await trackGoal.load(Context.system(), {} as Analytics)
+    jest.spyOn(window.wisepops.q as any, 'push')
+
+    const context = new Context({
+      type: 'track',
+      event: 'Order Completed',
+      properties: {
+        revenue: 15
+      }
+    })
+    trackGoal.track?.(context)
+
+    expect(window.wisepops.q.push).toHaveBeenCalledWith(['goal', 'Order Completed', 15])
+  })
+})

package/src/trackGoal/generated-types.ts

@@ -0,0 +1,12 @@
+// Generated file. DO NOT MODIFY IT BY HAND.
+
+export interface Payload {
+  /**
+   * The name of the goal to send to Wisepops.
+   */
+  goalName?: string
+  /**
+   * The revenue associated with the goal.
+   */
+  goalRevenue?: string
+}

package/src/trackGoal/index.ts

@@ -0,0 +1,37 @@
+import type { BrowserActionDefinition } from '@segment/browser-destination-runtime/types'
+import type { Settings } from '../generated-types'
+import type { Payload } from './generated-types'
+import type { Wisepops } from '../types'
+
+// Change from unknown to the partner SDK types
+const action: BrowserActionDefinition<Settings, Wisepops, Payload> = {
+  title: 'Track Goal',
+  description: '[Track goals and revenue](https://support.wisepops.com/article/mx3z8na6yb-set-up-goal-tracking) to know which campaigns are generating the most value.',
+  defaultSubscription: 'type = "track" and event = "Order Completed"',
+  platform: 'web',
+  fields: {
+    goalName: {
+      description: 'The name of the goal to send to Wisepops.',
+      label: 'Goal Name',
+      type: 'string',
+      required: false,
+      default: {
+        '@path': '$.event'
+      }
+    },
+    goalRevenue: {
+      description: 'The revenue associated with the goal.',
+      label: 'Goal Revenue',
+      type: 'string',
+      required: false,
+      default: {
+        '@path': '$.properties.revenue'
+      }
+    },
+  },
+  perform: (wisepops, event) => {
+    wisepops('goal', event.payload.goalName, event.payload.goalRevenue);
+  }
+}
+
+export default action

package/src/trackPage/__tests__/index.test.ts

@@ -0,0 +1,40 @@
+import { Analytics, Context } from '@segment/analytics-next'
+import trackPageObject from '../index'
+import wisepopsDestination from '../../index'
+import { Subscription } from '@segment/browser-destination-runtime/types'
+
+import { loadScript } from '@segment/browser-destination-runtime/load-script'
+jest.mock('@segment/browser-destination-runtime/load-script')
+beforeEach(async () => {
+  // Prevent Wisepops SDK from being loaded.
+  ;(loadScript as jest.Mock).mockResolvedValue(true)
+})
+
+describe('Wisepops.trackPage', () => {
+  const subscriptions: Subscription[] = [
+    {
+      partnerAction: 'trackPage',
+      name: trackPageObject.title,
+      enabled: true,
+      subscribe: trackPageObject.defaultSubscription!,
+      mapping: {}
+    }
+  ]
+
+  test('pageview', async () => {
+    const [trackPage] = await wisepopsDestination({
+      websiteId: '1234567890',
+      subscriptions
+    })
+
+    expect(trackPage).toBeDefined()
+
+    await trackPage.load(Context.system(), {} as Analytics)
+    jest.spyOn(window.wisepops.q as any, 'push')
+
+    const context = new Context({type: 'page'})
+    trackPage.page?.(context)
+
+    expect(window.wisepops.q.push).toHaveBeenCalledWith(['pageview'])
+  })
+})

package/src/trackPage/generated-types.ts

@@ -0,0 +1,3 @@
+// Generated file. DO NOT MODIFY IT BY HAND.
+
+export interface Payload {}

package/src/trackPage/index.ts

@@ -0,0 +1,17 @@
+import type { BrowserActionDefinition } from '@segment/browser-destination-runtime/types'
+import type { Settings } from '../generated-types'
+import type { Payload } from './generated-types'
+import type { Wisepops } from '../types';
+
+const action: BrowserActionDefinition<Settings, Wisepops, Payload> = {
+  title: 'Track Page',
+  description: 'Let Wisepops know when the visitor goes to a new page. This allows Wisepops to display campaigns at page change.',
+  defaultSubscription: 'type = "page"',
+  platform: 'web',
+  fields: {},
+  perform: (wisepops) => {
+    wisepops('pageview');
+  }
+}
+
+export default action

package/src/types.ts

@@ -0,0 +1,10 @@
+type method = 'event' | 'goal' | 'options' | 'pageview' | 'properties'
+
+type WisepopsFunction = (method: method, parameters?: unknown, options?: unknown) => void;
+
+type WisepopsInternal = {
+  q: unknown[],
+  l: number
+}
+
+export type Wisepops = WisepopsFunction & WisepopsInternal;

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "baseUrl": "."
+  },
+  "include": ["src"],
+  "exclude": ["dist", "**/__tests__"]
+}