GA4 - Frontend Tracking

Track Guideflow demo interactions on your website by connecting Guideflow JS to GA4. This method is quick to set up and captures engagement events like demo views, clicks, and step progression.

Make sure Guideflow JS is installed on your website before setting up frontend tracking. The Guideflow JS snippet must be installed after your existing GA4 tag.

How to set up:

• Install Guideflow JS on your website after your existing GA4 tag:

<script src="https://app.guideflow.com/assets/guideflow.js"></script>

• Add the following script to your right after the Guideflow JS snippet:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    guideflow.onEvent(eventData => {
      gtag("event", 'guideflow_event', eventData);
    })
  });
</script>

Once installed, Guideflow events will appear automatically in GA4 under Events, no further configuration needed in Google Analytics.

Event data fields:

Field	Description
flow_id	Unique ID of the Guideflow
flow_title	Title of the Guideflow
rawType	Raw event type as triggered
session_hash	Unique identifier for the user's session
type	The event type (see table below)

Available event types:

Event Type	Description
START_FLOW	Triggered when a user starts a Guideflow
VIEW_STEP	Triggered when a user views a step
END_SLIDE_VIEW	Triggered when a user finishes viewing a step
END_FLOW	Triggered when a user exits the Guideflow
COMPLETE_FLOW	Triggered when a user completes the Guideflow
NAVIGATE	Triggered when a user clicks an external link
CHECKLIST_ITEM_CLICK	Triggered when a user clicks a checklist item

Testing your integration:

• Open your website with a Guideflow embedded and interact with it.

• In Google Analytics, go to Reports → Realtime and verify Guideflow events are appearing under Event count by Event Name.

Frontend tracking may be impacted by ad blockers, which can result in 10 to 30% data loss on key events. For critical conversions, use backend tracking alongside frontend for complete coverage.