Skip to main content

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.

Use this guide when you want Cevoid gallery interactions to show up in Google Analytics. Cevoid galleries use the Analytics SDK internally and emit browser CustomEvents that you can listen for and forward to GA. This is useful when you want:
  • Cevoid gallery interactions in GA4 reports
  • A lightweight bridge from Cevoid events into your existing GTM or GA setup
  • To reuse the browser events the SDK already emits instead of duplicating tracking logic

​
How it works

When the Analytics SDK tracks an event, it also emits a browser event on window unless emitBrowserEvents is disabled. The browser event name format is: 
cevoid:<event-name>
Examples:
  • cevoid:widget.load
  • cevoid:post.view
  • cevoid:post.click
  • cevoid:product.click.tag
  • cevoid:gallery.load_more
  • cevoid:sale.complete
The event payload is available on event.detail. 
window.addEventListener('cevoid:post.click', (event) => {
  console.log(event.detail)
})
For the full event list and field reference, use Tracking Events.

​
Before you start

If you use Cevoid galleries, the browser events are already emitted for you. You only need:
  • Google Analytics or Google Tag Manager is already installed on the site
If your galleries use the Analytics SDK internally, you do not need to call trackEvent() yourself just to forward those gallery events to GA. You only need to listen for the emitted browser events.
If you use the SDK manually outside Cevoid galleries, make sure browser events have not been disabled with emitBrowserEvents: false.

​
Option 1: Forward directly with gtag

Use this approach when GA4 is installed directly with gtag(). 
<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>
You can repeat this pattern for any Cevoid browser event. Recommended GA naming pattern:
  • GA event name: convert dots to underscores, for example cevoid_post_click
  • Event params: choose a stable GA parameter naming convention and map event.detail into it consistently

​
Option 2: Forward through Google Tag Manager

Use this approach when your site already routes analytics through GTM. 
<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, such as widgetId, widgetType, and postId, to GA4 event parameters
This is usually the easiest setup if your team already manages analytics through GTM.
Start with the events that are easiest to explain and report on:
  • post.click
  • product.click.tag
  • product.click.post
  • product.click.card
  • gallery.load_more
  • gallery.upload_cta_click
  • sale.complete
You can also forward impression-style events such as:
  • widget.view
  • post.view
But these are often higher-volume, so decide first whether you want that level of event volume in GA. 
<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>
This pattern works well when you want a consistent bridge from Cevoid events into GA without writing one listener per event.
If you only want to forward events from a specific gallery, filter by widgetId. 
<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>
This is useful when different galleries should map to different GA events or reporting segments.

​
Suggested GA parameter mapping

Cevoid fieldGA parameter
widgetIdwidget_id
widgetTypewidget_type
postIdpost_id
productIdproduct_id
postPositionpost_position
marketIdmarket_id
loadMoreTypeload_more_type
You can keep the same parameter names in GA to make debugging simpler.

​
Common mistakes

  • Re-implementing Cevoid gallery tracking instead of listening for the browser events that galleries already emit
  • Renaming payload fields before forwarding them without a clear reporting reason
  • Sending every high-volume impression event into GA without deciding whether you need that volume
  • Forgetting to check event.detail for the actual Cevoid payload