SPA Change Methods

Overview

When making changes in a single-page application (SPA), Convert offers two approaches with different trade-offs.

Option 1: Visual Editor (Recommended)

Use the Visual Editor to make changes without writing code. The tracking script automatically handles SPA page transitions — when you add text, images, or HTML, changes are applied cleanly without duplicates.

Best for:

• Non-technical users
• Simple DOM modifications (text, images, styles, HTML)
• Teams that want automatic SPA handling

Option 2: Custom JavaScript

Use GlobalJS, ExperienceJS, or VariationJS for advanced changes that require code. In SPAs, the tracking script's continuous activation feature may re-execute your code on page transitions, potentially applying changes more than once.

Best for:

• Complex DOM manipulations
• Logic-dependent changes
• Interactions with third-party libraries

Important: Your code must handle duplicate prevention — remove existing elements before adding new ones, or check if changes have already been applied.

// Example: Guard against duplicate insertion in VariationJS
(() => {
  const id = "convert-custom-banner";
  if (document.querySelector(`#${id}`)) return;
  document.body.insertAdjacentHTML("afterbegin", `<div id="${id}">Banner</div>`);
})();

Which to Choose

For detailed configuration of continuous activation edge cases, see the SPA Continuous Activation recipe.