@segment/analytics-browser-actions-vwo 1.0.0

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@segment/analytics-browser-actions-vwo",
+  "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,43 @@
+import { Subscription } from '@segment/browser-destination-runtime/types'
+import { Analytics, Context } from '@segment/analytics-next'
+import vwoDestination, { destination } from '../index'
+
+const subscriptions: Subscription[] = [
+  {
+    partnerAction: 'trackEvent',
+    name: 'Show',
+    enabled: true,
+    subscribe: 'type = "track"',
+    mapping: {
+      eventName: {
+        '@path': '$.event'
+      },
+      properties: {
+        '@path': '$.properties'
+      }
+    }
+  }
+]
+
+describe('VWO Web (Actions)', () => {
+  test('Loads VWO SmartCode with AccountID', async () => {
+    const [vwo] = await vwoDestination({
+      vwoAccountId: 654331,
+      addSmartcode: true,
+      subscriptions
+    })
+
+    jest.spyOn(destination, 'initialize')
+
+    await vwo.load(Context.system(), {} as Analytics)
+    expect(destination.initialize).toHaveBeenCalled()
+
+    const vwoObject = window.VWO
+    expect(vwoObject).toBeDefined()
+
+    const script = window.document.querySelector(
+      'script[src~="https://dev.visualwebsiteoptimizer.com/j.php?a=654331]'
+    ) as HTMLScriptElement
+    expect(script).toBeDefined()
+  })
+})

package/src/generated-types.ts

@@ -0,0 +1,24 @@
+// Generated file. DO NOT MODIFY IT BY HAND.
+
+export interface Settings {
+  /**
+   * Your VWO account ID, used for fetching your VWO async smart code.
+   */
+  vwoAccountId: number
+  /**
+   * The maximum amount of time (in milliseconds) to wait for test settings before VWO will simply display your original page.
+   */
+  settingsTolerance?: number
+  /**
+   * The maximum amount of time (in milliseconds) to wait for VWO’s full library to be downloaded before simply displaying your original page.
+   */
+  libraryTolerance?: number
+  /**
+   * If your page already includes JQuery, you can set this to “true”. Otherwise, VWO will include JQuery onto the page for you. VWO needs JQuery on the page to function correctly.
+   */
+  useExistingJquery?: boolean
+  /**
+   * When enabled, Segment will load the VWO SmartCode onto the webpage. When disabled, you will have to manually add SmartCode to your webpage. The setting is enabled by default, however we recommended manually adding SmartCode to the webpage to avoid flicker issues.
+   */
+  addSmartcode?: boolean
+}

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

@@ -0,0 +1,63 @@
+import { Analytics, Context } from '@segment/analytics-next'
+import { Subscription } from '@segment/browser-destination-runtime'
+import vwoDestination, { destination } from '../../index'
+
+const subscriptions: Subscription[] = [
+  {
+    partnerAction: 'identifyUser',
+    name: 'Identify User',
+    enabled: true,
+    subscribe: 'type = "identify"',
+    mapping: {
+      attributes: {
+        '@path': '$.traits'
+      }
+    }
+  }
+]
+
+describe('VWO.identifyUser', () => {
+  const settings = {
+    vwoAccountId: 654331
+  }
+
+  let identifyUser: any
+  beforeEach(async () => {
+    jest.restoreAllMocks()
+
+    const [identifyUserPlugin] = await vwoDestination({
+      ...settings,
+      subscriptions
+    })
+    identifyUser = identifyUserPlugin
+
+    jest.spyOn(destination, 'initialize').mockImplementation(() => {
+      window.VWO = {
+        push: jest.fn(),
+        event: jest.fn(),
+        visitor: jest.fn()
+      }
+      return Promise.resolve(window.VWO)
+    })
+    await identifyUser.load(Context.system(), {} as Analytics)
+  })
+
+  test('Visitor call with attributes', async () => {
+    const context = new Context({
+      type: 'identify',
+      traits: {
+        textAttribute: 'Hello'
+      }
+    })
+    await identifyUser.identify?.(context)
+
+    expect(window.VWO.visitor).toHaveBeenCalledWith(
+      {
+        'segment.textAttribute': 'Hello'
+      },
+      {
+        source: 'segment.web'
+      }
+    )
+  })
+})

