diff --git a/packages/core/src/tools/utils.spec.ts b/packages/core/src/tools/utils.spec.ts
index 8f9c97a209..6e022a17f5 100644
--- a/packages/core/src/tools/utils.spec.ts
+++ b/packages/core/src/tools/utils.spec.ts
@@ -2,6 +2,7 @@ import type { Clock } from '../../test/specHelper'
 import { mockClock } from '../../test/specHelper'
 import {
   combine,
+  cssEscape,
   deepClone,
   findCommaSeparatedValue,
   getType,
@@ -569,3 +570,12 @@ describe('startWith', () => {
     expect(startsWith('barfoo', 'foo')).toEqual(false)
   })
 })
+
+describe('cssEscape', () => {
+  it('should escape a string', () => {
+    expect(cssEscape('.foo#bar')).toEqual('\\.foo\\#bar')
+    expect(cssEscape('()[]{}')).toEqual('\\(\\)\\[\\]\\{\\}')
+    expect(cssEscape('--a')).toEqual('--a')
+    expect(cssEscape('\0')).toEqual('\ufffd')
+  })
+})
diff --git a/packages/core/src/tools/utils.ts b/packages/core/src/tools/utils.ts
index 31273a9b6d..47d0e0f998 100644
--- a/packages/core/src/tools/utils.ts
+++ b/packages/core/src/tools/utils.ts
@@ -208,6 +208,14 @@ export function includes(candidate: string | unknown[], search: any) {
   return candidate.indexOf(search) !== -1
 }
 
