HoloStep Developer Docs

Appearance

Google Analytics 4 (GA4) Integration ​

Track HoloStep 3D viewer interactions in Google Analytics 4 to understand how users engage with your product visualizations.

Overview ​

HoloStep automatically sends events to GA4 when users interact with your 3D product viewers. This integration supports:

  • Existing gtag.js - If GA4 is already on your site, HoloStep uses it automatically
  • Google Tag Manager - Via dataLayer events
  • Dedicated Measurement ID - Send events to a specific GA4 property

Tracked Events ​

Event NameTriggerGA4 Event
3D Viewer OpenUser opens 3D viewerholostep_3d_open
3D InteractionUser rotates/zooms modelholostep_3d_interaction
AR Mode OpenUser launches ARholostep_ar_open
Measurement ToolUser opens measurementsholostep_measurement_open
Animation PlayUser plays animationholostep_animation_play
Variant SelectUser changes variantholostep_variant_select
Page ViewPage with HoloStep loadspage_view

Quick Start ​

If you already have GA4 configured on your website, you can enable HoloStep tracking without any additional configuration:

  1. Go to Settings → Integrations
  2. Click Configure on the Google Analytics 4 card
  3. Enter a name (e.g., "My GA4")
  4. Leave the Measurement ID empty (HoloStep will use your existing gtag)
  5. Click Create Integration
  6. Toggle the integration ON

That's it! HoloStep events will flow to your existing GA4 property.

Option B: Use a Specific Measurement ID ​

If you want to send HoloStep events to a dedicated GA4 property:

  1. Get your Measurement ID from GA4 (see below)
  2. Go to Settings → Integrations
  3. Click Configure on the Google Analytics 4 card
  4. Enter your Measurement ID (format: G-XXXXXXXXXX)
  5. Click Create Integration
  6. Toggle the integration ON

Getting Your Measurement ID ​

If you need to specify a Measurement ID:

  1. Go to Google Analytics
  2. Click Admin (gear icon) in the bottom left
  3. In the Property column, click Data Streams
  4. Select your web data stream
  5. Copy the Measurement ID (format: G-XXXXXXXXXX)

Verify in GA4 ​

Real-Time Reports ​

  1. Go to GA4 → Reports → Realtime
  2. Open your website with HoloStep
  3. Interact with a 3D viewer
  4. You should see holostep_* events appearing

DebugView ​

For detailed debugging:

  1. Go to GA4 → Admin → DebugView
  2. Install the GA Debugger Chrome extension
  3. Enable debug mode and interact with your 3D viewer
  4. Events will appear with full parameter details

Using Google Tag Manager ​

If you use GTM without direct gtag.js, you can use our GTM container template.

Download and Import ​

  1. Download the HoloStep GTM Container
  2. In GTM, go to Admin → Import Container
  3. Select the downloaded JSON file
  4. Choose Merge → Rename conflicting tags
  5. Click Confirm

Configure the GA4 Tag ​

After importing:

  1. Open the imported HoloStep - GA4 Event tag
  2. Update the Measurement ID to your GA4 property
  3. Save and Publish your container

How It Works ​

HoloStep pushes events to the dataLayer:

javascript
dataLayer.push({
  event: 'holostep_event',
  holostep_event_name: 'holostep_3d_open',
  holostep_action: 'viewer_open',
  holostep_scene_id: '12345',
  holostep_scene_name: 'Product Name',
  holostep_domain: 'yoursite.com'
});

The GTM container includes:

  • Trigger: Fires on holostep_event
  • Variables: Extract event parameters
  • GA4 Tag: Sends event to your property

Event Parameters ​

All HoloStep events include these parameters:

ParameterDescriptionExample
page_locationCurrent page URLhttps://shop.com/product
session_idHoloStep session IDabc123
sceneId3D scene identifier12345
sceneNameProduct/scene nameModern Chair
traffic_sourceReferrer sourcegoogle

Troubleshooting ​

Events Not Appearing ​

IssueSolution
No events in RealtimeWait 30 seconds; check integration is enabled
Measurement ID errorVerify format starts with G-
No gtag on pageCheck that GA4 is properly installed on your website

Debug Checklist ​

  1. Browser Console: Look for [HoloStep] GA4 initialized message
  2. Network Tab: Filter for google-analytics.com requests
  3. GA4 DebugView: Enable debug mode for detailed event inspection
Events show in Realtime but not in Reports

Standard GA4 reports can take 24-48 hours to process data. Use Realtime or DebugView for immediate verification.

Duplicate events appearing

Check if you have multiple GA4 implementations (e.g., both direct gtag and GTM). HoloStep detects existing GA4 and won't duplicate if gtag is present.