package/src/identifyUser/generated-types.ts

@@ -0,0 +1,10 @@
+// Generated file. DO NOT MODIFY IT BY HAND.
+
+export interface Payload {
+  /**
+   * JSON object containing additional attributes that will be associated with the user.
+   */
+  attributes: {
+    [k: string]: unknown
+  }
+}

package/src/identifyUser/index.ts

@@ -0,0 +1,40 @@
+import type { BrowserActionDefinition } from '@segment/browser-destination-runtime/types'
+import type { VWO } from '../types'
+import type { Settings } from '../generated-types'
+import type { Payload } from './generated-types'
+import { formatAttributes } from '../utility'
+
+// Change from unknown to the partner SDK types
+const action: BrowserActionDefinition<Settings, VWO, Payload> = {
+  title: 'Identify User',
+  description: `Sends Segment's page event to VWO`,
+  defaultSubscription: 'type = "identify"',
+  platform: 'web',
+  fields: {
+    attributes: {
+      description: 'JSON object containing additional attributes that will be associated with the user.',
+      label: 'Attributes',
+      required: true,
+      type: 'object',
+      default: {
+        '@path': '$.traits'
+      }
+    }
+  },
+  perform: (_, event) => {
+    const { attributes } = event.payload
+    const formattedAttributes = formatAttributes(attributes)
+
+    window.VWO = window.VWO || []
+
+    if (!window.VWO.visitor) {
+      window.VWO.visitor = function (...args) {
+        window.VWO.push(['visitor', ...args])
+      }
+    }
+
+    window.VWO.visitor(formattedAttributes, { source: 'segment.web' })
+  }
+}
+
+export default action

package/src/index.ts

@@ -0,0 +1,93 @@
+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 { VWO } from './types'
+import { initScript } from './init-script'
+import { defaultValues } from '@segment/actions-core'
+
+import trackEvent from './trackEvent'
+import identifyUser from './identifyUser'
+
+declare global {
+  interface Window {
+    VWO: VWO
+  }
+}
+
+// Switch from unknown to the partner SDK client types
+export const destination: BrowserDestinationDefinition<Settings, VWO> = {
+  name: 'VWO Web Mode (Actions)',
+  slug: 'actions-vwo-web',
+  mode: 'device',
+  presets: [
+    {
+      name: 'Track Event',
+      subscribe: 'type = "track"',
+      partnerAction: 'trackEvent',
+      mapping: defaultValues(trackEvent.fields)
+    },
+    {
+      name: 'Identify User',
+      subscribe: 'type = "identify"',
+      partnerAction: 'identifyUser',
+      mapping: defaultValues(identifyUser.fields)
+    }
+  ],
+  settings: {
+    // Add any Segment destination settings required here
+    vwoAccountId: {
+      description: 'Your VWO account ID, used for fetching your VWO async smart code.',
+      label: 'VWO Account ID',
+      type: 'number',
+      required: true
+    },
+    settingsTolerance: {
+      description:
+        'The maximum amount of time (in milliseconds) to wait for test settings before VWO will simply display your original page.',
+      label: 'Settings Tolerance',
+      type: 'number',
+      default: 2000
+    },
+    libraryTolerance: {
+      description:
+        'The maximum amount of time (in milliseconds) to wait for VWO’s full library to be downloaded before simply displaying your original page.',
+      label: 'Library Tolerance',
+      type: 'number',
+      default: 2500
+    },
+    useExistingJquery: {
+      description:
+        'If your page already includes JQuery, you can set this to “true”. Otherwise, VWO will include JQuery onto the page for you. VWO needs JQuery on the page to function correctly. ',
+      label: 'Use Existing JQuery',
+      type: 'boolean',
+      default: false
+    },
+    addSmartcode: {
+      description:
+        'When enabled, Segment will load the VWO SmartCode onto the webpage. When disabled, you will have to manually add SmartCode to your webpage. The setting is enabled by default, however we recommended manually adding SmartCode to the webpage to avoid flicker issues.',
+      label: 'Add Asynchronous SmartCode',
+      type: 'boolean',
+      default: true
+    }
+  },
+
+  initialize: async ({ settings }, deps) => {
+    if (settings.addSmartcode != false) {
+      initScript({
+        vwoAccountId: settings.vwoAccountId,
+        settingsTolerance: settings.settingsTolerance,
+        libraryTolerance: settings.libraryTolerance,
+        useExistingJquery: settings.useExistingJquery
+      })
+    }
+    await deps.resolveWhen(() => Object.prototype.hasOwnProperty.call(window, 'VWO'), 100)
+    return window.VWO
+  },
+
+  actions: {
+    trackEvent,
+    identifyUser
+  }
+}
+
+export default browserDestination(destination)

