# AnalyticsAnalysisOverlay

*Category:* Components
*Section:* Interaction
*Source:* https://uikit.developers.rio.cloud/#/components/analyticsAnalysisOverlay
*Captured:* 2026-04-27T14:57:28.096Z

Development overlay for visualizing tracked GA elements directly in the viewport. It scans DOM nodes with tracking data attributes and overlays aggregated metrics from uploaded analytics CSV files. See the new helper demo for getTrackingAttributes.

## AnalyticsAnalysisOverlay

Download the demo CSV and upload it in the draggable overlay banner to see metrics mapped to the tracked elements below.

Download demo CSV

### Example: Example 1

Card with visibility tracking
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.
Button

Button with click tracking
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.
Button
Button with autoTrackingKey
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.
Button

#### React (tsx)

```tsx
import Button from '@rio-cloud/rio-uikit/Button';
import { getTrackingAttributes } from '@rio-cloud/rio-uikit/googleAnalyticsUtils';
import { FormattedMessage, IntlProvider } from 'react-intl';

import { analyticsAnalysisOverlayExampleMessages } from './AnalyticsAnalysisOverlayExampleData';

const trackedCardClassName = 'card bg-white border border-color-light rounded padding-15 box-shadow-sm width-100pct';

export default () => (
    <div className='position-relative padding-15 bg-color-lightest rounded'>
        <IntlProvider locale='en-GB' messages={analyticsAnalysisOverlayExampleMessages}>
            <div className='display-grid gap-20 grid-auto-fit-300'>
                <div
                    className='display-grid gap-15'
                    style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))' }}
                >
                    <div
                        className={trackedCardClassName}
                        {...getTrackingAttributes({
                            trigger: 'visibility',
                            category: 'uikit demo',
                            action: 'card seen',
                            label: 'vehicle_overview',
                        })}
                    >
                        <h6 className='margin-top-0'>Card with visibility tracking</h6>
                        <p className='margin-bottom-10'>
                            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
                            invidunt ut labore et dolore.
                        </p>
                        <Button
                            as='a'
                            bsStyle='default'
                            href='https://rio.cloud/en?utm_source=uikit_Demo&utm_medium=button&utm_campaign=analytics_demo&utm_content=analytics_overlay_examples'
                            target='_blank'
                            rel='noreferrer noopener'
                            {...getTrackingAttributes({
                                trigger: 'click',
                                category: 'uikit demo',
                                action: 'button click',
                                label: 'open_vehicle_details',
                            })}
                        >
                            Button
                        </Button>
                    </div>
                </div>

                <div
                    className={trackedCardClassName}
                    {...getTrackingAttributes({
                        trigger: 'click',
                        category: 'uikit demo',
                        action: 'button click',
                        label: 'intl-msg:analyticsAnalysisOverlay.data.cardB.title',
                    })}
                >
                    <h6 className='margin-top-0'>
                        <FormattedMessage id='intl-msg:analyticsAnalysisOverlay.data.cardB.title' />
                    </h6>
                    <p className='margin-bottom-10'>
                        <FormattedMessage id='intl-msg:analyticsAnalysisOverlay.data.cardB.description' />
                    </p>
                    <Button
                        bsStyle='default'
                        {...getTrackingAttributes({
                            trigger: 'click',
                            category: 'uikit demo',
                            action: 'button click',
                            label: 'intl-msg:analyticsAnalysisOverlay.data.cardB.button',
                        })}
                    >
                        <FormattedMessage id='intl-msg:analyticsAnalysisOverlay.data.cardB.button' />
                    </Button>
                </div>

                <div className={trackedCardClassName}>
                    <h6 className='margin-top-0'>
                        <FormattedMessage id='intl-msg:analyticsAnalysisOverlay.data.cardC.title' />
                    </h6>
                    <p className='margin-bottom-10'>
                        <FormattedMessage id='intl-msg:analyticsAnalysisOverlay.data.cardC.description' />
                    </p>
                    <Button bsStyle='default' autoTrackingKey='intl-msg:analyticsAnalysisOverlay.data.cardC.button'>
                        <FormattedMessage id='intl-msg:analyticsAnalysisOverlay.data.cardC.button' />
                    </Button>
                </div>
            </div>
        </IntlProvider>
    </div>
);
```

#### HTML (html)

