https://github.com/adobe-rnd/aem-rum-visualizer

A simple heatmap overlay plugin to show RUM data on top of the current page
https://github.com/adobe-rnd/aem-rum-visualizer

Last synced: 3 days ago
JSON representation

A simple heatmap overlay plugin to show RUM data on top of the current page

• Host: GitHub
• URL: https://github.com/adobe-rnd/aem-rum-visualizer
• Owner: adobe-rnd
• Created: 2024-07-31T19:09:01.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-09-06T21:41:43.000Z (5 months ago)
• Last Synced: 2024-09-07T00:10:28.148Z (5 months ago)
• Language: JavaScript
• Size: 63.5 KB
• Stars: 0
• Watchers: 14
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# aem-rum-visualizer

A simple heatmap overlay plugin to show RUM data on top of the current page

Setup

- Add the following import to the top of your scripts/scripts.js file

``` js

import { createRUMVisualizer } from "index.js";

```

- Add the following line to the end of the same file

``` js

createRUMVisualizer(siteName);

ex: createRUMVisualizer('https://www.adobe.com');

```

**NOTE**: If the selector from RUM data isn't found on the page, those metrics will not be rendered on the page, to attribute all those metrics to a default selector, you can pass an optional default selector like below

``` js

createRUMVisualizer(siteName, defaultSelector);

ex: createRUMVisualizer('https://www.adobe.com', 'a.button.hero');

```

Add the following lines to config.json inside tools/sidekick

``` js

    {

      "id": "rum-visualizer",

      "title": "RUM Visualizer",

      "environments": [ "dev", "preview" ],

      "event": "visualizer"

    }

```

- Update the actualWebsiteName variable at the top of ndex.js to the URL of the site you are using

``` js

 const actualWebsiteName = 'https://main--wknd--hlxsites.hlx.page/';

```