diff --git a/packages/x-components/src/components/__tests__/display-emitter.spec.ts b/packages/x-components/src/components/__tests__/display-emitter.spec.ts
index 1ecdc1b62b..97205d68b2 100644
--- a/packages/x-components/src/components/__tests__/display-emitter.spec.ts
+++ b/packages/x-components/src/components/__tests__/display-emitter.spec.ts
@@ -1,23 +1,29 @@
 import { mount, Wrapper } from '@vue/test-utils';
-import Vue, { ref } from 'vue';
-import { Component } from 'vue-property-decorator';
+import Vue, { ref, nextTick, Ref } from 'vue';
 import { TaggingRequest } from '@empathyco/x-types';
-import { useElementVisibility } from '@vueuse/core';
+import { useEmitDisplayEvent } from '../../composables';
 import DisplayEmitter from '../display-emitter.vue';
+import { getDataTestSelector } from '../../__tests__/utils';
 
-@Component({
-  template: `
-    <button data-test="child" />
-  `
-})
-class Child extends Vue {}
+jest.mock('../../composables', () => ({
+  useEmitDisplayEvent: jest.fn()
+}));
 
+let emitDisplayEventElementSpy: Ref<Vue | null> = ref(null);
+let emitDisplayEventPayloadSpy: TaggingRequest = { url: '', params: {} };
+const unwatchDisplaySpy = jest.fn();
 const refElementVisibility = ref(false);
+(useEmitDisplayEvent as jest.Mock).mockImplementation(({ element, taggingRequest }) => {
+  // jest doesn't handle well evaluation of dynamic references with `toHaveBeenCalledWith`
+  // so we need a spy
+  emitDisplayEventElementSpy = element;
+  emitDisplayEventPayloadSpy = taggingRequest;
 
-/* eslint-disable */
-// @ts-ignore
-useElementVisibility = jest.fn().mockReturnValue(refElementVisibility);
-/* eslint-enable */
+  return {
+    isElementVisible: refElementVisibility,
+    unwatchDisplay: unwatchDisplaySpy
+  };
+});
 
 /**
  * Renders the {@link DisplayEmitter} component, exposing a basic API for testing.
@@ -29,43 +35,26 @@ useElementVisibility = jest.fn().mockReturnValue(refElementVisibility);
 function renderDisplayEmitter(
   { payload }: RenderDisplayEmitterOptions = { payload: { url: '', params: {} } }
 ): RenderDisplayEmitterAPI {
-  const emitSpy = jest.fn();
-
   const wrapper = mount(
     {
       components: {
-        DisplayEmitter,
-        Child
+        DisplayEmitter
       },
       template: `
         <DisplayEmitter :payload="payload">
-          <Child v-show="showChild" />
+          <div data-test="child" />
         </DisplayEmitter>`,
-      props: ['payload', 'showChild']
+      props: ['payload']
     },
     {
       propsData: {
-        payload,
-        showChild: false
-      },
-      mocks: {
-        $x: {
-          emit: emitSpy
-        }
+        payload
       }
     }
   );
 
-  const toggleChildVisibility = async (): Promise<void> => {
-    refElementVisibility.value = !refElementVisibility.value;
-    await wrapper.vm.$nextTick();
-  };
-
   return {
-    wrapper,
-    child: wrapper.findComponent<Child>(Child),
-    emitSpy,
-    toggleChildVisibility
+    wrapper
   };
 }
 
@@ -75,37 +64,43 @@ describe('testing DisplayEmitter component', () => {
   });
 
   it('renders everything passed to its default slot', () => {
-    const { child } = renderDisplayEmitter();
+    const { wrapper } = renderDisplayEmitter();
 
-    expect(child.exists()).toBe(true);
+    expect(wrapper.find(getDataTestSelector('child')).exists()).toBe(true);
   });
 
-  // eslint-disable-next-line max-len
-  it('emits TrackableElementDisplayed with provided payload when the child is visible', async () => {
-    const payload = { url: 'test-url', params: { test: 'param' } };
-    const { emitSpy, toggleChildVisibility } = renderDisplayEmitter({
-      payload
-    });
+  it('uses `useEmitDisplayEvent` underneath', () => {
+    renderDisplayEmitter();
+
+    expect(useEmitDisplayEvent).toHaveBeenCalled();
+  });
 
-    await toggleChildVisibility();
+  it('provides `useEmitDisplayEvent` with the element in the slot to watch', async () => {
+    renderDisplayEmitter();
 
-    expect(emitSpy).toHaveBeenCalledTimes(1);
-    expect(emitSpy).toHaveBeenCalledWith('TrackableElementDisplayed', payload);
+    await nextTick();
+
+    expect(emitDisplayEventElementSpy.value).not.toBe(null);
+    expect(emitDisplayEventElementSpy.value?.$el.getAttribute('data-test')).toBe('child');
   });
 
   // eslint-disable-next-line max-len
-  it('emits TrackableElementDisplayed when the child is visible only for the first time', async () => {
-    const { emitSpy, toggleChildVisibility } = renderDisplayEmitter();
-
-    await toggleChildVisibility();
+  it('provides `useEmitDisplayEvent` with the payload to emit with the display event', () => {
+    const payload = { url: 'test-url', params: { test: 'param' } };
+    renderDisplayEmitter({
+      payload
+    });
 
-    expect(emitSpy).toHaveBeenCalledTimes(1);
-    expect(emitSpy).toHaveBeenCalledWith('TrackableElementDisplayed', expect.anything());
+    expect(useEmitDisplayEvent).toHaveBeenCalled();
+    expect(emitDisplayEventPayloadSpy).toBe(payload);
+  });
 
-    await toggleChildVisibility();
-    await toggleChildVisibility();
+  it('removes the watcher on unmount', async () => {
+    const { wrapper } = renderDisplayEmitter();
 
-    expect(emitSpy).toHaveBeenCalledTimes(1);
+    wrapper.destroy();
+    await nextTick();
+    expect(unwatchDisplaySpy).toHaveBeenCalled();
   });
 });
 
@@ -117,10 +112,4 @@ interface RenderDisplayEmitterOptions {
 interface RenderDisplayEmitterAPI {
   /** The wrapper testing component instance. */
   wrapper: Wrapper<Vue>;