```html
<div class="position-relative padding-15 bg-color-lightest rounded">
    <div class="display-grid gap-20 grid-auto-fit-300">
        <div class="display-grid gap-15" style="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));">
            <div class="card bg-white border border-color-light rounded padding-15 box-shadow-sm width-100pct" data-track-ga-event-trigger="visibility" data-track-ga-event-category="uikit demo" data-track-ga-event-action="card seen" data-track-ga-event-label="vehicle_overview">
                <h6 class="margin-top-0">Card with visibility tracking</h6>
                <p class="margin-bottom-10">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.</p>
                <a href="https://rio.cloud/en?utm_source=uikit_Demo&amp;utm_medium=button&amp;utm_campaign=analytics_demo&amp;utm_content=analytics_overlay_examples" target="_blank" rel="noreferrer noopener" data-track-ga-event-trigger="click" data-track-ga-event-category="uikit demo" data-track-ga-event-action="button click" data-track-ga-event-label="open_vehicle_details" class="btn btn-default gap-0 btn-component" tabindex="0">Button</a>
            </div>
        </div>
        <div class="card bg-white border border-color-light rounded padding-15 box-shadow-sm width-100pct" data-track-ga-event-trigger="click" data-track-ga-event-category="uikit demo" data-track-ga-event-action="button click" data-track-ga-event-label="intl-msg:analyticsAnalysisOverlay.data.cardB.title">
            <h6 class="margin-top-0">Button with click tracking</h6>
            <p class="margin-bottom-10">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.</p>
            <button type="button" data-track-ga-event-trigger="click" data-track-ga-event-category="uikit demo" data-track-ga-event-action="button click" data-track-ga-event-label="intl-msg:analyticsAnalysisOverlay.data.cardB.button" class="btn btn-default btn-component" tabindex="0">Button</button>
        </div>
        <div class="card bg-white border border-color-light rounded padding-15 box-shadow-sm width-100pct">
            <h6 class="margin-top-0">Button with autoTrackingKey</h6>
            <p class="margin-bottom-10">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.</p>
            <button type="button" data-track-ga-event-trigger="click" data-track-ga-event-category="button autoTracking" data-track-ga-event-action="button click" data-track-ga-event-label="intl-msg:analyticsAnalysisOverlay.data.cardC.button" class="btn btn-default btn-component" tabindex="0">Button</button>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| overlayBackgroundOpacity | number | 0.5 | Opacity of the fullscreen analytics overlay backdrop. Values are clamped to the range 0 to 1. |
| bannerStartCoordinates | AnalysisBannerPosition | undefined | Optional initial viewport coordinates for the draggable analytics banner. When omitted, the banner starts at top: 70px, left: 50% with translateX(-50%). |

### Example: Example 2

Expander Row 1
Expander Card 1
This card is inside row 1 and is tracked when it becomes visible.
Row 1 Button

Expander Row 2

Expander Row 3

#### React (tsx)

```tsx
import Button from '@rio-cloud/rio-uikit/Button';
import ExpanderList from '@rio-cloud/rio-uikit/ExpanderList';
import ExpanderPanel from '@rio-cloud/rio-uikit/ExpanderPanel';
import { getTrackingAttributes } from '@rio-cloud/rio-uikit/googleAnalyticsUtils';

const trackedPanelClassName = 'max-width-300';

