> For the complete documentation index, see [llms.txt](https://docs.guideflow.com/help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.guideflow.com/help/integrations/analytics-integrations/google-analytics-integration/ga4-frontend-tracking.md).

# 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 %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.guideflow.com/help/integrations/analytics-integrations/google-analytics-integration/ga4-frontend-tracking.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.