package/src/init-script.ts

@@ -0,0 +1,81 @@
+/* eslint-disable */
+// @ts-nocheck
+
+export function initScript({
+  vwoAccountId,
+  settingsTolerance = 2000,
+  libraryTolerance = 2500,
+  useExistingJquery = false,
+  isSpa = 1
+}) {
+  window._vwo_code =
+    window._vwo_code ||
+    (function () {
+      var account_id = vwoAccountId,
+        settings_tolerance = settingsTolerance,
+        library_tolerance = libraryTolerance,
+        use_existing_jquery = useExistingJquery,
+        is_spa = isSpa,
+        hide_element = 'body',
+        /* DO NOT EDIT BELOW THIS LINE */
+        f = false,
+        d = document,
+        code = {
+          use_existing_jquery: function () {
+            return use_existing_jquery
+          },
+          library_tolerance: function () {
+            return library_tolerance
+          },
+          finish: function () {
+            if (!f) {
+              f = true
+              var a = d.getElementById('_vis_opt_path_hides')
+              if (a) a.parentNode.removeChild(a)
+            }
+          },
+          finished: function () {
+            return f
+          },
+          load: function (a) {
+            var b = d.createElement('script')
+            b.src = a
+            b.type = 'text/javascript'
+            b.innerText
+            b.onerror = function () {
+              _vwo_code.finish()
+            }
+            d.getElementsByTagName('head')[0].appendChild(b)
+          },
+          init: function () {
+            window.settings_timer = setTimeout(function () {
+              _vwo_code.finish()
+            }, settings_tolerance)
+            var a = d.createElement('style'),
+              b = hide_element
+                ? hide_element + '{opacity:0 !important;filter:alpha(opacity=0) !important;background:none !important;}'
+                : '',
+              h = d.getElementsByTagName('head')[0]
+            a.setAttribute('id', '_vis_opt_path_hides')
+            a.setAttribute('type', 'text/css')
+            if (a.styleSheet) a.styleSheet.cssText = b
+            else a.appendChild(d.createTextNode(b))
+            h.appendChild(a)
+            this.load(
+              'https://dev.visualwebsiteoptimizer.com/j.php?a=' +
+                account_id +
+                '&u=' +
+                encodeURIComponent(d.URL) +
+                '&f=' +
+                +is_spa +
+                '&r=' +
+                Math.random() +
+                '&s=segment.web'
+            )
+            return settings_timer
+          }
+        }
+      window._vwo_settings_timer = code.init()
+      return code
+    })()
+}

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