export default () => {
    const items = [
        {
            id: 'expander-row-1',
            header: 'Expander Row 1',
            open: true,
            trackingAttributes: getTrackingAttributes({
                trigger: 'click',
                category: 'uikit demo',
                action: 'button click',
                label: 'expander_row_1_header',
            }),
            body: (
                <ExpanderPanel
                    title='Expander Card 1'
                    open
                    bsStyle='info'
                    className={trackedPanelClassName}
                    trackingAttributes={getTrackingAttributes({
                        trigger: 'visibility',
                        category: 'uikit demo',
                        action: 'card seen',
                        label: 'expander_row_1_card',
                    })}
                >
                    <p className='margin-bottom-10'>
                        This card is inside row 1 and is tracked when it becomes visible.
                    </p>
                    <Button
                        bsStyle='info'
                        {...getTrackingAttributes({
                            trigger: 'click',
                            category: 'uikit demo',
                            action: 'button click',
                            label: 'expander_row_1_button',
                        })}
                    >
                        Row 1 Button
                    </Button>
                </ExpanderPanel>
            ),
        },
        {
            id: 'expander-row-2',
            header: 'Expander Row 2',
            trackingAttributes: getTrackingAttributes({
                trigger: 'click',
                category: 'uikit demo',
                action: 'button click',
                label: 'expander_row_2_header',
            }),
            body: (
                <ExpanderPanel
                    title='Expander Card 2'
                    open
                    bsStyle='success'
                    className={trackedPanelClassName}
                    trackingAttributes={getTrackingAttributes({
                        trigger: 'visibility',
                        category: 'uikit demo',
                        action: 'card seen',
                        label: 'expander_row_2_card',
                    })}
                >
                    <p className='margin-bottom-10'>
                        This card is inside row 2 and is tracked when it becomes visible.
                    </p>
                    <Button
                        bsStyle='success'
                        {...getTrackingAttributes({
                            trigger: 'click',
                            category: 'uikit demo',
                            action: 'button click',
                            label: 'expander_row_2_button',
                        })}
                    >
                        Row 2 Button
                    </Button>
                </ExpanderPanel>
            ),
        },
        {
            id: 'expander-row-3',
            header: 'Expander Row 3',
            trackingAttributes: getTrackingAttributes({
                trigger: 'click',
                category: 'uikit demo',
                action: 'button click',
                label: 'expander_row_3_header',
            }),
            body: (
                <ExpanderPanel
                    title='Expander Card 3'
                    open
                    bsStyle='danger'
                    className={trackedPanelClassName}
                    trackingAttributes={getTrackingAttributes({
                        trigger: 'visibility',
                        category: 'uikit demo',
                        action: 'card seen',
                        label: 'expander_row_3_card',
                    })}
                >
                    <p className='margin-bottom-10'>
                        This card is inside row 3 and is tracked when it becomes visible.
                    </p>
                    <Button
                        bsStyle='danger'
                        {...getTrackingAttributes({
                            trigger: 'click',
                            category: 'uikit demo',
                            action: 'button click',
                            label: 'expander_row_3_button',
                        })}
                    >
                        Row 3 Button
                    </Button>
                </ExpanderPanel>
            ),
        },
    ];

    return (
        <div className='padding-15 bg-color-lightest rounded'>
            <ExpanderList items={items} />
        </div>
    );
};
```

#### HTML (html)

```html
<div class="padding-15 bg-color-lightest rounded">
    <ul class="expander-list list-group rounded border">
        <li class="list-group-item expandable open">
            <div class="expander-list-header" aria-label="expander item header" data-track-ga-event-trigger="click" data-track-ga-event-category="uikit demo" data-track-ga-event-action="button click" data-track-ga-event-label="expander_row_1_header">
                <span class="expander-list-header-content">Expander Row 1</span>
                <span class="expander-icon rioglyph rioglyph-chevron-down">
                </span>
            </div>
            <div class="collapse display-block width-100pct" style="opacity: 1; height: auto;">
                <div class="expander-list-body-wrapper">
                    <div class="expander-list-body" aria-label="expander item body">
                        <div class="expander-panel panel panel-info max-width-300" aria-label="expander panel">
                            <div class="panel-heading open" aria-label="panel heading" data-track-ga-event-trigger="visibility" data-track-ga-event-category="uikit demo" data-track-ga-event-action="card seen" data-track-ga-event-label="expander_row_1_card">
                                <span class="title">Expander Card 1</span>
                                <span class="expander-icon rioglyph rioglyph-chevron-down">
                                </span>
                            </div>
                            <div class="collapse display-block width-100pct" style="opacity: 1; height: auto;">
                                <div>
                                    <div class="panel-body">
                                        <p class="margin-bottom-10">This card is inside row 1 and is tracked when it becomes visible.</p>
                                        <button type="button" data-track-ga-event-trigger="click" data-track-ga-event-category="uikit demo" data-track-ga-event-action="button click" data-track-ga-event-label="expander_row_1_button" class="btn btn-info btn-component" tabindex="0">Row 1 Button</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <li class="list-group-item expandable">
            <div class="expander-list-header" aria-label="expander item header" data-track-ga-event-trigger="click" data-track-ga-event-category="uikit demo" data-track-ga-event-action="button click" data-track-ga-event-label="expander_row_2_header">
                <span class="expander-list-header-content">Expander Row 2</span>
                <span class="expander-icon rioglyph rioglyph-chevron-down">
                </span>
            </div>
        </li>
        <li class="list-group-item expandable">
            <div class="expander-list-header" aria-label="expander item header" data-track-ga-event-trigger="click" data-track-ga-event-category="uikit demo" data-track-ga-event-action="button click" data-track-ga-event-label="expander_row_3_header">
                <span class="expander-list-header-content">Expander Row 3</span>
                <span class="expander-icon rioglyph rioglyph-chevron-down">
                </span>
            </div>
        </li>
    </ul>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| overlayBackgroundOpacity | number | 0.5 | Opacity of the fullscreen analytics overlay backdrop. Values are clamped to the range 0 to 1. |