+export function arrayFrom<T>(arrayLike: ArrayLike<T>): T[] {
+  const array = []
+  for (let i = 0; i < arrayLike.length; i++) {
+    array.push(arrayLike[i])
+  }
+  return array
+}
+
 export function find<T, S extends T>(
   array: T[],
   predicate: (item: T, index: number, array: T[]) => item is S
@@ -635,3 +643,24 @@ export function removeDuplicates<T>(array: T[]) {
 export function matchList(list: Array<string | RegExp>, value: string) {
   return list.some((item) => item === value || (item instanceof RegExp && item.test(value)))
 }
+
+// https://github.com/jquery/jquery/blob/a684e6ba836f7c553968d7d026ed7941e1a612d8/src/selector/escapeSelector.js
+export function cssEscape(str: string) {
+  if (window.CSS && window.CSS.escape) {
+    return window.CSS.escape(str)
+  }
+
+  // eslint-disable-next-line no-control-regex
+  return str.replace(/([\0-\x1f\x7f]|^-?\d)|^-$|[^\x80-\uFFFF\w-]/g, function (ch, asCodePoint) {
+    if (asCodePoint) {
+      // U+0000 NULL becomes U+FFFD REPLACEMENT CHARACTER
+      if (ch === '\0') {
+        return '\uFFFD'
+      }
+      // Control characters and (dependent upon position) numbers get escaped as code points
+      return `${ch.slice(0, -1)}\\${ch.charCodeAt(ch.length - 1).toString(16)} `
+    }
+    // Other potentially-special ASCII characters get backslash-escaped
+    return `\\${ch}`
+  })
+}
diff --git a/packages/core/test/specHelper.ts b/packages/core/test/specHelper.ts
index 35c933dc84..ce0383bc90 100644
--- a/packages/core/test/specHelper.ts
+++ b/packages/core/test/specHelper.ts
@@ -311,7 +311,7 @@ class StubXhr extends StubEventEmitter {
   }
 }
 
-export function createNewEvent(eventName: 'click', properties?: { [name: string]: unknown }): MouseEvent
+export function createNewEvent<P extends Record<string, unknown>>(eventName: 'click', properties?: P): MouseEvent & P
 export function createNewEvent(eventName: string, properties?: { [name: string]: unknown }): Event
 export function createNewEvent(eventName: string, properties: { [name: string]: unknown } = {}) {
   let event: Event
diff --git a/packages/rum-core/src/domain/rumEventsCollection/action/actionCollection.spec.ts b/packages/rum-core/src/domain/rumEventsCollection/action/actionCollection.spec.ts
index 73d43e4068..10a8a9e331 100644
--- a/packages/rum-core/src/domain/rumEventsCollection/action/actionCollection.spec.ts
+++ b/packages/rum-core/src/domain/rumEventsCollection/action/actionCollection.spec.ts
@@ -25,7 +25,8 @@ describe('actionCollection', () => {
   })
   it('should create action from auto action', () => {
     const { lifeCycle, rawRumEvents } = setupBuilder.build()
-    const event = createNewEvent('click')
+
+    const event = createNewEvent('click', { target: document.createElement('button') })
     lifeCycle.notify(LifeCycleEventType.AUTO_ACTION_COMPLETED, {
       counts: {
         errorCount: 10,
@@ -39,6 +40,12 @@ describe('actionCollection', () => {
       startClocks: { relative: 1234 as RelativeTime, timeStamp: 123456789 as TimeStamp },
       type: ActionType.CLICK,
       event,
+      target: {
+        selector: '#foo',
+        width: 1,
+        height: 2,
+      },
+      position: { x: 1, y: 2 },
     })
 
     expect(rawRumEvents[0].startTime).toBe(1234 as RelativeTime)
@@ -60,6 +67,13 @@ describe('actionCollection', () => {
         },
         target: {
           name: 'foo',
+          selector: '#foo',
+          width: 1,
+          height: 2,
+        },
+        position: {
+          x: 1,
+          y: 2,
         },
         type: ActionType.CLICK,
       },
diff --git a/packages/rum-core/src/domain/rumEventsCollection/action/actionCollection.ts b/packages/rum-core/src/domain/rumEventsCollection/action/actionCollection.ts
index 189f81bb03..84881ae768 100644
--- a/packages/rum-core/src/domain/rumEventsCollection/action/actionCollection.ts
+++ b/packages/rum-core/src/domain/rumEventsCollection/action/actionCollection.ts
@@ -60,6 +60,8 @@ function processAction(
     ? {
         action: {
           id: action.id,
+          target: action.target,
+          position: action.position,
           loading_time: toServerDuration(action.duration),
           frustration: {
             type: action.frustrationTypes,
diff --git a/packages/rum-core/src/domain/rumEventsCollection/action/getActionNameFromElement.spec.ts b/packages/rum-core/src/domain/rumEventsCollection/action/getActionNameFromElement.spec.ts
index 8cb7c4609a..fe048c4d00 100644
--- a/packages/rum-core/src/domain/rumEventsCollection/action/getActionNameFromElement.spec.ts
+++ b/packages/rum-core/src/domain/rumEventsCollection/action/getActionNameFromElement.spec.ts
@@ -1,65 +1,54 @@
+import { createIsolatedDOM } from '../../../../test/createIsolatedDom'
 import { getActionNameFromElement } from './getActionNameFromElement'
 
 describe('getActionNameFromElement', () => {
-  const iframes: HTMLIFrameElement[] = []
-
-  function element(s: TemplateStringsArray) {
-    // Simply using a DOMParser does not fit here, because script tags created this way are
-    // considered as normal markup, so they are not ignored when getting the textual content of the
-    // target via innerText
-
-    const iframe = document.createElement('iframe')
-    iframes.push(iframe)
-    document.body.appendChild(iframe)
-    const doc = iframe.contentDocument!
-    doc.open()
-    doc.write(`<html><body>${s[0]}</body></html>`)
-    doc.close()
-    return doc.querySelector('[target]') || doc.body.children[0]
-  }
+  let isolatedDOM: ReturnType<typeof createIsolatedDOM>
+
+  beforeEach(() => {
+    isolatedDOM = createIsolatedDOM()
+  })
 
   afterEach(() => {
-    iframes.forEach((iframe) => iframe.parentNode!.removeChild(iframe))
-    iframes.length = 0
+    isolatedDOM.clear()
   })
 
   it('extracts the textual content of an element', () => {
-    expect(getActionNameFromElement(element`<div>Foo <div>bar</div></div>`)).toBe('Foo bar')
+    expect(getActionNameFromElement(isolatedDOM.element`<div>Foo <div>bar</div></div>`)).toBe('Foo bar')
   })
 
   it('extracts the text of an input button', () => {
-    expect(getActionNameFromElement(element`<input type="button" value="Click" />`)).toBe('Click')
+    expect(getActionNameFromElement(isolatedDOM.element`<input type="button" value="Click" />`)).toBe('Click')
   })
 
   it('extracts the alt text of an image', () => {
-    expect(getActionNameFromElement(element`<img title="foo" alt="bar" />`)).toBe('bar')
+    expect(getActionNameFromElement(isolatedDOM.element`<img title="foo" alt="bar" />`)).toBe('bar')
   })
 
   it('extracts the title text of an image', () => {
-    expect(getActionNameFromElement(element`<img title="foo" />`)).toBe('foo')
+    expect(getActionNameFromElement(isolatedDOM.element`<img title="foo" />`)).toBe('foo')
   })
 
   it('extracts the text of an aria-label attribute', () => {
-    expect(getActionNameFromElement(element`<span aria-label="Foo" />`)).toBe('Foo')
+    expect(getActionNameFromElement(isolatedDOM.element`<span aria-label="Foo" />`)).toBe('Foo')
   })
 
   it('gets the parent element textual content if everything else fails', () => {
-    expect(getActionNameFromElement(element`<div>Foo <img target /></div>`)).toBe('Foo')
+    expect(getActionNameFromElement(isolatedDOM.element`<div>Foo <img target /></div>`)).toBe('Foo')
   })
 
   it("doesn't get the value of a text input", () => {
-    expect(getActionNameFromElement(element`<input type="text" value="foo" />`)).toBe('')
+    expect(getActionNameFromElement(isolatedDOM.element`<input type="text" value="foo" />`)).toBe('')
   })
 
   it("doesn't get the value of a password input", () => {
-    expect(getActionNameFromElement(element`<input type="password" value="foo" />`)).toBe('')
+    expect(getActionNameFromElement(isolatedDOM.element`<input type="password" value="foo" />`)).toBe('')
   })
 
   it('limits the name length to a reasonable size', () => {
     expect(
       getActionNameFromElement(
         // eslint-disable-next-line  max-len
-        element`<div>Foooooooooooooooooo baaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaar baaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaz</div>`
+        isolatedDOM.element`<div>Foooooooooooooooooo baaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaar baaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaz</div>`
       )
     ).toBe(
       // eslint-disable-next-line  max-len
@@ -68,20 +57,20 @@ describe('getActionNameFromElement', () => {
   })
 
   it('normalize white spaces', () => {
-    expect(getActionNameFromElement(element`<div>foo\tbar\n\n  baz</div>`)).toBe('foo bar baz')
+    expect(getActionNameFromElement(isolatedDOM.element`<div>foo\tbar\n\n  baz</div>`)).toBe('foo bar baz')
   })
 
   it('ignores the inline script textual content', () => {
-    expect(getActionNameFromElement(element`<div><script>console.log('toto')</script>b</div>`)).toBe('b')
+    expect(getActionNameFromElement(isolatedDOM.element`<div><script>console.log('toto')</script>b</div>`)).toBe('b')
   })
 
   it('extracts text from SVG elements', () => {
-    expect(getActionNameFromElement(element`<svg><text>foo  bar</text></svg>`)).toBe('foo bar')
+    expect(getActionNameFromElement(isolatedDOM.element`<svg><text>foo  bar</text></svg>`)).toBe('foo bar')
   })
 
   it('extracts text from an associated label', () => {
     expect(
-      getActionNameFromElement(element`
+      getActionNameFromElement(isolatedDOM.element`
         <div>
           <label for="toto">label text</label>
           <div>ignored</div>
@@ -93,7 +82,7 @@ describe('getActionNameFromElement', () => {
 
   it('extracts text from a parent label', () => {
     expect(
-      getActionNameFromElement(element`
+      getActionNameFromElement(isolatedDOM.element`
         <label>
           foo
           <div>
@@ -107,7 +96,7 @@ describe('getActionNameFromElement', () => {
 
   it('extracts text from the first OPTION element when clicking on a SELECT', () => {
     expect(
-      getActionNameFromElement(element`
+      getActionNameFromElement(isolatedDOM.element`
         <select>
           <option>foo</option>
           <option>bar</option>
@@ -118,7 +107,7 @@ describe('getActionNameFromElement', () => {
 
   it('extracts text from a aria-labelledby associated element', () => {
     expect(
-      getActionNameFromElement(element`
+      getActionNameFromElement(isolatedDOM.element`
         <div>
           <label id="toto">label text</label>
           <div>ignored</div>
@@ -130,7 +119,7 @@ describe('getActionNameFromElement', () => {
 
   it('extracts text from multiple aria-labelledby associated elements', () => {
     expect(
-      getActionNameFromElement(element`
+      getActionNameFromElement(isolatedDOM.element`
         <div>
           <label id="toto1">label</label>
           <div>ignored</div>
@@ -144,7 +133,7 @@ describe('getActionNameFromElement', () => {
 
   it('extracts text from a BUTTON element', () => {
     expect(
-      getActionNameFromElement(element`
+      getActionNameFromElement(isolatedDOM.element`
         <div>
           <div>ignored</div>
           <button target>foo</button>
@@ -155,7 +144,7 @@ describe('getActionNameFromElement', () => {
 
   it('extracts text from a role=button element', () => {
     expect(
-      getActionNameFromElement(element`
+      getActionNameFromElement(isolatedDOM.element`
         <div>
           <div>ignored</div>
           <div role="button" target>foo</div>
@@ -166,7 +155,7 @@ describe('getActionNameFromElement', () => {
 
   it('limits the recursion to the 10th parent', () => {
     expect(
-      getActionNameFromElement(element`
+      getActionNameFromElement(isolatedDOM.element`
         <div>
           <div>ignored</div>
           <i><i><i><i><i><i><i><i><i><i>
@@ -179,7 +168,7 @@ describe('getActionNameFromElement', () => {
 
   it('limits the recursion to the BODY element', () => {
     expect(
-      getActionNameFromElement(element`
+      getActionNameFromElement(isolatedDOM.element`
         <div>ignored</div>
         <i target></i>
       `)
@@ -188,7 +177,7 @@ describe('getActionNameFromElement', () => {
 
   it('limits the recursion to a FORM element', () => {
     expect(
-      getActionNameFromElement(element`
+      getActionNameFromElement(isolatedDOM.element`
         <div>
           <div>ignored</div>
           <form>
@@ -201,7 +190,7 @@ describe('getActionNameFromElement', () => {
 
   it('extracts the name from a parent FORM element', () => {
     expect(
-      getActionNameFromElement(element`
+      getActionNameFromElement(isolatedDOM.element`
         <div>
           <div>ignored</div>
           <form title="foo">
@@ -214,7 +203,7 @@ describe('getActionNameFromElement', () => {
 
   it('extracts the whole textual content of a button', () => {
     expect(
-      getActionNameFromElement(element`
+      getActionNameFromElement(isolatedDOM.element`
         <button>
           foo
           <i target>bar</i>
@@ -225,7 +214,7 @@ describe('getActionNameFromElement', () => {
 
   it('ignores the textual content of contenteditable elements', () => {
     expect(
-      getActionNameFromElement(element`
+      getActionNameFromElement(isolatedDOM.element`
         <div contenteditable>
           <i target>ignored</i>
           ignored
@@ -236,7 +225,7 @@ describe('getActionNameFromElement', () => {
 
   it('extracts the name from attributes of contenteditable elements', () => {
     expect(
-      getActionNameFromElement(element`
+      getActionNameFromElement(isolatedDOM.element`
         <div contenteditable>
           <i aria-label="foo" target>ignored</i>
           ignored
@@ -248,14 +237,14 @@ describe('getActionNameFromElement', () => {
   describe('programmatically declared action name', () => {
     it('extracts the name from the data-dd-action-name attribute', () => {
       expect(
-        getActionNameFromElement(element`
+        getActionNameFromElement(isolatedDOM.element`
           <div data-dd-action-name="foo">ignored</div>
         `)
       ).toBe('foo')
     })
 
     it('considers any parent', () => {
-      const target = element`
+      const target = isolatedDOM.element`
         <form>
           <i><i><i><i><i><i><i><i><i><i><i><i>
             <span target>ignored</span>
@@ -269,7 +258,7 @@ describe('getActionNameFromElement', () => {
 
     it('normalizes the value', () => {
       expect(
-        getActionNameFromElement(element`
+        getActionNameFromElement(isolatedDOM.element`
           <div data-dd-action-name="   foo  \t bar  ">ignored</div>
         `)
       ).toBe('foo bar')
@@ -277,7 +266,7 @@ describe('getActionNameFromElement', () => {
 
     it('fallback on an automatic strategy if the attribute is empty', () => {
       expect(
-        getActionNameFromElement(element`
+        getActionNameFromElement(isolatedDOM.element`
           <div data-dd-action-name="ignored">
             <div data-dd-action-name="">
               <span target>foo</span>
@@ -290,7 +279,7 @@ describe('getActionNameFromElement', () => {
     it('extracts the name from a user-configured attribute', () => {
       expect(
         getActionNameFromElement(
-          element`
+          isolatedDOM.element`
           <div data-test-id="foo">ignored</div>
         `,
           'data-test-id'
@@ -301,7 +290,7 @@ describe('getActionNameFromElement', () => {
     it('favors data-dd-action-name over user-configured attribute', () => {
       expect(
         getActionNameFromElement(
-          element`
+          isolatedDOM.element`
           <div data-test-id="foo" data-dd-action-name="bar">ignored</div>
         `,
           'data-test-id'
@@ -310,15 +299,18 @@ describe('getActionNameFromElement', () => {
     })
 
     it('remove children with programmatic action name in textual content', () => {
-      expect(getActionNameFromElement(element`<div>Foo <div data-dd-action-name="custom action">bar<div></div>`)).toBe(
-        'Foo'
-      )
+      expect(
+        getActionNameFromElement(isolatedDOM.element`<div>Foo <div data-dd-action-name="custom action">bar<div></div>`)
+      ).toBe('Foo')
     })
 
     // eslint-disable-next-line max-len
     it('remove children with programmatic action name in textual content based on the user-configured attribute', () => {
       expect(
-        getActionNameFromElement(element`<div>Foo <div data-test-id="custom action">bar<div></div>`, 'data-test-id')
+        getActionNameFromElement(
+          isolatedDOM.element`<div>Foo <div data-test-id="custom action">bar<div></div>`,
+          'data-test-id'
+        )
       ).toBe('Foo')
     })
   })
diff --git a/packages/rum-core/src/domain/rumEventsCollection/action/getSelectorFromElement.spec.ts b/packages/rum-core/src/domain/rumEventsCollection/action/getSelectorFromElement.spec.ts
new file mode 100644
index 0000000000..e3509562b9
--- /dev/null
+++ b/packages/rum-core/src/domain/rumEventsCollection/action/getSelectorFromElement.spec.ts
@@ -0,0 +1,77 @@
+import { createIsolatedDOM } from '../../../../test/createIsolatedDom'
+import { getSelectorFromElement } from './getSelectorFromElement'
+
+describe('getSelectorFromElement', () => {
+  let isolatedDOM: ReturnType<typeof createIsolatedDOM>
+
+  beforeEach(() => {
+    isolatedDOM = createIsolatedDOM()
+  })
+
+  afterEach(() => {
+    isolatedDOM.clear()
+  })
+
+  describe('ID selector', () => {
+    it('should use the ID selector when the element as an ID', () => {
+      expect(getSelectorFromElement(isolatedDOM.element`<div id="foo"></div>`)).toBe('#foo')
+    })
+
+    it('should not use the ID selector when the ID is not unique', () => {
+      expect(getSelectorFromElement(isolatedDOM.element`<div id="foo"></div><div id="foo"></div>`)).not.toContain(
+        '#foo'
+      )
+    })
+  })
+
+  describe('class selector', () => {
+    it('should use the class selector when the element as classes', () => {
+      expect(getSelectorFromElement(isolatedDOM.element`<div class="foo bar"></div>`)).toBe('BODY>DIV.bar.foo')
+    })
+
+    it('should use the class selector when siblings have the same classes but different tags', () => {
+      expect(getSelectorFromElement(isolatedDOM.element`<div target class="foo"></div><span class="foo"></span>`)).toBe(
+        'BODY>DIV.foo'
+      )
+    })
+
+    it('should not use the class selector when siblings have the tag + classes', () => {
+      expect(
+        getSelectorFromElement(isolatedDOM.element`<div target class="foo"></div><div class="foo"></div>`)
+      ).not.toContain('DIV.foo')
+      expect(
+        getSelectorFromElement(isolatedDOM.element`<div target class="foo bar"></div><div class="bar foo baz"></div>`)
+      ).not.toContain('DIV.foo')
+    })
+  })
+
+  describe('position selector', () => {
+    it('should use nth-of-type when the element as siblings', () => {
+      const html = isolatedDOM.element`<span></span><div></div><span></span><div target></div>`
+      expect(getSelectorFromElement(html)).toBe('BODY>DIV:nth-of-type(2)')
+    })
+
+    it('should not use nth-of-type when the element has no siblings', () => {
+      const html = isolatedDOM.element`<div></div>`
+      expect(getSelectorFromElement(html)).toBe('BODY>DIV')
+    })
+  })
+
+  describe('strategies priority', () => {
+    it('ID selector should take precedence over class selector', () => {
+      expect(getSelectorFromElement(isolatedDOM.element`<div id="foo" class="bar"></div>`)).toBe('#foo')
+    })
+
+    it('class selector should take precedence over position selector', () => {
+      expect(getSelectorFromElement(isolatedDOM.element`<div class="bar"></div><div></div>`)).toBe('BODY>DIV.bar')
+    })
+  })
+
+  describe('should escape CSS selectors', () => {
+    it('ID selector should take precedence over class selector', () => {
+      expect(
+        getSelectorFromElement(isolatedDOM.element`<div id="#bar"><button target class=".foo"></button></div>`)
+      ).toBe('#\\#bar>BUTTON.\\.foo')
+    })
+  })
+})
diff --git a/packages/rum-core/src/domain/rumEventsCollection/action/getSelectorFromElement.ts b/packages/rum-core/src/domain/rumEventsCollection/action/getSelectorFromElement.ts
new file mode 100644
index 0000000000..d89fe07008
--- /dev/null
+++ b/packages/rum-core/src/domain/rumEventsCollection/action/getSelectorFromElement.ts
@@ -0,0 +1,65 @@
+import { arrayFrom, cssEscape } from '@datadog/browser-core'
+
+export function getSelectorFromElement(targetElement: Element): string {
+  const targetElementSelector = []
+  let element: Element | null = targetElement
+
+  while (element && element.nodeName !== 'HTML') {
+    const idSelector = getIDSelector(element)
+    if (idSelector) {
+      targetElementSelector.unshift(idSelector)
+      break
+    }
+
+    targetElementSelector.unshift(getClassSelector(element) || getPositionSelector(element))
+
+    element = element.parentElement
+  }
+
+  return targetElementSelector.join('>')
+}
+
+function getIDSelector(element: Element): string | undefined {
+  if (!element.id) return
+
+  const escapedId = cssEscape(element.id)
+  const isUnique = element.ownerDocument.body.querySelectorAll(`#${escapedId}`).length === 1
+
+  if (isUnique) return `#${escapedId}`
+}
+
+function getClassSelector(element: Element): string | undefined {
+  const orderedClassList = arrayFrom(element.classList).sort()
+  let classUniqueAmongSiblings = true
+  for (let i = 0; i < element.parentElement!.children.length; i++) {
+    const sibling = element.parentElement!.children[i]
+    if (sibling === element) continue
+
+    if (sibling.tagName === element.tagName && sameClasses(orderedClassList, sibling.classList)) {
+      classUniqueAmongSiblings = false
+      break
+    }
+  }
+
+  if (classUniqueAmongSiblings)
+    return `${element.tagName}${orderedClassList.map((className) => `.${cssEscape(className)}`).join('')}`
+}
+
+function sameClasses(a: string[], b: DOMTokenList): boolean {
+  return a.length <= b.length && a.every((className) => b.contains(className))
+}
+
+function getPositionSelector(element: Element): string | undefined {
+  const isUniqueChild = !element.previousElementSibling && !element.nextElementSibling
+  if (isUniqueChild) return `${element.tagName}`
+
+  let index = 1
+  let prevSibling = element.previousElementSibling
+  while (prevSibling) {
+    if (element.tagName === prevSibling.tagName) index++
+
+    prevSibling = prevSibling.previousElementSibling
+  }
+
+  return `${element.tagName}:nth-of-type(${index})`
+}
diff --git a/packages/rum-core/src/domain/rumEventsCollection/action/rageClickChain.spec.ts b/packages/rum-core/src/domain/rumEventsCollection/action/rageClickChain.spec.ts
index 82158d1826..e820173e8c 100644
--- a/packages/rum-core/src/domain/rumEventsCollection/action/rageClickChain.spec.ts
+++ b/packages/rum-core/src/domain/rumEventsCollection/action/rageClickChain.spec.ts
@@ -184,7 +184,7 @@ describe('isRage', () => {
   })
 })
 
-function createFakeClick(eventPartial?: Partial<MouseEvent>): Click & { clonedClick?: Click } {
+function createFakeClick(eventPartial?: Partial<MouseEvent & { target: Element }>): Click & { clonedClick?: Click } {
   const stopObservable = new Observable<void>()
   let isStopped = false
   let clonedClick: Click | undefined
@@ -195,6 +195,7 @@ function createFakeClick(eventPartial?: Partial<MouseEvent>): Click & { clonedCl
       clientX: 100,
       clientY: 100,
       timeStamp: timeStampNow(),
+      target: document.body,
       ...eventPartial,
     }),
     stopObservable,
diff --git a/packages/rum-core/src/domain/rumEventsCollection/action/trackClickActions.spec.ts b/packages/rum-core/src/domain/rumEventsCollection/action/trackClickActions.spec.ts
index 893b7f0430..4637546981 100644
--- a/packages/rum-core/src/domain/rumEventsCollection/action/trackClickActions.spec.ts
+++ b/packages/rum-core/src/domain/rumEventsCollection/action/trackClickActions.spec.ts
@@ -1,5 +1,11 @@
 import type { Context, Observable, Duration } from '@datadog/browser-core'
-import { clocksNow, timeStampNow, relativeNow } from '@datadog/browser-core'
+import {
+  updateExperimentalFeatures,
+  resetExperimentalFeatures,
+  clocksNow,
+  timeStampNow,
+  relativeNow,
+} from '@datadog/browser-core'
 import type { Clock } from '../../../../../core/test/specHelper'
 import { createNewEvent } from '../../../../../core/test/specHelper'
 import type { TestSetupBuilder } from '../../../../test/specHelper'
@@ -44,6 +50,9 @@ describe('trackClickActions', () => {
   beforeEach(() => {
     button = document.createElement('button')
     button.type = 'button'
+    button.id = 'button'
+    button.style.width = '100px'
+    button.style.height = '100px'
     button.appendChild(document.createTextNode('Click me'))
     document.body.appendChild(button)
 
@@ -88,12 +97,36 @@ describe('trackClickActions', () => {
         name: 'Click me',
         startClocks: jasmine.any(Object),
         type: ActionType.CLICK,
-        event: createNewEvent('click'),
+        event: createNewEvent('click', { target: document.createElement('button') }),
         frustrationTypes: [],
+        target: undefined,
+        position: undefined,
       },
     ])
   })
 
+  describe('when clickmap ff is enabled', () => {
+    beforeEach(() => {
+      updateExperimentalFeatures(['clickmap'])
+    })
+
+    afterEach(() => {
+      resetExperimentalFeatures()
+    })
+
+    it('should set click position and target', () => {
+      const { domMutationObservable, clock } = setupBuilder.build()
+      emulateClickWithActivity(domMutationObservable, clock)
+      clock.tick(EXPIRE_DELAY)
+      expect(events[0]).toEqual(
+        jasmine.objectContaining({
+          target: { selector: '#button', width: 100, height: 100 },
+          position: { x: 50, y: 50 },
+        })
+      )
+    })
+  })
+
   it('should keep track of previously validated click actions', () => {
     const { domMutationObservable, clock } = setupBuilder.build()
     const clickActionStartTime = relativeNow()
@@ -374,11 +407,15 @@ describe('trackClickActions', () => {
 
   function emulateClickWithoutActivity(target: HTMLElement = button) {
     const targetPosition = target.getBoundingClientRect()
+    const offsetX = targetPosition.width / 2
+    const offsetY = targetPosition.height / 2
     target.dispatchEvent(
       createNewEvent('click', {
         target,
-        clientX: targetPosition.left + targetPosition.width / 2,
-        clientY: targetPosition.top + targetPosition.height / 2,
+        clientX: targetPosition.left + offsetX,
+        clientY: targetPosition.top + offsetY,
+        offsetX,
+        offsetY,
         timeStamp: timeStampNow(),
       })
     )
diff --git a/packages/rum-core/src/domain/rumEventsCollection/action/trackClickActions.ts b/packages/rum-core/src/domain/rumEventsCollection/action/trackClickActions.ts
index d5ddeb2d2f..2ff97dbeec 100644
--- a/packages/rum-core/src/domain/rumEventsCollection/action/trackClickActions.ts
+++ b/packages/rum-core/src/domain/rumEventsCollection/action/trackClickActions.ts
@@ -1,5 +1,6 @@
 import type { Duration, ClocksState, RelativeTime, TimeStamp } from '@datadog/browser-core'
 import {
+  isExperimentalFeatureEnabled,
   setToArray,
   Observable,
   assign,
@@ -22,6 +23,7 @@ import { waitPageActivityEnd } from '../../waitPageActivityEnd'
 import type { RageClickChain } from './rageClickChain'
 import { createRageClickChain } from './rageClickChain'
 import { getActionNameFromElement } from './getActionNameFromElement'
+import { getSelectorFromElement } from './getSelectorFromElement'
 
 interface ActionCounts {
   errorCount: number
@@ -33,10 +35,16 @@ export interface ClickAction {
   type: ActionType.CLICK
   id: string
   name: string
+  target?: {
+    selector: string
+    width: number
+    height: number
+  }
+  position?: { x: number; y: number }
   startClocks: ClocksState
   duration?: Duration
   counts: ActionCounts
-  event: MouseEvent
+  event: MouseEvent & { target: Element }
   frustrationTypes: FrustrationType[]
 }
 
@@ -195,6 +203,22 @@ function newClick(
   base: Pick<ClickAction, 'startClocks' | 'event' | 'name'>
 ) {
   const id = generateUUID()
+  let target: ClickAction['target']
+  let position: ClickAction['position']
+
+  if (isExperimentalFeatureEnabled('clickmap')) {
+    const rect = base.event.target.getBoundingClientRect()
+    target = {
+      selector: getSelectorFromElement(base.event.target),
+      width: Math.round(rect.width),
+      height: Math.round(rect.height),
+    }
+    position = {
+      // Use clientX and Y because for SVG element offsetX and Y are relatives to the <svg> element
+      x: Math.round(base.event.clientX - rect.left),
+      y: Math.round(base.event.clientY - rect.top),
+    }
+  }
   const historyEntry = history.add(id, base.startClocks.relative)
   const eventCountsSubscription = trackEventCounts(lifeCycle)
   let state: ClickState = { status: ClickStatus.ONGOING }
@@ -250,6 +274,8 @@ function newClick(
           duration: state.endTime && elapsed(base.startClocks.timeStamp, state.endTime),
           id,
           frustrationTypes: setToArray(frustrations),
+          target,
+          position,
           counts: {
             resourceCount,
             errorCount,
diff --git a/packages/rum-core/src/rawRumEvent.types.ts b/packages/rum-core/src/rawRumEvent.types.ts
index 679eef1117..f1f3c3d96d 100644
--- a/packages/rum-core/src/rawRumEvent.types.ts
+++ b/packages/rum-core/src/rawRumEvent.types.ts
@@ -149,6 +149,13 @@ export interface RawRumActionEvent {
     resource?: Count
     target: {
       name: string
+      selector?: string
+      width?: number
+      height?: number
+    }
+    position?: {
+      x: number
+      y: number
     }
   }
   view?: {
diff --git a/packages/rum-core/src/rumEvent.types.ts b/packages/rum-core/src/rumEvent.types.ts
index b12c9080d3..4d6347ca1d 100644
--- a/packages/rum-core/src/rumEvent.types.ts
+++ b/packages/rum-core/src/rumEvent.types.ts
@@ -39,6 +39,18 @@ export type RumActionEvent = CommonProperties & {
        * Target name
        */
       name: string
+      /**
+       * CSS selector path of the target element
+       */
+      readonly selector?: string
+      /**
+       * Width of the target element (in pixels)
+       */
+      readonly width?: number
+      /**
+       * Height of the target element (in pixels)
+       */
+      readonly height?: number
       [k: string]: unknown
     }
     /**
@@ -51,6 +63,20 @@ export type RumActionEvent = CommonProperties & {
       readonly type: ('rage_click' | 'dead_click' | 'error_click')[]
       [k: string]: unknown
     }
+    /**
+     * Action position properties
+     */
+    readonly position?: {
+      /**
+       * X coordinate of the action (in pixels)
+       */
+      readonly x: number
+      /**
+       * Y coordinate of the action (in pixels)
+       */
+      readonly y: number
+      [k: string]: unknown
+    }
     /**
      * Properties of the errors of the action
      */
diff --git a/packages/rum-core/test/createIsolatedDom.ts b/packages/rum-core/test/createIsolatedDom.ts
new file mode 100644
index 0000000000..d5bd3e4bf8
--- /dev/null
+++ b/packages/rum-core/test/createIsolatedDom.ts
@@ -0,0 +1,21 @@
+export function createIsolatedDOM() {
+  // Simply using a DOMParser does not fit here, because script tags created this way are
+  // considered as normal markup, so they are not ignored when getting the textual content of the
+  // target via innerText
+  const iframe = document.createElement('iframe')
+  document.body.appendChild(iframe)
+  const doc = iframe.contentDocument!
+  doc.open()
+  doc.write('<html><body></body></html>')
+  doc.close()
+
+  return {
+    element(s: TemplateStringsArray) {
+      iframe.contentDocument!.body.innerHTML = s[0]
+      return doc.querySelector('[target]') || doc.body.children[0]
+    },
+    clear() {
+      iframe.parentNode!.removeChild(iframe)
+    },
+  }
+}
diff --git a/test/e2e/scenario/rum/actions.scenario.ts b/test/e2e/scenario/rum/actions.scenario.ts
index cd8341f872..ddb4e7ca41 100644
--- a/test/e2e/scenario/rum/actions.scenario.ts
+++ b/test/e2e/scenario/rum/actions.scenario.ts
@@ -3,7 +3,7 @@ import { createTest, flushEvents, html, waitForServersIdle } from '../../lib/fra
 
 describe('action collection', () => {
   createTest('track a click action')
-    .withRum({ trackInteractions: true })
+    .withRum({ trackInteractions: true, enableExperimentalFeatures: ['clickmap'] })
     .withBody(
       html`
         <button>click me</button>
@@ -36,6 +36,13 @@ describe('action collection', () => {
         },
         target: {
           name: 'click me',
+          selector: jasmine.any(String),
+          width: jasmine.any(Number),
+          height: jasmine.any(Number),
+        },
+        position: {
+          x: jasmine.any(Number),
+          y: jasmine.any(Number),
         },
         type: 'click',
         frustration: {