# 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.

{% hint style="info" %}
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.
{% endhint %}

### 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.

{% hint style="info" %}
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.
{% endhint %}