| bannerStartCoordinates | AnalysisBannerPosition | undefined | Optional initial viewport coordinates for the draggable analytics banner. When omitted, the banner starts at top: 70px, left: 50% with translateX(-50%). |

### Example: Example 3

Open dialog

#### React (tsx)

```tsx
import { useState } from 'react';

import Button from '@rio-cloud/rio-uikit/Button';
import Dialog from '@rio-cloud/rio-uikit/Dialog';
import { getTrackingAttributes } from '@rio-cloud/rio-uikit/googleAnalyticsUtils';

const dialogTitle = 'Analytics Overlay Demo Dialog';

export default () => {
    const [isDialogOpen, setIsDialogOpen] = useState(false);

    const closeDialog = () => {
        setIsDialogOpen(false);
    };

    return (
        <div className='padding-15 bg-color-lightest rounded'>
            <Button
                bsStyle='primary'
                onClick={() => setIsDialogOpen(true)}
                {...getTrackingAttributes({
                    trigger: 'click',
                    category: 'uikit demo',
                    action: 'button click',
                    label: 'analytics_overlay_dialog_open',
                })}
            >
                Open dialog
            </Button>

            <Dialog
                show={isDialogOpen}
                title={dialogTitle}
                showCloseButton
                onClose={closeDialog}
                body={
                    <div
                        {...getTrackingAttributes({
                            trigger: 'visibility',
                            category: 'uikit demo',
                            action: 'dialog seen',
                            label: 'analytics_overlay_dialog_body',
                        })}
                    >
                        <p className='margin-bottom-10'>
                            This is dummy dialog content for the AnalyticsAnalysisOverlay demo.
                        </p>
                        <p className='margin-0'>
                            Upload the demo CSV in the overlay banner and inspect tracked values on this dialog.
                        </p>
                    </div>
                }
                footer={
                    <div className='display-flex justify-content-end gap-10'>
                        <Button
                            bsStyle='default'
                            onClick={closeDialog}
                            {...getTrackingAttributes({
                                trigger: 'click',
                                category: 'uikit demo',
                                action: 'button click',
                                label: 'analytics_overlay_dialog_cancel',
                            })}
                        >
                            Cancel
                        </Button>
                        <Button
                            bsStyle='primary'
                            onClick={closeDialog}
                            {...getTrackingAttributes({
                                trigger: 'click',
                                category: 'uikit demo',
                                action: 'button click',
                                label: 'analytics_overlay_dialog_confirm',
                            })}
                        >
                            Save
                        </Button>
                    </div>
                }
            />
        </div>
    );
};
```

#### HTML (html)

```html
<div class="padding-15 bg-color-lightest rounded">
    <button type="button" data-track-ga-event-trigger="click" data-track-ga-event-category="uikit demo" data-track-ga-event-action="button click" data-track-ga-event-label="analytics_overlay_dialog_open" class="btn btn-primary btn-component" tabindex="0">Open dialog</button>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| overlayBackgroundOpacity | number | 0.5 | Opacity of the fullscreen analytics overlay backdrop. Values are clamped to the range 0 to 1. |
| bannerStartCoordinates | AnalysisBannerPosition | undefined | Optional initial viewport coordinates for the draggable analytics banner. When omitted, the banner starts at top: 70px, left: 50% with translateX(-50%). |

### Example: Was this helpful?

Was this helpful?
Not really Kind of Yes, it was Reset

#### React (tsx)

```tsx
import { useState } from 'react';

import { motion } from '@rio-cloud/rio-uikit/motion';
import Button from '@rio-cloud/rio-uikit/Button';
import Fade from '@rio-cloud/rio-uikit/Fade';
import FeedbackInlineButtons from '@rio-cloud/rio-uikit/FeedbackInlineButtons';
import { getTrackingAttributes } from '@rio-cloud/rio-uikit/googleAnalyticsUtils';

