Merge pull request #110 from Typeform/dist401

feat(DIST-401): Add tracking parameters
Typeform · Dec 3, 2020 · 182ef51 · 182ef51
2 parents 168ac79 + ae03cc6
commit 182ef51
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -93,6 +93,10 @@ typeformEmbed.makeWidget(element, url, options)
   | onReady         | Callback function that will be executed once the typeform is ready.                                                                                            | `Function` | -       |
   | onScreenChanged | Callback function that will be executed once the typeform's active screen changes.                                                                             | `Function` | -       |
   | transferableUrlParameters | Parameters that we want to transfert from the URL to the Typeform as hidden fields | `Array`   | [] |
+  | source | Domain name of the site using the SDK | `String`   | null |
+  | medium | Name of the plugin built on top of the SDK | `String`   | null |
+  | mediumVersion | Version of the plugin built on top of the SDK | `String`   | null |
+
   #### Example:
 
   ```js
@@ -147,6 +151,9 @@ typeformEmbed.makePopup(url, options)
   | onClose        | Callback function that will be executed once the typeform is closed.                                                                                           | `Function`                                                                    | -       |
   | container      | Element to place the popup into. Optional. Required only for `"side_panel"` mode.                                                                              | `DOM element`                                                                 | -       |
   | transferableUrlParameters     | Parameters that we want to transfert from the URL to the Typeform as hidden fields | `Array`   | [] |
+  | source | Domain name of the site using the SDK | `String`   | null |
+  | medium | Name of the plugin built on top of the SDK | `String`   | null |
+  | mediumVersion | Version of the plugin built on top of the SDK | `String`   | null |
 
 Types:
 

diff --git a/demo/widget-api.html b/demo/widget-api.html
@@ -41,7 +41,10 @@
       window.typeformEmbed.makeWidget(el1, '//betatests.typeform.com/to/Z9k3bK', {
         hideFooter: true,
         hideHeaders: true,
-        disableSubmit: true,
+        disableSubmit: true,        
+        medium: 'embed-sdk',
+        mediumVersion: '0.29.1',
+        embedTrigger_type: 'on_page_load',
         onSubmit: function () {
           alert('my-embedded-typeform-1 has been submitted')
         }

diff --git a/src/core/attributes.js b/src/core/attributes.js
@@ -35,9 +35,39 @@ 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
+  }
+
+  return obj
+}
+
+const sanitizePopupAttributes = data => {
+  const obj = sanitizeCommonAttributes(data)
+
   if (data.mode) {
     obj.mode = transformLegacyDataMode(data.mode)
   }
@@ -52,18 +82,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 +107,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) {

diff --git a/src/core/attributes.spec.js b/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,10 @@ describe('Attributes', () => {
         open: 'scroll',
         openValue: '20',
         hideHeaders: true,
-        size: 15
+        size: 15,
+        source: 'example.com',
+        medium: 'embed-snippet',
+        mediumVersion: '0.29.1'
       }
 
       expect(sanitizePopupAttributes(getDataset(popupMockElem))).toEqual(popupOptions)

diff --git a/src/core/make-popup.js b/src/core/make-popup.js
@@ -46,6 +46,8 @@ const buildOptions = (embedId, options) => {
     embedType: POPUP_MODES[options.mode] || POPUP_MODES[POPUP],
     isModalOpen: false,
     autoClose: DEFAULT_AUTOCLOSE_TIMEOUT,
+    medium: 'embed-sdk',
+    source: window?.location?.hostname,
     hideFooter: false,
     hideHeaders: false,
     hideScrollbars: false,
@@ -64,6 +66,10 @@ const buildOptions = (embedId, options) => {
 
 const queryStringKeys = {
   embedType: 'typeform-embed',
+  source: 'typeform-source',
+  medium: 'typeform-medium',
+  mediumVersion: 'typeform-medium-version',
+  open: 'typeform-embed-trigger-type',
   hideFooter: 'embed-hide-footer',
   hideHeaders: 'embed-hide-headers',
   disableTracking: 'disable-tracking'

diff --git a/src/core/make-popup.spec.js b/src/core/make-popup.spec.js
@@ -29,32 +29,46 @@ 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'
+  }
 
   const popup = instantiatePopup(options)
+  const embedTriggerType = autoOpen ? '&typeform-embed-trigger-type=load' : ''
   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${embedTriggerType}`)
   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()
 
   const popup = makePopup(URL, options)
+  const embedTriggerType = autoOpen ? '&typeform-embed-trigger-type=load' : ''
   if (!autoOpen) popup.open()
   const component = renderMock.mock.calls[0][0]
 
   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${embedTriggerType}`)
   expect(component.props.buttonText).toEqual(options.buttonText)
 
   component.props.onSubmit()

diff --git a/src/core/make-widget.js b/src/core/make-widget.js
@@ -21,6 +21,8 @@ const defaultOptions = {
   mode: 'embed-widget',
   hideFooter: false,
   hideHeaders: false,
+  medium: 'embed-sdk',
+  source: window?.location?.hostname,
   hideScrollbars: false,
   disableTracking: false,
   transferableUrlParameters: [],
@@ -30,6 +32,9 @@ const defaultOptions = {
 
 const queryStringKeys = {
   mode: 'typeform-embed',
+  source: 'typeform-source',
+  medium: 'typeform-medium',
+  mediumVersion: 'typeform-medium-version',
   hideFooter: 'embed-hide-footer',
   hideHeaders: 'embed-hide-headers',
   opacity: 'embed-opacity',

diff --git a/src/core/make-widget.spec.js b/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))
   })