Simvoly Analytics Implementation | OpsBlu Docs

Simvoly Analytics Implementation

Technical guide for implementing analytics tracking on Simvoly websites and funnels, covering tracking code settings, page-level scripts, and...

Analytics Architecture on Simvoly

Simvoly is a website and funnel builder. Its architecture splits into two content types: standard website pages and funnel pages. Both use Simvoly's drag-and-drop editor but have different tracking considerations. Funnel pages operate as multi-step sequences (landing page, opt-in, upsell, thank you) where cross-page tracking and conversion attribution matter.

Pages render as static HTML served from Simvoly's CDN. Navigation between pages is standard multi-page (full page loads). Funnel steps also load as individual pages with full reloads, so tracking scripts reinitialize on each step.

Code injection is available at three levels: site-wide (in Settings), page-level (per-page settings), and element-level (through custom HTML blocks). This granularity is useful for funnel tracking where different scripts or events apply to different steps.

Installing Tracking Scripts

Site-Wide Tracking Code

Navigate to Settings > Tracking Codes. Simvoly provides dedicated fields:

Head Tracking Code (injected in <head> on all pages):

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>

Body Tracking Code (injected before </body> on all pages):

<!-- GTM noscript -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

Simvoly also has a dedicated Google Analytics field where you enter just the Measurement ID. The platform then auto-injects gtag.js. For full control, use GTM through the Head Tracking Code field instead.

Page-Level Scripts

Each page has its own Settings panel with Custom Code fields (Head and Body). Use these for scripts that should only run on specific funnel steps or pages:

<!-- Only on the thank-you page -->
<script>
  window.dataLayer = window.dataLayer || [];
  dataLayer.push({
    event: 'funnel_complete',
    funnel_name: 'lead_magnet',
    funnel_step: 'thank_you'
  });
</script>

Custom HTML Blocks

Drag a Custom HTML element onto any page for inline script injection:

<script>
  // Track when this section becomes visible
  var el = document.currentScript.parentElement;
  var observer = new IntersectionObserver(function(entries) {
    if (entries[0].isIntersecting) {
      dataLayer.push({ event: 'section_view', section_name: 'pricing' });
      observer.disconnect();
    }
  }, { threshold: 0.5 });
  observer.observe(el);
</script>

Data Layer Implementation

Base Data Layer

Place in the site-wide Head Tracking Code:

<script>
  window.dataLayer = window.dataLayer || [];

  var path = window.location.pathname;
  var pageType = 'page';
  if (path === '/' || path === '/index.html') pageType = 'home';
  if (document.querySelector('[class*="funnel"]') || path.indexOf('/f/') > -1) pageType = 'funnel_step';
  if (path.indexOf('/blog') > -1) pageType = 'blog';
  if (path.indexOf('/store') > -1 || path.indexOf('/product') > -1) pageType = 'product';

  dataLayer.push({
    page_type: pageType,
    page_path: path,
    page_title: document.title,
    platform: 'simvoly'
  });
</script>

Funnel Step Tracking

For funnel sequences, track each step with its position in the funnel. Apply per-page scripts on each funnel step:

Step 1 (Landing page):

<script>
  dataLayer.push({
    event: 'funnel_step',
    funnel_name: 'webinar_signup',
    funnel_step: 1,
    funnel_step_name: 'landing'
  });
</script>

Step 2 (Opt-in form):

<script>
  dataLayer.push({
    event: 'funnel_step',
    funnel_name: 'webinar_signup',
    funnel_step: 2,
    funnel_step_name: 'opt_in'
  });
</script>

Step 3 (Thank you):

<script>
  dataLayer.push({
    event: 'funnel_step',
    funnel_name: 'webinar_signup',
    funnel_step: 3,
    funnel_step_name: 'confirmation'
  });

  // Fire conversion event
  dataLayer.push({
    event: 'generate_lead',
    method: 'webinar_funnel'
  });
</script>

Form Submission Tracking

Simvoly forms submit via AJAX. Intercept form submissions:

<script>
  document.addEventListener('submit', function(e) {
    if (e.target.tagName === 'FORM') {
      var inputs = e.target.querySelectorAll('input[name], select[name], textarea[name]');
      var fieldNames = Array.prototype.map.call(inputs, function(el) { return el.name; });

      dataLayer.push({
        event: 'form_submit',
        form_fields: fieldNames.join(','),
        form_page: window.location.pathname
      });
    }
  });
