Skip to main content

React Quickstart

This guide shows you how to integrate walkerOS into your React application with automatic pageview tracking and component-level event tracking.

Key Concepts​

  • Single file setup: One initialization file, direct usage in App.tsx
  • No providers needed: Direct integration in your main App component
  • StrictMode safe: Handles React's double execution correctly
  • Data attributes: Use the tagger helper for clean component tracking

Installation​

First, install the required walkerOS packages:

Loading...

Setup​

1. walker initialization​

Loading...

2. App integration​

Integrate directly in your main App component:

Loading...

Component tagging​

Use the tagger helper for clean component tracking:

Loading...
Loading...
info

When using the tagger helper, make sure to call .get() at the end of the chain.

Manual event tracking​

Use the elb function for custom events:

Loading...

Testing​

During #1-walker-initialization, we added a console destination. This will output events to the console. Open your browser's developer console to see tracked events:

  Event: "product view", { id: 123, name: "Premium Chocolate", price: 12.99 }

Best Practices​

  1. Use tagger: Clean component tagging with the tagger helper
  2. Minimal React code: Keep React integration as simple as possible
  3. Trust walkerOS: No need for custom error handling or state management
  4. Direct integration: No providers needed, integrate directly in App component
  5. Test with console: Use console destination during development

Troubleshooting​

Events not firing​

  1. Check that window.walker is set in the browser console
  2. Verify data attributes are correctly formatted (use data-elb prefix)
  3. Ensure walker initialization completed (window.walker.allowed must be true)
  4. Check browser console for any error messages

Route changes not tracked​

  1. Check that walker run is called on route changes in window.elbLayer
  2. Ensure firstRun logic is preventing double execution on initial load
  3. Verify location/pathname dependency is working correctly

Next Steps​

💡 Need Professional Support?
Need professional support with your walkerOS implementation? Check out our services.