WeWeb Google Analytics: GA4, GTM, and SPA Event Tracking

In the WeWeb editor, click the plug icon in the left sidebar to open the Plugins panel. Under the 'Extensions' section, find 'Google Tag Manager' and click Add. In the plugin configuration dialog, enter your GTM Container ID in the 'Container ID' field — it looks like GTM-XXXXXXX. You can optionally enter separate Container IDs for different environments (Editor, Staging, Production) if you use multiple GTM containers. Click Save. WeWeb will inject the GTM snippet (`<script>` in the head and `<noscript>` in the body) into every page of your application automatically. You do not need to add any code manually to App Settings → Custom Code.

Open Google Tag Manager (tagmanager.google.com) and go to your container. Click 'Tags' in the left sidebar → 'New'. Name the tag 'GA4 Configuration'. Click 'Tag Configuration' → 'Google Tag' (the newer recommended tag type that replaces the old GA4 Configuration tag). Enter your GA4 Measurement ID (G-XXXXXXXXXX). Under 'Triggering', click the '+' button. Select 'Initialization - All Pages' as the trigger — this fires the tag on every page load including SPA navigation when combined with the history change trigger in the next step. Click Save. This tag establishes the GA4 connection and initializes the gtag.js tracker for all subsequent events.

WeWeb navigation changes the browser URL without a full page reload, so the 'All Pages' trigger only fires once when the app first loads. To track every SPA page view, you need a GTM History Change trigger. In GTM, click 'Triggers' → 'New'. Name it 'History Change - SPA Navigation'. Under 'Trigger Type', select 'History Change'. Leave all conditions as default (fire on all history changes). Click Save. Now go back to your GA4 tag → edit it → under 'Triggering' click '+' again and add this History Change trigger alongside the existing Initialization trigger. This means GA4 fires once on first load AND every time the WeWeb app navigates between pages. Click Save. Publish your GTM container by clicking 'Submit' in the top right.

WeWeb has a native GTM action in workflows: 'GTM - Push dataLayer event'. This action sends custom event data to GTM's dataLayer, which GTM can then use to fire GA4 custom events. Select any element in WeWeb that you want to track — a sign-up button, a video play, a form submit. Open its workflow (Workflows tab). Add a new action, search for 'GTM' and select 'GTM - Push dataLayer event'. Fill in the Event name (use GA4 naming convention: lowercase_with_underscores, e.g. `sign_up_button_click`). Add parameters as key-value pairs: `button_location` mapped to the page name (`wwPage.name`), `user_type` mapped to whether the user is logged in. In GTM, create a corresponding Custom Event trigger on the event name, and a GA4 Event tag that fires on that trigger.

1// GTM dataLayer push (for reference — WeWeb uses the built-in GTM action)
2// This is what the 'GTM - Push dataLayer event' action sends
3// Injection point: Workflow → GTM - Push dataLayer event action
4// (You configure this through the WeWeb action UI, not raw code)
5
6// What gets pushed to window.dataLayer:
7{
8  "event": "sign_up_button_click",
9  "button_location": "hero_section",
10  "page_name": "{{wwPage.name}}",
11  "user_logged_in": false
12}
13
14// Alternatively, for manual injection in a Custom JavaScript workflow action:
15// Injection point: Workflow → Custom JavaScript action
16window.dataLayer = window.dataLayer || [];
17window.dataLayer.push({
18  event: 'form_submit',
19  form_id: 'contact_form',
20  form_source: wwPage ? wwPage.name : 'unknown',
21  submission_value: formData ? formData.planTier : 'unknown'
22});
23return { pushed: true };

Before going live, verify your tracking setup works. In GTM, click 'Preview' in the top right. A new browser tab opens with your WeWeb app URL in a GTM debug overlay. Navigate through your app — you should see each tag fire in the GTM debug panel at the bottom of the screen. Confirm the 'GA4 Configuration - Google Tag' fires on initialization and on each History Change. Click your tracked elements to verify custom events fire. For GA4 verification, open Google Analytics → Configure → DebugView. If you have the Google Tag Assistant extension installed in Chrome, it shows a badge on your site with tag status. You can also check GA4 Real-Time reports within 30 seconds of page visits — look for active users and events. If GA4 is not receiving data, check that your GTM container is published (not just saved) and that WeWeb is also published.

If you prefer to skip GTM and add GA4 directly, go to App Settings (gear icon) → Custom Code → Head section. Paste the GA4 global site tag (gtag.js) code block. Replace G-XXXXXXXXXX with your GA4 Measurement ID. For SPA navigation tracking without GTM, add a custom script that listens to history state changes using the History API's popstate event and calls gtag('event', 'page_view', ...) manually. This method works but is harder to maintain than the GTM approach — any time you want to change tracking, you need to edit code and republish WeWeb. GTM is preferred for most use cases because you can change tags in GTM without touching WeWeb.

1<!-- Injection point: App Settings → Custom Code → Head -->
2<!-- Replace G-XXXXXXXXXX with your GA4 Measurement ID -->
3
4<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
5<script>
6  window.dataLayer = window.dataLayer || [];
7  function gtag(){ dataLayer.push(arguments); }
8  gtag('js', new Date());
9  gtag('config', 'G-XXXXXXXXXX', {
10    send_page_view: false  // Disable auto pageview — we handle it manually below
11  });
12
13  // SPA navigation tracking for WeWeb
14  // Fires a page_view event on every URL change
15  let lastPath = '';
16
17  function trackPageView() {
18    const currentPath = window.location.pathname + window.location.search;
19    if (currentPath !== lastPath) {
20      lastPath = currentPath;
21      gtag('event', 'page_view', {
22        page_location: window.location.href,
23        page_path: window.location.pathname,
24        page_title: document.title
25      });
26    }
27  }
28
29  // Listen for Vue Router history changes
30  window.addEventListener('popstate', trackPageView);
31
32  // Also patch pushState for programmatic navigation
33  const originalPushState = history.pushState;
34  history.pushState = function() {
35    originalPushState.apply(this, arguments);
36    trackPageView();
37  };
38
39  // Track initial page load
40  document.addEventListener('DOMContentLoaded', trackPageView);
41</script>

If your app has users in the EU, you need a cookie consent mechanism before loading analytics. WeWeb has a Privacy & Consent settings section (App Settings → Privacy & Consent) where you can configure a basic consent banner. For more robust consent management, use a third-party Consent Management Platform (CMP) like Cookiebot or OneTrust. In GTM, configure 'Consent Mode v2' by adding a default consent state tag that fires before all other tags: set analytics_storage to 'denied' by default, then update to 'granted' when the user accepts. This is required for GA4 to comply with EU ePrivacy regulations. The GTM consent mode approach is more reliable than building consent logic directly in WeWeb workflows.