feat(DIST-401): Add tracking parameters

Author: Lluis Fons

demo/widget-api.html

@@ -42,6 +42,10 @@
         hideFooter: true,
         hideHeaders: true,
         disableSubmit: true,
+        source: 'example.com',
+        medium: 'embed-sdk',
+        mediumVersion: '0.29.1',
+        embedTrigger_type: 'on_page_load',
         onSubmit: function () {
           alert('my-embedded-typeform-1 has been submitted')
         }

src/core/attributes.js

@@ -35,9 +35,43 @@ const getDataset = element => {
   return data
 }
 
-const sanitizePopupAttributes = data => {
+const sanitizeCommonAttributes = data => {
   const obj = {}
 
+  if (data.hideHeaders === '' || data.hideHeaders === 'true') {
+    obj.hideHeaders = true
+  }
+
+  if (data.hideFooter === '' || data.hideFooter === 'true') {
+    obj.hideFooter = true
+  }
+
+  if (data.hideScrollbars === '' || data.hideScrollbars === 'true') {
+    obj.hideScrollbars = true
+  }
+
+  if (data.source) {
+    obj.source = data.source
+  }
+
+  if (data.medium) {
+    obj.medium = data.medium
+  }
+
+  if (data.mediumVersion) {
+    obj.mediumVersion = data.mediumVersion
+  }
+
+  if (data.embedTriggerType) {
+    obj.embedTriggerType = data.embedTriggerType
+  }
+
+  return obj
+}
+
+const sanitizePopupAttributes = data => {
+  const obj = sanitizeCommonAttributes(data)
+
   if (data.mode) {
     obj.mode = transformLegacyDataMode(data.mode)
   }
@@ -52,18 +86,6 @@ const sanitizePopupAttributes = data => {
     obj.autoOpen = true
   }
 
-  if (data.hideHeaders === '' || data.hideHeaders === 'true') {
-    obj.hideHeaders = true
-  }
-
-  if (data.hideFooter === '' || data.hideFooter === 'true') {
-    obj.hideFooter = true
-  }
-
-  if (data.hideScrollbars === '' || data.hideScrollbars === 'true') {
-    obj.hideScrollbars = true
-  }
-
   if (data.open) {
     obj.open = data.open
     obj.openValue = data.openValue
@@ -89,19 +111,7 @@ const sanitizePopupAttributes = data => {
 }
 
 const sanitizeWidgetAttributes = data => {
-  const obj = {}
-
-  if (data.hideHeaders === '' || data.hideHeaders === 'true') {
-    obj.hideHeaders = true
-  }
-
-  if (data.hideFooter === '' || data.hideFooter === 'true') {
-    obj.hideFooter = true
-  }
-
-  if (data.hideScrollbars === '' || data.hideScrollbars === 'true') {
-    obj.hideScrollbars = true
-  }
+  const obj = sanitizeCommonAttributes(data)
 
   const transparency = parseInt(data.transparency, 10)
   if (data.transparency && transparency >= 0 && transparency <= 100) {

src/core/attributes.spec.js

@@ -17,6 +17,10 @@ describe('Attributes', () => {
       popupMockElem.setAttribute('data-hide-footer', false)
       popupMockElem.setAttribute('data-invalid-attribute', true)
       popupMockElem.setAttribute('data-size', '15')
+      popupMockElem.setAttribute('data-source', 'example.com')
+      popupMockElem.setAttribute('data-medium', 'embed-snippet')
+      popupMockElem.setAttribute('data-medium-version', '0.29.1')
+      popupMockElem.setAttribute('data-embed-trigger-type', 'on_page_load')
 
       const popupOptions = {
         mode: 'popup',
@@ -25,7 +29,11 @@ describe('Attributes', () => {
         open: 'scroll',
         openValue: '20',
         hideHeaders: true,
-        size: 15
+        size: 15,
+        source: 'example.com',
+        medium: 'embed-snippet',
+        mediumVersion: '0.29.1',
+        embedTriggerType: 'on_page_load'
       }
 
       expect(sanitizePopupAttributes(getDataset(popupMockElem))).toEqual(popupOptions)

src/core/make-popup.js

@@ -46,6 +46,7 @@ const buildOptions = (embedId, options) => {
     embedType: POPUP_MODES[options.mode] || POPUP_MODES[POPUP],
     isModalOpen: false,
     autoClose: DEFAULT_AUTOCLOSE_TIMEOUT,
+    medium: 'embed-sdk',
     hideFooter: false,
     hideHeaders: false,
     hideScrollbars: false,
@@ -64,6 +65,10 @@ const buildOptions = (embedId, options) => {
 
 const queryStringKeys = {
   embedType: 'typeform-embed',
+  source: 'typeform-source',
+  medium: 'typeform-medium',
+  mediumVersion: 'typeform-medium-version',
+  embedTriggerType: 'typeform-embed-trigger-type',
   hideFooter: 'embed-hide-footer',
   hideHeaders: 'embed-hide-headers',
   disableTracking: 'disable-tracking'

src/core/make-popup.spec.js

@@ -29,21 +29,34 @@ const instantiatePopup = (options) => {
 }
 
 const renderPopupComponent = (autoOpen = false) => {
-  const options = { hola: true, open: autoOpen ? 'load' : null }
+  const options = {
+    hola: true,
+    open: autoOpen ? 'load' : null,
+    source: 'example.com',
+    medium: 'embed-snippet',
+    mediumVersion: '0.29.1',
+    embedTriggerType: 'on_page_load'
+  }
 
   const popup = instantiatePopup(options)
   if (!autoOpen) popup.open()
   const component = renderMock.mock.calls[0][0]
 
   expect(renderMock).toHaveBeenCalledTimes(1)
   expect(component.type.name).toEqual('Popup')
-  expect(component.props.url).toEqual(`${URL}?typeform-embed=popup-blank`)
+  expect(component.props.url).toEqual(`${URL}?typeform-embed=popup-blank&typeform-source=example.com&typeform-medium=embed-snippet&typeform-medium-version=0.29.1&typeform-embed-trigger-type=on_page_load`)
   expect(component.props.options).toEqual(expect.objectContaining(options))
 }
 
 const renderMobileModalComponent = (autoOpen = false) => {
   const spy = jest.fn()
-  const options = { uid: UID, buttonText: 'hola', open: autoOpen ? 'load' : null, onSubmit: spy }
+  const options = {
+    uid: UID,
+    buttonText: 'hola',
+    open: autoOpen ? 'load' : null,
+    onSubmit: spy,
+    source: 'my-website.com'
+  }
 
   isMobileMock.mockImplementation(() => true)
   renderMock.mockClear()
@@ -54,7 +67,7 @@ const renderMobileModalComponent = (autoOpen = false) => {
 
   expect(renderMock).toHaveBeenCalledTimes(1)
   expect(component.type.name).toEqual('MobileModal')
-  expect(component.props.url).toEqual(`${URL}?typeform-embed=popup-blank`)
+  expect(component.props.url).toEqual(`${URL}?typeform-embed=popup-blank&typeform-source=my-website.com&typeform-medium=embed-sdk`)
   expect(component.props.buttonText).toEqual(options.buttonText)
 
   component.props.onSubmit()

src/core/make-widget.js

@@ -21,6 +21,7 @@ const defaultOptions = {
   mode: 'embed-widget',
   hideFooter: false,
   hideHeaders: false,
+  medium: 'embed-sdk',
   hideScrollbars: false,
   disableTracking: false,
   transferableUrlParameters: [],
@@ -30,6 +31,10 @@ const defaultOptions = {
 
 const queryStringKeys = {
   mode: 'typeform-embed',
+  source: 'typeform-source',
+  medium: 'typeform-medium',
+  mediumVersion: 'typeform-medium-version',
+  embedTriggerType: 'typeform-embed-trigger-type',
   hideFooter: 'embed-hide-footer',
   hideHeaders: 'embed-hide-headers',
   opacity: 'embed-opacity',

src/core/make-widget.spec.js

@@ -20,7 +20,13 @@ randomString.mockImplementation(() => EMBED_ID)
 describe('makeWidget', () => {
   it('renders a Widget component on desktop devices', () => {
     const element = document.createElement('div')
-    const options = { opacity: 5, mandarina: 2 }
+    const options = {
+      opacity: 5,
+      mandarina: 2,
+      source: 'website.com',
+      medium: 'embed-wordpress',
+      mediumVersion: '9999'
+    }
 
     isMobileMock.mockImplementationOnce(() => false)
     renderMock.mockClear()
@@ -35,7 +41,9 @@ describe('makeWidget', () => {
     const { query } = UrlParse(widgetURL, true)
     expect(query['embed-opacity']).toEqual('5')
     expect(query['mandarina']).toBeUndefined()
-
+    expect(query['typeform-source']).toEqual('website.com')
+    expect(query['typeform-medium']).toEqual('embed-wordpress')
+    expect(query['typeform-medium-version']).toEqual('9999')
     expect(component.type.name).toEqual('Widget')
     expect(component.props.options).toEqual(expect.objectContaining(options))
   })