Google Analytics

Google Analytics provides GoogleAnalytics and GoogleTagManager components as well as actions for event tracking.

Adding GoogleAnalytics

  1. Insert i a GoogleAnalytics component into your root layout to enable tracking across all the pages contained within.

  2. Set the gaId property to the Measurement ID of your Google Analytics property. It should look like G-1A2B3C4D5E. You can find this under Admin → Property Settings → Data collection and modification → Data streams. Open your Web stream, copy the Measurement ID, and paste it here.

For more granular control over which pages have tracking, you can add the GoogleAnalytics component to specific pages or groups of pages through layouts.

Properties

  • gaId (required) - Google Analytics Measurement ID. E.g., G-XXXXXXXXXX.

  • debugMode - Enable debug mode to troubleshoot and view events live in DebugView.

Sending Custom Events

The sendGoogleAnalyticsEvent action can be used to track custom events.

For this action to work, the GoogleAnalytics component must be included in a parent layout or on the page from which this action is called.

Click Tracking

  1. Add a Button component.

  2. Add an onClick property.

  3. Add a sendGoogleAnalyticsEvent action to the onClick property.

  4. Set eventName to “buttonClicked".

  5. Optionally add eventParams.

  6. Enter preview mode (⌘/^ + e or ⌘/^ + p)

  7. Click the Button and observe that the event has been sent to Google Analytics.

To view events in real-time, you can use debugMode with DebugView.

Insert the “Event Example” Button to see a click tracking example.

Debugging with DebugView

  1. Add the debugMode property.

  2. Set debugMode to true.

  3. Go to Google Analytics Admin → Data Display → DebugView.

  4. Start using your site and monitor the events as they're triggered.

[GA4] Monitor events in DebugView - Analytics Help

Adding GoogleTagManger

  1. Insert i a GoogleTagManager component into your root layout to enable tracking across all the pages contained within.

  2. Set the gtmId property to the Container ID of your Google Tag Manager container. It should look like GTM-XXXXXXXX. You can find your Container ID here: https://tagmanager.google.com/.

For more granular control over which pages have tracking, you can add the GoogleTagManger component to specific pages or groups of pages through layouts.

Properties

  • gtmId (required) - Google Tag Manager Container ID. E.g., GTM-XXXXXXXX.