For merchants using frameworks like React or VueJS, which leverage a Virtual DOM or operate as Single Page Applications (SPAs), our collection rules may not work as expected. This is because our technology relies on detecting changes to the actual DOM for tracking metrics such as page views and time on page.
Since SPAs don't update the actual DOM during navigation, our technology may not accurately detect these changes. To address this, you can use cookies or similar client-side storage to track navigation events and monitor changes in the Virtual DOM, ensuring our Collection script is triggered appropriately.
High-Level Solution Overview
To enable accurate tracking:
Track Page Views: Use a counter to track the number of page views for each user session.
Call
geq.page(): Trigger thegeq.page()function only when the counter reaches your desired page views.Monitor Virtual DOM Updates: Set up listeners for state changes or routing updates in your SPA.
Example Pseudocode
The sample code below shows one way to approach this integration. You can use it as a starting point and adapt it to fit your framework and business logic.
// Pseudocode for tracking page views and calling geq.page()
// Step 1: Initialize a page view counter (e.g., in cookies, localStorage, or a variable)
function getPageViewCount() {
// Retrieve the count from cookies or localStorage
return <logic_to_get_count>; // Example: parseInt(localStorage.getItem('pageViews') || '0', 10)
}
function setPageViewCount(count) {
// Save the updated count to cookies or localStorage
<logic_to_save_count>; // Example: localStorage.setItem('pageViews', count.toString())
}
// Step 2: Monitor Virtual DOM state changes (e.g., on route or state updates)
function onVirtualDOMUpdate() {
const currentCount = getPageViewCount() || 0; // Get the current page view count
// Increment the page view count
const newCount = currentCount + 1;
setPageViewCount(newCount); // Save the updated count
// Call geq.page() when the count reaches exactly 2
if (newCount === 2) {
window.geq.page();
}
}
// Example: Hook this function into your framework's routing or state change events
<logic_to_listen_for_updates>(onVirtualDOMUpdate);
Explanation of the Logic
Retrieve Current Count: The function
getPageViewCount()fetches the current number of page views (defaulting to 0 if none exists).Increment the Count: Each time the Virtual DOM updates (e.g., on a route change), the counter is incremented.
Check for 2 Page Views: When the count equals 2, the
geq.page()function is called. This ensures it happens exactly once on the second page view.Update Storage: The updated count is stored back in cookies or local storage for future reference.
Key Notes
Adaptation Required: The above logic should be adapted to match your app's specific routing or state management approach.
Testing: Validate thoroughly before deploying to production to ensure accurate page view tracking.
Custom Logic: This example is provided as a starting point. Modify it as needed to fit your framework or architecture.