> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cevoid.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Forward Browser Events to Google Analytics

> Listen to Cevoid browser events and forward them into GA4 or GTM without duplicating gallery tracking calls.

Use this page when you already use Cevoid galleries or cards and want their emitted browser events in GA4 or GTM. If you need to manually send Cevoid widget events from custom code, use [Manual Event Tracking](./track-events) instead.

## Default gallery behavior

Cevoid galleries and cards use the UGC tracking surface internally and emit browser [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent)s by default.

That means you usually do **not** need to call [`trackEvent()`](../analytics-sdk/api#trackeventname-data) yourself just to forward gallery interactions to GA.

The browser event name format is:

```text theme={"theme":{"light":"github-light","dark":"github-dark"}}
cevoid:<event-name>
```

Examples:

* `cevoid:widget.load`
* `cevoid:post.click`
* `cevoid:product.click.tag`
* `cevoid:gallery.load_more`
* `cevoid:sale.complete`

The forwarded payload is available on [`event.detail`](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail).

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
window.addEventListener('cevoid:post.click', (event) => {
  console.log(event.detail)
})
```

## Consent note

Browser events are emitted when the SDK tracking call runs unless `emitBrowserEvents` is disabled.

Consent affects whether tracked events get a Cevoid `session_id`. It does not prevent the browser [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) itself from being emitted.

## Option 1: Forward directly with `gtag`

Use this when GA4 is installed directly with `gtag()`.

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<script>
  window.addEventListener('cevoid:post.click', function (event) {
    gtag('event', 'cevoid_post_click', {
      widget_id: event.detail.widgetId,
      widget_type: event.detail.widgetType,
      post_id: event.detail.postId,
      post_position: event.detail.postPosition
    })
  })
</script>
```

## Option 2: Forward through GTM

Use this when your site already routes analytics through Google Tag Manager.

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<script>
  window.addEventListener('cevoid:post.click', function (event) {
    window.dataLayer = window.dataLayer || []
    window.dataLayer.push({
      event: 'cevoid_post_click',
      cevoid_event_name: 'post.click',
      ...event.detail
    })
  })
</script>
```

Then in GTM:

1. Create a Custom Event trigger for `cevoid_post_click`
2. Create a GA4 Event tag
3. Map the pushed fields to GA4 parameters

## Recommended events to forward

Start with the lower-volume action events that are easiest to report on:

* [`post.click`](../analytics-sdk/events/post-click)
* [`product.click.tag`](../analytics-sdk/events/product-click-tag)
* [`product.click.post`](../analytics-sdk/events/product-click-post)
* [`product.click.card`](../analytics-sdk/events/product-click-card)
* [`gallery.load_more`](../analytics-sdk/events/gallery-load-more)
* [`gallery.upload_cta_click`](../analytics-sdk/events/gallery-upload-cta-click)
* [`sale.complete`](../analytics-sdk/events/sale-complete)

Forward impression-style events like [`widget.view`](../analytics-sdk/events/widget-view) or [`post.view`](../analytics-sdk/events/post-view) only if you want that extra volume in GA.

## Example: forward multiple events

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<script>
  const cevoidEvents = [
    'post.click',
    'product.click.tag',
    'gallery.load_more',
    'gallery.upload_cta_click'
  ]

  cevoidEvents.forEach((name) => {
    window.addEventListener(`cevoid:${name}`, function (event) {
      gtag('event', `cevoid_${name.replace(/\./g, '_')}`, {
        cevoid_event_name: name,
        ...event.detail
      })
    })
  })
</script>
```

## Example: only forward one gallery

```html theme={"theme":{"light":"github-light","dark":"github-dark"}}
<script>
  window.addEventListener('cevoid:post.click', function (event) {
    if (event.detail.widgetId !== 'gallery-homepage') {
      return
    }

    gtag('event', 'cevoid_post_click', {
      widget_id: event.detail.widgetId,
      post_id: event.detail.postId
    })
  })
</script>
```

## Related

* [Using Cevoid Galleries](./using-cevoid-galleries)
* [SDK API](../analytics-sdk/api)
* [Event Types](../analytics-sdk/events/index)