Your homepage gets traffic, but where do users actually go next? Path Exploration in Google Analytics 4 shows the real sequences — the page they land on, the button they click, the form they complete (or abandon). Without it, you're guessing at navigation patterns. With it, you see drop-off points and which paths lead to conversion.
Install gtag.js and Verify Data Flow
Path Exploration relies on your GA4 property receiving page_view and custom events. The fastest way to start is gtag.js, which automatically sends page_view events whenever a user navigates.
Add the gtag.js snippet to your site
Paste the gtag.js code into the <head> of your site (before other scripts). Replace GA_MEASUREMENT_ID with your GA4 Measurement ID — you'll find it in Admin > Data Streams > Web > Measurement ID. It starts with 'G-'. This single snippet captures page_view events automatically.
<!-- Add to <head> -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID', {
'page_path': window.location.pathname,
'page_title': document.title
});
</script>Confirm data is flowing in Real-time
Go to Reports > Real-time in GA4 and browse your site. You should see events coming in within seconds. If the Real-time report is empty, check that gtag.js didn't error (open DevTools Console tab). If page_view isn't appearing, gtag.js isn't loading — verify your Measurement ID is correct.
// Verify gtag loaded and is callable
if (typeof gtag === 'undefined') {
console.error('gtag.js failed to load. Check your Measurement ID.');
} else {
console.log('gtag.js loaded successfully');
// Optionally fire a test event
gtag('event', 'debug_test', {'debug_mode': true});
}Create Custom Events for User Actions
page_view alone shows pages visited, but Path Exploration becomes powerful when you add custom events representing key user decisions: button clicks, form submissions, video plays, purchases. These events become nodes in your path flow.
Define your high-value events
Identify 3–5 critical user actions on your site. Examples: button_click (sign-up, demo request), form_submission (contact form), add_to_cart, purchase. Give them clear names — GA4 doesn't auto-generate these. Avoid firing events on every micro-interaction (every scroll, every hover) as this creates noise in Path Exploration.
// Fire a custom event when user clicks the sign-up button
const signupBtn = document.querySelector('#signup-btn');
if (signupBtn) {
signupBtn.addEventListener('click', () => {
gtag('event', 'button_click', {
'button_id': 'signup-btn',
'button_text': 'Get Started',
'page_path': window.location.pathname
});
});
}
// Fire a custom event on form submission
const form = document.querySelector('#contact-form');
if (form) {
form.addEventListener('submit', () => {
gtag('event', 'form_submission', {
'form_name': 'contact',
'form_id': 'contact-form'
});
});
}Send events with meaningful parameters
Add parameters to your custom events so you can drill into them in Path Exploration. For example, include button_text, form_name, or product_id. These parameters help you understand *which* button or form users interacted with. Keep parameter names consistent across your site.
// Good: event with descriptive parameters
gtag('event', 'product_view', {
'product_id': 'sku_12345',
'product_name': 'Analytics Dashboard',
'product_category': 'Software',
'value': 99,
'currency': 'USD'
});
// Bad: event with no context
gtag('event', 'click'); // Which click? Where? Useless in Path Exploration.Mark key events as Conversions (optional but recommended)
Go to Events > Modify event in GA4 and toggle Mark as conversion for events like purchase or form_submission. This makes GA4 prioritize these events in some analyses and makes them easier to spot in Path Exploration reports. It's not required, but it helps organize your report.
// When you mark an event as conversion in the GA4 UI,
// GA4 will include it in the Conversions column of your Events report
// Code-side, nothing changes — just send the event normally:
gtag('event', 'purchase', {
'transaction_id': 'txn_abc123',
'affiliation': 'online store',
'value': 142.50,
'currency': 'USD',
'tax': 12.50,
'shipping': 5.00
});gtag('event', 'your_event', {'debug_mode': true}) to send debug events, then check Admin > DebugView to see them in real-time without waiting for reports to process.Build and Analyze Your Path Exploration Report
With gtag.js installed and custom events firing, you're ready to see your user journeys mapped out.
Open Path Exploration and set your starting point
In GA4, click Explore (left sidebar), then select Path Exploration from the gallery. GA4 will prompt you to choose a starting point — this is usually a page_view event (e.g., your homepage or pricing page) or a custom event (e.g., a click on your sign-up button). The starting point filters which user journeys are shown.
// Example: to analyze paths starting from your pricing page,
// ensure you're firing page_view with clear page identifiers:
gtag('event', 'page_view', {
'page_title': 'Pricing',
'page_path': '/pricing',
'page_location': window.location.href
});
// Then in Path Exploration, select this page_view as your starting point.Configure steps and direction
Set the number of steps (typically 3–5; more gets hard to read). Choose direction: Forward shows what users do after the starting point; Backward shows how they arrived. Then set your date range (start with 30 days for a good sample), and apply Filters if you want to isolate a segment (e.g., only mobile users, or users from a specific country).
// To properly filter paths by device, ensure your events include device context:
// gtag.js includes this automatically, but you can also add custom dimensions:
gtag('config', 'GA_MEASUREMENT_ID', {
'user_id': 'user_12345', // if you have User-ID feature enabled
'custom_map': {
'dimension1': 'subscription_level',
'dimension2': 'account_age'
}
});
gtag('event', 'page_view', {
'subscription_level': 'premium',
'account_age': '180'
});Interpret the paths and spot drop-offs
Path Exploration shows nodes (pages/events) connected by lines. Thicker lines = more users took that path. Nodes show user counts. Look for paths where traffic drops sharply — that's your drop-off point. Hover over a node to see the next steps users took from there. Right-click a node to drill into it and see its details.
// Path Exploration visualizes your event data automatically.
// To make the report more readable, use consistent, meaningful event names:
const eventMap = {
'visit_homepage': 'homepage_view',
'click_pricing': 'pricing_clicked',
'submit_form': 'contact_form_submitted',
'purchase': 'purchase_completed'
};
// Consistent naming = cleaner path diagrams
gtag('event', eventMap.visit_homepage, {'page_path': '/'});Common Pitfalls
- Assuming page_view fires automatically — it does with gtag.js, but only if gtag.js loads. Check DevTools Console for errors. If your Measurement ID is wrong, gtag silently fails and no data is sent.
- Creating too many custom events — every event adds a node to your Path Exploration. Too many nodes = unreadable flow. Stick to 5–10 high-value events, not dozens of micro-interactions.
- Using a date range too narrow — Path Exploration needs enough users to reveal patterns. If you run it on 1 day of data, you'll see only a few paths. Use at least 7 days; 30 days is safer for low-traffic sites.
- Not accounting for data processing lag — GA4 can take 24–48 hours to process events into reports. If you just set up events, don't expect Path Exploration to show full data immediately. Wait 2 days before drawing conclusions.
Wrapping Up
Path Exploration turns your GA4 event stream into a visual map of how users navigate your site. Install gtag.js, define 5–10 key events, and you can see exactly where users drop off and which paths lead to conversion. This clarity drives smarter product and UX decisions. If you want to track these journeys automatically across all your tools, Product Analyst can help.