</script>

E-Commerce Data Layer

Simvoly's store exposes product information in the DOM:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var productName = document.querySelector('[class*="product-name"], [class*="product-title"]');
    var productPrice = document.querySelector('[class*="product-price"]');

    if (productName && productPrice) {
      dataLayer.push({
        event: 'view_item',
        ecommerce: {
          items: [{
            item_name: productName.textContent.trim(),
            price: parseFloat(productPrice.textContent.replace(/[^0-9.]/g, ''))
          }]
        }
      });
    }
  });
</script>

Common Issues

Site-Wide vs Page-Level Script Precedence

Site-wide scripts load first, then page-level scripts. If both define the same variable or push conflicting data layer events, the page-level script runs second and may produce duplicate events. Use conditional checks:

// Prevent duplicate funnel_step events
if (!window._funnelStepTracked) {
  window._funnelStepTracked = true;
  dataLayer.push({ event: 'funnel_step', funnel_step: 2 });
}

Funnel Page URL Structure

Simvoly funnel pages may use query parameters or path segments for step identification. URLs can look like /f/funnel-name/step-2 or /landing?step=2. The structure varies by how the funnel was configured. Always test the actual published URLs before building URL-based trigger rules in GTM.

Form Submissions Do Not Redirect by Default

Simvoly forms show an inline success message rather than redirecting. Destination-based conversion tracking does not work unless you explicitly configure a redirect URL in the form settings. For inline success detection:

var formContainers = document.querySelectorAll('form');
formContainers.forEach(function(form) {
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(m) {
      var successEl = form.parentElement.querySelector('[class*="success"], [class*="thank"]');
      if (successEl && successEl.offsetParent !== null) {
        dataLayer.push({ event: 'form_success', form_page: window.location.pathname });
        observer.disconnect();
      }
    });
  });
  observer.observe(form.parentElement, { childList: true, subtree: true, attributes: true });
});

A/B Testing and Tracking

Simvoly offers built-in A/B testing for funnel pages. Each variant gets its own URL. Ensure your analytics identifies which variant was served:

// Detect variant from URL or page content
var variant = new URLSearchParams(window.location.search).get('variant') || 'control';
dataLayer.push({
  experiment_variant: variant,
  page_path: window.location.pathname
});

Pop-Up and Overlay Tracking

Simvoly supports pop-ups triggered by exit intent, scroll percentage, or time delay. These pop-ups load within the same page DOM. Track pop-up displays:

var popupObserver = new MutationObserver(function(mutations) {
  mutations.forEach(function(m) {
    var popup = document.querySelector('[class*="popup"][style*="display: block"], [class*="modal"].active');
    if (popup) {
      dataLayer.push({ event: 'popup_view', popup_page: window.location.pathname });
    }
  });
});
popupObserver.observe(document.body, { childList: true, subtree: true, attributes: true });

Platform-Specific Considerations

Funnel vs Website Pages: Simvoly treats funnels and website pages as separate entities in the editor. Both support the same code injection methods, but funnel pages have additional features (A/B testing, step sequencing) that affect tracking architecture. Plan your data layer to distinguish between the two.

Checkout Tracking: Simvoly's e-commerce checkout may redirect to a third-party payment processor. Track the checkout initiation on the Simvoly page, then use the success/thank-you page for conversion confirmation. Do not rely on tracking events firing during the payment redirect.

Blog Tracking: Simvoly blogs render as standard pages with /blog/ path prefix. Each post loads independently with full script initialization. Blog-specific tracking:

if (window.location.pathname.indexOf('/blog/') === 0) {
  var title = document.querySelector('h1, [class*="blog-title"]');
  dataLayer.push({
    content_type: 'blog_post',
    article_title: title ? title.textContent.trim() : document.title
  });
}

White Label Support: Simvoly offers white-label reselling. White-labeled sites use the reseller's domain and branding but the same underlying platform. Analytics implementation is identical regardless of white-label status.

SSL: All Simvoly sites serve over HTTPS on both default subdomains and custom domains. No mixed-content concerns for HTTPS analytics endpoints.

Back to top