export default () => {
    const [hasVoted, setHasVoted] = useState(false);

    const handleVote = () => {
        setHasVoted(true);
    };

    return (
        <div
            className='padding-15 bg-color-lightest rounded'
            {...getTrackingAttributes({
                trigger: 'visibility',
                category: 'uikit demo',
                action: 'card seen',
                label: 'feedback_subtle_section',
            })}
        >
            <div className='height-40 display-flex align-items-center'>
                <Fade>
                    {hasVoted ? (
                        <motion.div
                            initial={{ opacity: 0, x: 20 }}
                            animate={{ opacity: 1, x: 0 }}
                            className='display-flex gap-5 align-items-center'
                        >
                            <div className='text-color-success text-size-18 line-height-20'>
                                <span className='rioglyph rioglyph-ok-sign' />
                            </div>
                            <div className='text-color-dark'>Thank you for your feedback</div>
                        </motion.div>
                    ) : (
                        <FeedbackInlineButtons
                            headline='Was this helpful?'
                            buttons={[
                                <Button
                                    key='no'
                                    bsStyle='muted'
                                    bsSize='sm'
                                    onClick={handleVote}
                                    {...getTrackingAttributes({
                                        trigger: 'click',
                                        category: 'uikit demo',
                                        action: 'button click',
                                        label: 'feedback_subtle_not_really',
                                    })}
                                >
                                    <span className='rioglyph rioglyph-face-frown text-color-danger' />
                                    <span>Not really</span>
                                </Button>,
                                <Button
                                    key='kinda'
                                    bsStyle='muted'
                                    bsSize='sm'
                                    onClick={handleVote}
                                    {...getTrackingAttributes({
                                        trigger: 'click',
                                        category: 'uikit demo',
                                        action: 'button click',
                                        label: 'feedback_subtle_kind_of',
                                    })}
                                >
                                    <span className='rioglyph rioglyph-face-neutral text-color-warning' />
                                    <span>Kind of</span>
                                </Button>,
                                <Button
                                    key='yes'
                                    bsStyle='muted'
                                    bsSize='sm'
                                    onClick={handleVote}
                                    {...getTrackingAttributes({
                                        trigger: 'click',
                                        category: 'uikit demo',
                                        action: 'button click',
                                        label: 'feedback_subtle_yes_it_was',
                                    })}
                                >
                                    <span className='rioglyph rioglyph-face-smile text-color-success' />
                                    <span>Yes, it was</span>
                                </Button>,
                            ]}
                        />
                    )}
                </Fade>
            </div>
            <Button
                bsSize='sm'
                className='margin-top-25'
                onClick={() => setHasVoted(false)}
                {...getTrackingAttributes({
                    trigger: 'click',
                    category: 'uikit demo',
                    action: 'button click',
                    label: 'feedback_subtle_reset',
                })}
            >
                Reset
            </Button>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="padding-15 bg-color-lightest rounded" data-track-ga-event-trigger="visibility" data-track-ga-event-category="uikit demo" data-track-ga-event-action="card seen" data-track-ga-event-label="feedback_subtle_section">
    <div class="height-40 display-flex align-items-center">
        <div style="opacity: 1; transform: none;">
            <div class="display-flex flex-wrap align-items-center column-gap-15 row-gap-5 user-select-none">
                <div class="text-color-dark">Was this helpful?</div>
                <div class="btn-toolbar gap-5">
                    <button type="button" data-track-ga-event-trigger="click" data-track-ga-event-category="uikit demo" data-track-ga-event-action="button click" data-track-ga-event-label="feedback_subtle_not_really" class="btn btn-muted btn-sm btn-component" tabindex="0">
                        <span class="rioglyph rioglyph-face-frown text-color-danger">
                        </span>
                        <span>Not really</span>
                    </button>
                    <button type="button" data-track-ga-event-trigger="click" data-track-ga-event-category="uikit demo" data-track-ga-event-action="button click" data-track-ga-event-label="feedback_subtle_kind_of" class="btn btn-muted btn-sm btn-component" tabindex="0">
                        <span class="rioglyph rioglyph-face-neutral text-color-warning">
                        </span>
                        <span>Kind of</span>
                    </button>
                    <button type="button" data-track-ga-event-trigger="click" data-track-ga-event-category="uikit demo" data-track-ga-event-action="button click" data-track-ga-event-label="feedback_subtle_yes_it_was" class="btn btn-muted btn-sm btn-component" tabindex="0">
                        <span class="rioglyph rioglyph-face-smile text-color-success">
                        </span>
                        <span>Yes, it was</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <button type="button" data-track-ga-event-trigger="click" data-track-ga-event-category="uikit demo" data-track-ga-event-action="button click" data-track-ga-event-label="feedback_subtle_reset" class="btn btn-default btn-sm btn-component margin-top-25" tabindex="0">Reset</button>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| overlayBackgroundOpacity | number | 0.5 | Opacity of the fullscreen analytics overlay backdrop. Values are clamped to the range 0 to 1. |
| bannerStartCoordinates | AnalysisBannerPosition | undefined | Optional initial viewport coordinates for the draggable analytics banner. When omitted, the banner starts at top: 70px, left: 50% with translateX(-50%). |