feat(web-analytics): Add property for autocapture link click (#1259)

* Add property for autocapture link click * Only capture external urls * Add tests * Add a test * Rename property * Update src/__tests__/autocapture.test.ts Co-authored-by: Marius Andra <marius.andra@gmail.com> --------- Co-authored-by: Marius Andra <marius.andra@gmail.com>
PostHog · Jun 21, 2024 · 62c5181 · 62c5181
1 parent 004351a
commit 62c5181
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 1 deletion.
diff --git a/playground/nextjs/pages/index.tsx b/playground/nextjs/pages/index.tsx
@@ -36,6 +36,7 @@ export default function Home() {
                 <a className="Button" data-attr="autocapture-button" href="#">
                     <span>Autocapture a &gt; span</span>
                 </a>
+                <a href={'https://www.google.com'}>External link</a>
 
                 <button className="ph-no-capture">Ignore certain elements</button>
 

diff --git a/src/__tests__/autocapture.test.ts b/src/__tests__/autocapture.test.ts
@@ -557,6 +557,7 @@ describe('Autocapture system', () => {
             expect(props['$elements'][1]).toHaveProperty('tag_name', 'span')
             expect(props['$elements'][2]).toHaveProperty('tag_name', 'div')
             expect(props['$elements'][props['$elements'].length - 1]).toHaveProperty('tag_name', 'body')
+            expect(props['$external_click_url']).toEqual('https://test.com')
         })
 
         it('truncate any element property value to 1024 bytes', () => {
@@ -594,7 +595,27 @@ describe('Autocapture system', () => {
                     target: elTarget,
                 })
             )
-            expect(captureMock.mock.calls[0][1]['$elements'][0]).toHaveProperty('attr__href', 'https://test.com')
+            const props = captureMock.mock.calls[0][1]
+            expect(props['$elements'][0]).toHaveProperty('attr__href', 'https://test.com')
+            expect(props['$external_click_url']).toEqual('https://test.com')
+        })
+
+        it('does not include $click_external_href for same site', () => {
+            window!.location = new URL('https://www.example.com/location') as unknown as Location
+            const elTarget = document.createElement('img')
+            const elParent = document.createElement('span')
+            elParent.appendChild(elTarget)
+            const elGrandparent = document.createElement('a')
+            elGrandparent.setAttribute('href', 'https://www.example.com/link')
+            elGrandparent.appendChild(elParent)
+            autocapture['_captureEvent'](
+                makeMouseEvent({
+                    target: elTarget,
+                })
+            )
+            const props = captureMock.mock.calls[0][1]
+            expect(props['$elements'][0]).toHaveProperty('attr__href', 'https://www.example.com/link')
+            expect(props['$external_click_url']).toBeUndefined()
         })
 
         it('does not capture href attribute values from password elements', () => {

diff --git a/src/autocapture.ts b/src/autocapture.ts
@@ -25,6 +25,7 @@ import { AUTOCAPTURE_DISABLED_SERVER_SIDE } from './constants'
 import { isBoolean, isFunction, isNull, isObject, isUndefined } from './utils/type-utils'
 import { logger } from './utils/logger'
 import { document, window } from './utils/globals'
+import { convertToURL } from './utils/request-utils'
 
 const COPY_AUTOCAPTURE_EVENT = '$copy_autocapture'
 
@@ -322,8 +323,14 @@ export class Autocapture {
                 }
             }
 
+            let externalHref: string | undefined
             if (href) {
                 elementsJson[0]['attr__href'] = href
+                const hrefHost = convertToURL(href)?.host
+                const locationHost = window?.location?.host
+                if (hrefHost && locationHost && hrefHost !== locationHost) {
+                    externalHref = href
+                }
             }
 
             if (explicitNoCapture) {
@@ -340,6 +347,7 @@ export class Autocapture {
                           $elements: elementsJson,
                       },
                 elementsJson[0]?.['$el_text'] ? { $el_text: elementsJson[0]?.['$el_text'] } : {},
+                externalHref && e.type === 'click' ? { $external_click_url: externalHref } : {},
                 autocaptureAugmentProperties
             )