SeaText AI Scope: Traditional Websites vs. Single Page Applications (SPAs)

SeaText AI’s scope behaves very differently on traditional multi-page websites versus single-page applications (SPAs) because of how each architecture handles page navigation and script lifecycle. On traditional sites, the SeaText AI snippet reinitializes its full scope every time a user loads a new page via a full browser refresh. For SPAs, the snippet runs once on initial app load, and uses a persistent scope stored in local storage to survive client-side route changes without full page reloads. This difference impacts how you configure personalization, track conversions, and troubleshoot issues for each site type.

Choose Traditional Website Integration If

You run a standard multi-page site built with WordPress, Shopify, or another CMS that uses full page reloads for navigation. You want the simplest possible setup with no framework-specific code, and you don’t need to preserve visitor context across pages without separate cookie tracking. This is the right fit for most small to medium business sites, blogs, and standard ecommerce stores.

Choose SPA Integration If

You run a React, Vue, Angular, or other JavaScript-heavy SPA where navigation happens without full page reloads. You need consistent personalization, conversion tracking, and A/B testing across the entire user session, not just on initial page load. This is required for modern web apps, SaaS dashboards, and custom frontend builds that use client-side routing.

Why Scope Behavior Matters for SeaText AI

If scope is not configured correctly for your site type, you will see broken personalization, inaccurate conversion tracking, and wasted AI optimization efforts. For SPAs using the traditional snippet, the AI will only run on the initial page load, so it will not rewrite content or track conversions as users navigate to new routes. For traditional sites with duplicate snippet loads, you will see conflicting A/B test variants and double-counted conversions. Getting scope right ensures SeaText AI can rewrite page content, track visitor behavior, and apply personalization rules consistently across every user interaction.

How SeaText AI Scope Works on Traditional Websites

Traditional websites serve a full new HTML document every time a user navigates to a new page. When the new page loads, the SeaText AI snippet runs automatically, reads the current page URL, DOM content, and visitor context (like ad campaign source or geographic location), then applies the correct personalized copy, A/B test variant, and tracking tags. Because each page is a fresh load, there is no need to preserve state between pages unless you want to track a single user’s behavior across multiple visits, which you can handle with standard cookie-based tracking. The snippet uses an async script tag, so it never blocks page rendering, and it works with any site that serves full HTML pages from the server, no framework-specific code required.

How SeaText AI Scope Works on SPAs

Single-page applications load a single HTML shell and JavaScript bundle on the first visit, then swap out page content dynamically via client-side routing when users click links, with no full browser reloads. If you used the standard traditional SeaText AI snippet on an SPA, it would only run once on initial app load, and never update when the user navigates to a new virtual page. The SPA-specific snippet fixes this by using asynchronous loading to avoid slowing down your app’s initial render, storing a persistent unique identifier in the browser’s local storage to maintain scope across route changes, and including cross-origin compatibility checks for apps that load content from multiple domains. You will need to insert the snippet into your app’s entry point (such as index.html or your main JavaScript/TypeScript file) and add framework-specific route change listeners for React, Vue, or Angular to trigger scope updates when the user navigates. When a route changes, the snippet re-scans the new DOM content, updates the visitor context, and applies the correct personalization, A/B testing, and tracking rules without reloading the page.

Key Decision Criteria for Your Integration

Use these four checks to pick the right integration for your site:

• Site architecture test: Open your browser’s developer tools, go to the Network tab, and click a few links on your site. If you see full page loads in the tab for each click, you have a traditional site. If only background XHR/fetch requests appear, you have an SPA.
• Framework check: If you use React, Vue, Angular, Next.js in SPA mode, or another client-side routing framework, you need the SPA integration.
• Personalization needs: If you need to preserve visitor context (like ad campaign source, previous page views, or A/B test variant assignments) across the entire user session, the SPA’s persistent scope handles this automatically. Traditional sites require extra cookie setup for cross-page context.
• Team skill level: Traditional integration only requires adding a code snippet to your site’s global template, which most CMS platforms let you do via a plugin or custom HTML field. SPA integration requires basic knowledge of your framework’s lifecycle and route change events.

Common Setup Mistakes to Avoid

• Using the traditional snippet on an SPA: This leads to broken personalization and tracking, as the snippet only runs once on initial load and never updates when routes change.
• Skipping route change listeners: Even with the SPA snippet, you need to add framework-specific code to trigger scope updates when the user navigates. Without this, SeaText AI will only track the initial page.
• Blocking local storage access: The SPA snippet stores its persistent ID in local storage. If your app or browser settings block local storage, scope will reset on every route change, breaking personalization and session tracking.
• Ignoring cross-origin settings: If your SPA loads content from multiple domains, you need to configure the SeaText AI snippet to allow cross-origin requests, or scope will break when users navigate between domains.

Frequently Asked Questions

1. Will SeaText AI work with my React app if I use React Router?
   Yes, as long as you add the SPA-specific snippet to your app's entry point and add a route change listener that triggers the SeaText AI scope update function when React Router changes routes. The SeaText AI integration guide includes sample code for React Router.
2. Do I need to change my SeaText AI personalization rules when switching from a traditional site to an SPA?
   No, your existing personalization, A/B test, and translation rules will work the same way on both site types. The only difference is how the snippet initializes and updates scope as users navigate.
3. Will the SPA snippet slow down my app's initial load?
   No, the SPA snippet uses the async attribute for its script tag, so it loads in the background without blocking your app's initial render. The persistent scope adds only a tiny amount of ongoing memory overhead, which is unnoticeable for most users.
4. Can I use SeaText AI on a hybrid site that has both traditional pages and an SPA section?
   Yes, you can use the traditional snippet on your full-page sections and the SPA snippet on your client-side routed sections. Just make sure the two snippets do not conflict, and that you configure scope correctly for each section.
5. What happens if a user blocks local storage in their browser?
   If local storage is blocked, the SPA snippet will fall back to reinitializing scope on every route change, similar to a traditional site. Personalization will still work, but you will lose cross-route context and persistent session tracking until local storage is enabled.