Yola Analytics: Complete Setup Guide

Analytics Architecture on Yola

Yola is a closed website builder (SiteBuilder) with heavily restricted code injection capabilities. Analytics implementation options depend on the subscription tier:

• Built-in Google Analytics Integration -- Available on Premium and above, configured via site settings (Measurement ID only)
• Custom Code Widget -- An HTML embed widget that accepts code snippets, available on Premium plans
• HTML Embed Block -- Insert raw HTML into page content areas

Yola does not provide a template editor, code injection fields in the site HEAD or BODY, or developer APIs for template modification. The builder renders pages through a proprietary system with no access to layout files.

Plan-Based Access Matrix

Free (Bronze) and Silver plans do not support any form of custom JavaScript execution. Gold plans allow HTML embeds but strip <script> tags.

Installing Tracking Scripts

Built-in Google Analytics (Premium Only)

Navigate to Site Settings > Google Analytics and enter your Measurement ID:

G-XXXXXXXXXX

Yola injects the GA4 gtag.js snippet automatically. This provides basic pageview tracking only -- no custom events, no data layer, no GTM support.

Custom Code Widget (Premium Only)

In the SiteBuilder editor:

1. Drag the Custom Code widget onto the page
2. Click to edit and paste your script

<script>
  // GTM installation via Custom Code widget
  (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>

The Custom Code widget must be placed on every page individually. There is no global code injection mechanism.

HTML Embed for Tracking Pixels

For image-based tracking pixels that do not require JavaScript:

<img src="https://analytics.example.com/pixel?site=yola&page=home"
     width="1" height="1" style="display:none" alt="">

This works on Gold plans and above since it does not require <script> tags.

Data Layer Implementation

Data layer implementation is only possible on Premium plans where JavaScript execution is allowed. Place this in a Custom Code widget on each page:

<script>
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    platform: 'yola',
    page_path: window.location.pathname,
    page_title: document.title
  });
</script>

Page Type Detection

Yola generates URLs based on page names configured in the editor. There are no predictable URL patterns for content types. Detect page context from DOM elements:

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

  var pageType = 'page';

  // Yola blog detection
  if (document.querySelector('.blog-post-content, .yola-blog-entry')) {
    pageType = 'blog_post';
  } else if (document.querySelector('.blog-list, .yola-blog-list')) {
    pageType = 'blog_index';
  } else if (window.location.pathname === '/' || window.location.pathname === '/index.html') {
    pageType = 'home';
  }

  window.dataLayer.push({
    page_type: pageType
  });
</script>

Click and Engagement Tracking

Since widgets must be added per-page, centralize tracking logic in a single script block:

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Track all outbound link clicks
  document.querySelectorAll('a[href^="http"]').forEach(function(link) {
    if (link.hostname !== window.location.hostname) {
      link.addEventListener('click', function() {
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
          event: 'outbound_click',
          link_url: link.href,
          link_text: link.textContent.trim().substring(0, 100)
        });
      });
    }
  });

  // Track form submissions
  document.querySelectorAll('form').forEach(function(form) {
    form.addEventListener('submit', function() {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: 'form_submit',
        form_action: form.action || 'inline'
      });
    });
  });
});
</script>

Common Issues

Scripts Stripped on Non-Premium Plans

Yola strips <script> tags from HTML embeds and Custom Code widgets on all plans below Premium. The code appears in the editor but does not execute on the published site. There is no workaround on lower plans.

Custom Code Widget Not Global

Every page requires its own Custom Code widget. If you add tracking to the homepage but not to /about, the about page will have no analytics. For sites with many pages, this creates significant maintenance overhead.

Workaround: Load a single external script that handles all tracking logic:

<script src="https://your-server.com/yola-tracking.js" async></script>

Host the tracking logic externally and update it in one place. The Custom Code widget on each page only needs the single <script src> tag.

Widget Placement Affects Load Order

Custom Code widgets execute in document order based on their position on the page. If your tracking script depends on DOM elements that appear below the widget, wrap logic in DOMContentLoaded:

document.addEventListener('DOMContentLoaded', function() {
  // Safe to query DOM elements
});

Built-in GA Conflicts with Custom Implementation

If you enable the built-in Google Analytics integration AND deploy GA4 via GTM or a Custom Code widget, you will get duplicate pageview events. Disable the built-in integration before deploying custom tracking.

Yola Subdomain on Free Plans

Free plan sites are hosted on *.yolasite.com subdomains. Analytics tools that filter by domain will see traffic attributed to yolasite.com. Custom domains require Silver plan or above.

No Header/Footer Injection

Unlike most website builders, Yola does not provide HEAD or BODY code injection fields. All code must go through the Custom Code widget, which places scripts in the <body> content area rather than the <head>. This means:

• async and defer attributes behave differently since the parser has already passed the <head>
• Scripts cannot set cookies or modify headers before the page renders
• document.write() calls will overwrite the page if called after parsing

Platform-Specific Considerations

No developer API: Yola does not provide a public API for managing sites, pages, or configurations. Analytics auditing must be done by inspecting the rendered HTML of published pages.

Yola SiteBuilder vs. legacy editor: Yola has two editors -- the current SiteBuilder and an older legacy editor. Custom Code widgets are only available in SiteBuilder. Sites built with the legacy editor cannot add custom JavaScript.

SSL and security: Yola provides free SSL on custom domains. All published sites are served over HTTPS. Analytics scripts must use HTTPS endpoints.

Performance impact of per-page widgets: Each Custom Code widget adds a separate DOM node and script execution context. On sites with many pages, ensure the tracking script is lightweight to avoid compounding load time across page navigations.

No cookie consent mechanism: Yola does not provide a built-in cookie consent banner. You must implement consent logic entirely within your Custom Code widget if GDPR or similar compliance is required. On Premium plans, you can deploy a third-party consent management platform via the Custom Code widget.