-  /** The wrapper for the child component inside the display emitter. */
-  child: Wrapper<Child>;
-  /** The emit spy. */
-  emitSpy: jest.Mock;
-  /** Toggle child visibility. */
-  toggleChildVisibility: () => Promise<void>;
 }
diff --git a/packages/x-components/src/components/display-emitter.vue b/packages/x-components/src/components/display-emitter.vue
index 5dc6163605..ef2787bf2e 100644
--- a/packages/x-components/src/components/display-emitter.vue
+++ b/packages/x-components/src/components/display-emitter.vue
@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, PropType, ref, watch } from 'vue';
-  import { useElementVisibility } from '@vueuse/core';
+  import { defineComponent, onUnmounted, PropType, Ref, ref } from 'vue';
+  import { MaybeElement } from '@vueuse/core';
   import { TaggingRequest } from '@empathyco/x-types';
-  import { use$x } from '../composables';
+  import { useEmitDisplayEvent } from '../composables';
   import { NoElement } from './no-element';
 
   /**
@@ -31,20 +31,13 @@
     },
     setup(props) {
       const root = ref(null);
-      const isElementVisible = useElementVisibility(root);
-      const $x = use$x();
-
-      /**
-       * Emit the display event when the element is visible and stop watching the visibility of the
-       * element.
-       */
-      const unwatchDisplay = watch(isElementVisible, newValue => {
-        if (newValue) {
-          $x.emit('TrackableElementDisplayed', props.payload);
-          unwatchDisplay();
-        }
+      const { unwatchDisplay } = useEmitDisplayEvent({
+        element: root as Ref<MaybeElement>,
+        taggingRequest: props.payload
       });
 
+      onUnmounted(unwatchDisplay);
+
       return {
         root
       };
diff --git a/packages/x-components/src/composables/__tests__/use-on-display.spec.ts b/packages/x-components/src/composables/__tests__/use-on-display.spec.ts
new file mode 100644
index 0000000000..f81f50fe5e
--- /dev/null
+++ b/packages/x-components/src/composables/__tests__/use-on-display.spec.ts
@@ -0,0 +1,250 @@
+import { ref, nextTick } from 'vue';
+import { useElementVisibility } from '@vueuse/core';
+import { useEmitDisplayEvent, useOnDisplay } from '../use-on-display';
+import { use$x } from '../use-$x';
+
+jest.mock('@vueuse/core', () => ({
+  useElementVisibility: jest.fn()
+}));
+
+const refElementVisibility = ref(false);
+(useElementVisibility as jest.Mock).mockReturnValue(refElementVisibility);
+
+jest.mock('../use-$x', () => ({
+  use$x: jest.fn()
+}));
+
+const $xEmitSpy = jest.fn();
+(use$x as jest.Mock).mockReturnValue({
+  emit: $xEmitSpy
+});
+
+describe(`testing ${useOnDisplay.name} composable`, () => {
+  beforeEach(() => {
+    refElementVisibility.value = false;
+  });
+
+  function renderUseOnDisplayTester({
+    element = document.createElement('div'),
+    triggerOnce = true
+  }: RenderUseOnDisplayTesterOptions = {}): RenderUseOnDisplayTesterAPI {
+    const callbackSpy = jest.fn();
+
+    const { isElementVisible, unwatchDisplay } = useOnDisplay({
+      element,
+      callback: callbackSpy,
+      ...(!triggerOnce && { triggerOnce })
+    });
+
+    const toggleElementVisibility = async (): Promise<void> => {
+      refElementVisibility.value = !refElementVisibility.value;
+      await nextTick();
+    };
+
+    return {
+      callbackSpy,
+      toggleElementVisibility,
+      isElementVisible,
+      unwatchDisplay
+    };
+  }
+
+  it('uses the useElementVisibility composable underneath', () => {
+    renderUseOnDisplayTester();
+    expect(useElementVisibility).toHaveBeenCalled();
+  });
+
+  it('uses a provided element for useElementVisibility to watch', () => {
+    const element = document.createElement('div');
+    renderUseOnDisplayTester({ element });
+    expect(useElementVisibility).toHaveBeenCalledWith(element);
+  });
+
+  it('triggers callback when the element changes from not visible to visible', async () => {
+    const { callbackSpy, toggleElementVisibility } = renderUseOnDisplayTester();
+
+    await toggleElementVisibility();
+
+    expect(callbackSpy).toHaveBeenCalled();
+  });
+
+  it('triggers the callback only once by default', async () => {
+    const { callbackSpy, toggleElementVisibility } = renderUseOnDisplayTester();
+
+    await toggleElementVisibility();
+    await toggleElementVisibility();
+    await toggleElementVisibility();
+
+    expect(callbackSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('can remove the triggering repetition limitation', async () => {
+    const { callbackSpy, toggleElementVisibility } = renderUseOnDisplayTester({
+      triggerOnce: false
+    });
+
+    await toggleElementVisibility();
+    await toggleElementVisibility();
+    await toggleElementVisibility();
+
+    expect(callbackSpy).toHaveBeenCalledTimes(2);
+  });
+
+  it('exposes the current visibility of the element', async () => {
+    const { toggleElementVisibility, isElementVisible } = renderUseOnDisplayTester();
+
+    expect(isElementVisible.value).toBe(false);
+
+    await toggleElementVisibility();
+    expect(isElementVisible.value).toBe(true);
+
+    await toggleElementVisibility();
+    expect(isElementVisible.value).toBe(false);
+  });
+
+  it('exposes the watch stop handle for the callback', async () => {
+    const { callbackSpy, toggleElementVisibility, unwatchDisplay } = renderUseOnDisplayTester();
+
+    unwatchDisplay();
+
+    await toggleElementVisibility();
+    expect(callbackSpy).not.toHaveBeenCalled();
+  });
+});
+
+describe(`testing ${useEmitDisplayEvent.name} composable`, () => {
+  beforeEach(() => {
+    refElementVisibility.value = false;
+    jest.clearAllMocks();
+  });
+
+  function renderUseEmitDisplayEvent({
+    element = document.createElement('div'),
+    taggingRequest = {
+      url: '',
+      params: {}
+    }
+  }: RenderUseEmitDisplayEventOptions = {}): RenderUseEmitDisplayEventAPI {
+    const { isElementVisible, unwatchDisplay } = useEmitDisplayEvent({
+      element,
+      taggingRequest
+    });
+
+    const toggleElementVisibility = async (): Promise<void> => {
+      refElementVisibility.value = !refElementVisibility.value;
+      await nextTick();
+    };
+
+    return {
+      toggleElementVisibility,
+      isElementVisible,
+      unwatchDisplay
+    };
+  }
+
+  it('uses the useElementVisibility composable underneath', () => {
+    renderUseEmitDisplayEvent();
+    expect(useElementVisibility).toHaveBeenCalled();
+  });
+
+  it('uses a provided element for useElementVisibility to watch', () => {
+    const element = document.createElement('div');
+    renderUseEmitDisplayEvent({ element });
+    expect(useElementVisibility).toHaveBeenCalledWith(element);
+  });
+
+  // eslint-disable-next-line max-len
+  it('emits `TrackableElementDisplayed` when the element is visible with the provided tagging request', async () => {
+    const { toggleElementVisibility } = renderUseEmitDisplayEvent({
+      taggingRequest: {
+        url: 'test-url',
+        params: { test: 'param' }
+      }
+    });
+
+    await toggleElementVisibility();
+
+    expect($xEmitSpy).toHaveBeenCalled();
+    expect($xEmitSpy).toHaveBeenCalledWith('TrackableElementDisplayed', {
+      params: { test: 'param' },
+      url: 'test-url'
+    });
+  });
+
+  it('emits the event only once', async () => {
+    const { toggleElementVisibility } = renderUseEmitDisplayEvent();
+
+    await toggleElementVisibility();
+    await toggleElementVisibility();
+    await toggleElementVisibility();
+
+    expect($xEmitSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('exposes the current visibility of the element', async () => {
+    const { toggleElementVisibility, isElementVisible } = renderUseEmitDisplayEvent();
+
+    expect(isElementVisible.value).toBe(false);
+
+    await toggleElementVisibility();
+    expect(isElementVisible.value).toBe(true);
+
+    await toggleElementVisibility();
+    expect(isElementVisible.value).toBe(false);
+  });
+
+  it('exposes the watch stop handle for the callback', async () => {
+    const { toggleElementVisibility, unwatchDisplay } = renderUseEmitDisplayEvent();
+
+    unwatchDisplay();
+
+    await toggleElementVisibility();
+    expect($xEmitSpy).not.toHaveBeenCalled();
+  });
+});
+
+/**
+ * Options to configure how the useOnDisplay composable should be rendered.
+ */
+type RenderUseOnDisplayTesterOptions = {
+  /** The element to watch. */
+  element?: HTMLElement;
+  /** Whether the callback should be triggered only once or not. */
+  triggerOnce?: boolean;
+};
+
+/**
+ * Tools to test how the useOnDisplay composable behaves.
+ */
+type RenderUseOnDisplayTesterAPI = {
+  /** The callback spy. */
+  callbackSpy: jest.Mock;
+  /** Toggle element visibility. */
+  isElementVisible: ReturnType<typeof useElementVisibility>;
+  /** The watch stop handle for the callback. */
+  unwatchDisplay: () => void;
+  /** Toggle element visibility. */
+  toggleElementVisibility: () => Promise<void>;
+};
+
+/**
+ * Options to configure how the useEmitDisplayEvent composable should be rendered.
+ */
+type RenderUseEmitDisplayEventOptions = {
+  /** The element to watch. */
+  element?: HTMLElement;
+  /** The payload for the `TrackableElementDisplayed` event. */
+  taggingRequest?: any;
+};
+
+/**
+ * Tools to test how the useOnDisplay composable behaves.
+ */
+type RenderUseEmitDisplayEventAPI = {
+  /** The visibility of the element. */
+  isElementVisible: ReturnType<typeof useElementVisibility>;
+  /** The watch stop handle for the callback. */
+  unwatchDisplay: () => void;
+  /** Toggle element visibility. */
+  toggleElementVisibility: () => Promise<void>;
+};
diff --git a/packages/x-components/src/composables/index.ts b/packages/x-components/src/composables/index.ts
index 587dee60a5..633617057e 100644
--- a/packages/x-components/src/composables/index.ts
+++ b/packages/x-components/src/composables/index.ts
@@ -1,2 +1,3 @@
 export * from './create-use-device.composable';
 export * from './use-$x';
+export * from './use-on-display';
diff --git a/packages/x-components/src/composables/use-on-display.ts b/packages/x-components/src/composables/use-on-display.ts
new file mode 100644
index 0000000000..6a5fe61b70
--- /dev/null
+++ b/packages/x-components/src/composables/use-on-display.ts
@@ -0,0 +1,93 @@
+import { Ref, watch, WatchStopHandle } from 'vue';
+import { MaybeElement, useElementVisibility } from '@vueuse/core';
+import { TaggingRequest } from '@empathyco/x-types';
+import { use$x } from './use-$x';
+
+/**
+ * Composable that triggers a callback whenever the provided element appears in the viewport.
+ * It can trigger the first time only or every time the element appears in the viewport.
+ *
+ * @param options - The options to customize the behavior of the composable. The element that
+ * will be watched, the callback to trigger and if the callback should be triggered only once
+ * or every time the element appears in the viewport, true by default.
+ *
+ * @returns If the element is currently visible in the viewport or not and the watcher stop handle.
+ *
+ * @public
+ */
+export function useOnDisplay({
+  element,
+  callback,
+  triggerOnce = true
+}: UseOnDisplayOptions): UseOnDisplayReturn {
+  const isElementVisible = useElementVisibility(element);
+
+  const unwatchDisplay = watch(isElementVisible, newValue => {
+    if (newValue) {
+      callback();
+      if (triggerOnce) {
+        unwatchDisplay();
+      }
+    }
+  });
+
+  return {
+    isElementVisible,
+    unwatchDisplay
+  };
+}
+
+/**
+ * Composable that emits a `TrackableElementDisplayed` event whenever the provided element
+ * appears in the viewport for the first time.
+ *
+ * @param options - The options to customize the behavior of the composable. The element that
+ * will be watched and the tagging request to emit.
+ *
+ * @returns If the element is currently visible in the viewport or not and the watcher stop handle.
+ *
+ * @public
+ */
+export function useEmitDisplayEvent({
+  element,
+  taggingRequest
+}: UseEmitDisplayEventOptions): UseOnDisplayReturn {
+  const $x = use$x();
+
+  const { isElementVisible, unwatchDisplay } = useOnDisplay({
+    element,
+    callback: () => {
+      $x.emit('TrackableElementDisplayed', taggingRequest);
+    }
+  });
+
+  return {
+    isElementVisible,
+    unwatchDisplay
+  };
+}
+
+/**
+ * Options for the {@link useOnDisplay} composable.
+ */
+type UseOnDisplayOptions = {
+  element: HTMLElement | Ref<MaybeElement>;
+  callback: () => void;
+  triggerOnce?: boolean;
+};
+
+/**
+ * Return type of the {@link useOnDisplay} composable.
+ */
+type UseOnDisplayReturn = {
+  isElementVisible: Ref<boolean>;
+  unwatchDisplay: WatchStopHandle;
+};
+
+/**
+ * Options for the {@link useEmitDisplayEvent} composable.
+ */
+type UseEmitDisplayEventOptions = {
+  element: UseOnDisplayOptions['element'];
+  taggingRequest: TaggingRequest;
+};