@@ -0,0 +1,86 @@
+import { Analytics, Context } from '@segment/analytics-next'
+import { Subscription } from '@segment/browser-destination-runtime'
+import vwoDestination, { destination } from '../../index'
+
+const subscriptions: Subscription[] = [
+  {
+    partnerAction: 'trackEvent',
+    name: 'Show',
+    enabled: true,
+    subscribe: 'type = "track"',
+    mapping: {
+      eventName: {
+        '@path': '$.event'
+      },
+      properties: {
+        '@path': '$.properties'
+      }
+    }
+  }
+]
+
+describe('VWO.trackEvent', () => {
+  const settings = {
+    vwoAccountId: 654331
+  }
+
+  let trackEvent: any
+  beforeEach(async () => {
+    jest.restoreAllMocks()
+
+    const [trackEventPlugin] = await vwoDestination({
+      ...settings,
+      subscriptions
+    })
+    trackEvent = trackEventPlugin
+
+    jest.spyOn(destination, 'initialize').mockImplementation(() => {
+      window.VWO = {
+        push: jest.fn(),
+        event: jest.fn(),
+        visitor: jest.fn()
+      }
+      return Promise.resolve(window.VWO)
+    })
+    await trackEvent.load(Context.system(), {} as Analytics)
+  })
+
+  test('Track call without parameters', async () => {
+    const context = new Context({
+      type: 'track',
+      event: 'ctaClick'
+    })
+    await trackEvent.track?.(context)
+
+    expect(window.VWO.event).toHaveBeenCalledWith(
+      'segment.ctaClick',
+      {},
+      {
+        source: 'segment.web',
+        ogName: 'ctaClick'
+      }
+    )
+  })
+
+  test('Track call with parameters', async () => {
+    const context = new Context({
+      type: 'track',
+      event: 'buyButtonClick',
+      properties: {
+        amount: 1000
+      }
+    })
+    await trackEvent.track?.(context)
+
+    expect(window.VWO.event).toHaveBeenCalledWith(
+      'segment.buyButtonClick',
+      {
+        amount: 1000
+      },
+      {
+        source: 'segment.web',
+        ogName: 'buyButtonClick'
+      }
+    )
+  })
+})

package/src/trackEvent/generated-types.ts

@@ -0,0 +1,14 @@
+// Generated file. DO NOT MODIFY IT BY HAND.
+
+export interface Payload {
+  /**
+   * Name of the event.
+   */
+  eventName: string
+  /**
+   * JSON object containing additional properties that will be associated with the event.
+   */
+  properties?: {
+    [k: string]: unknown
+  }
+}

package/src/trackEvent/index.ts

@@ -0,0 +1,52 @@
+import type { BrowserActionDefinition } from '@segment/browser-destination-runtime/types'
+import type { VWO } from '../types'
+import type { Settings } from '../generated-types'
+import type { Payload } from './generated-types'
+import { sanitiseEventName } from '../utility'
+
+// Change from unknown to the partner SDK types
+const action: BrowserActionDefinition<Settings, VWO, Payload> = {
+  title: 'Track Event',
+  description: `Sends Segment's track event to VWO`,
+  platform: 'web',
+  defaultSubscription: 'type = "track"',
+  fields: {
+    eventName: {
+      description: 'Name of the event.',
+      label: 'Name',
+      required: true,
+      type: 'string',
+      default: {
+        '@path': '$.event'
+      }
+    },
+    properties: {
+      description: 'JSON object containing additional properties that will be associated with the event.',
+      label: 'Properties',
+      required: false,
+      type: 'object',
+      default: {
+        '@path': '$.properties'
+      }
+    }
+  },
+  perform: (_, event) => {
+    const { eventName, properties } = event.payload
+    const sanitisedEventName = sanitiseEventName(eventName)
+    const formattedProperties = { ...properties }
+
+    window.VWO = window.VWO || []
+
+    if (!window.VWO.event) {
+      window.VWO.event = function (...args) {
+        window.VWO.push(['event', ...args])
+      }
+    }
+    window.VWO.event(sanitisedEventName, formattedProperties, {
+      source: 'segment.web',
+      ogName: eventName
+    })
+  }
+}
+
+export default action

package/src/types.ts

@@ -0,0 +1,9 @@
+export type VWO = {
+  event: (
+    event: string,
+    properties: { [k: string]: unknown } | undefined,
+    vwoMeta: { [k: string]: unknown } | undefined
+  ) => void
+  visitor: (attributes: { [k: string]: unknown }, vwoMeta: { [k: string]: unknown } | undefined) => void
+  push: (args: (string | { [k: string]: unknown } | undefined)[]) => void
+}

package/src/utility.ts

@@ -0,0 +1,11 @@
+export function formatAttributes(attributes: { [k: string]: unknown }) {
+  const formattedAttributes: { [k: string]: unknown } = {}
+  for (const key in attributes) {
+    formattedAttributes[`segment.${key}`] = attributes[key]
+  }
+  return formattedAttributes
+}
+
+export function sanitiseEventName(name: string) {
+  return 'segment.' + name
+}

package/tsconfig.json

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