Zyro (Hostinger) Analytics Implementation

Analytics Architecture on Zyro (Hostinger Website Builder)

Zyro was acquired by Hostinger and rebranded as Hostinger Website Builder. The platform is an AI-assisted drag-and-drop builder with analytics code injection available through the integrations panel. Existing Zyro sites have been migrated to the Hostinger platform.

The primary injection points are:

• Integrations Settings -- Custom code injection via Settings > Integrations > Custom Code with separate HEAD and BODY fields
• Built-in Analytics Integrations -- Native Google Analytics, Facebook Pixel, Google Tag Manager, and Hotjar integrations via the Integrations panel
• E-commerce Tracking -- Automatic e-commerce events on sites with the Hostinger online store

Hostinger Website Builder does not expose template files, provide a code editor for layouts, or offer per-page code injection. All custom code is applied globally.

Migration Note

If you are working with a site originally built on Zyro:

• The builder interface is now accessed via hpanel.hostinger.com
• Zyro-era custom code settings were preserved during migration
• Domain configuration moved to Hostinger's DNS management
• E-commerce features require Hostinger's Business plan or higher

Installing Tracking Scripts

Method 1: Built-in GTM Integration (Recommended)

Navigate to Settings > Integrations > Google Tag Manager and enter your Container ID:

GTM-XXXXXX

Hostinger injects the GTM snippet into the HEAD and the noscript fallback into the BODY automatically. This is the cleanest installation method and requires no custom code.

Method 2: Custom Code Injection

Navigate to Settings > Integrations > Custom Code:

Head Code:

<!-- Custom analytics scripts -->
<script>
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    platform: 'hostinger_builder',
    page_path: window.location.pathname,
    page_title: document.title
  });
</script>

<!-- GA4 direct installation if not using GTM -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>

Body Code (before closing tag):

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

Built-in Platform Integrations

Available under Settings > Integrations:

Data Layer Implementation

Initialize the data layer in the Custom Code HEAD injection:

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

Page Type Detection

Hostinger Website Builder uses URL patterns that correspond to page types:

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

  var path = window.location.pathname;
  var pageType = 'page';

  if (path === '/' || path === '') pageType = 'home';
  else if (path.indexOf('/blog/') === 0) pageType = 'blog_post';
  else if (path === '/blog') pageType = 'blog_index';
  else if (path.indexOf('/store/') === 0 || path.indexOf('/product/') === 0) pageType = 'product';
  else if (path.indexOf('/cart') === 0) pageType = 'cart';
  else if (path.indexOf('/checkout') === 0) pageType = 'checkout';

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

E-commerce Event Tracking

On Business plans with the online store enabled, track product interactions:

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Product page -- extract data from DOM
  var productEl = document.querySelector('[data-product-id]');
  if (productEl) {
    var productName = document.querySelector('.product-title, h1')?.textContent?.trim();
    var productPrice = document.querySelector('.product-price, [data-product-price]')?.textContent;
    var price = productPrice ? parseFloat(productPrice.replace(/[^0-9.]/g, '')) : 0;

    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: 'view_item',
      ecommerce: {
        items: [{
          item_id: productEl.getAttribute('data-product-id'),
          item_name: productName || '',
          price: price
        }]
      }
    });
  }

  // Add to cart tracking
  var addToCartBtns = document.querySelectorAll(
    '.add-to-cart-btn, [data-action="add-to-cart"], button[class*="cart"]'
  );
  addToCartBtns.forEach(function(btn) {
    btn.addEventListener('click', function() {
      window.dataLayer.push({
        event: 'add_to_cart',
        ecommerce: {
          items: [{
            item_id: productEl?.getAttribute('data-product-id') || '',
            item_name: document.querySelector('.product-title, h1')?.textContent?.trim() || ''
          }]
        }
      });
    });
  });
});
</script>

Form Tracking

Hostinger Website Builder forms submit via AJAX. Track submissions:

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Watch for form submit events
  document.querySelectorAll('form').forEach(function(form) {
    form.addEventListener('submit', function(e) {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: 'form_submit',
        form_id: form.id || form.getAttribute('data-form-id') || 'contact'
      });
    });
  });

  // Watch for success message (AJAX forms)
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(m) {
      m.addedNodes.forEach(function(node) {
        if (node.nodeType === 1 && node.textContent &&
            node.textContent.indexOf('success') > -1) {
          window.dataLayer.push({ event: 'form_success' });
        }
      });
    });
  });

  document.querySelectorAll('[class*="form"]').forEach(function(el) {
    observer.observe(el, { childList: true, subtree: true });
  });
});
</script>

Common Issues

Integration Conflicts

Using both the built-in Google Analytics integration AND a GTM container that also loads GA4 will produce duplicate pageview events. Choose one method:

• Use the built-in GA4 integration for simple pageview tracking
• Use the built-in GTM integration for full tag management
• Use Custom Code injection for maximum control

Do not combine the built-in GA integration with GTM if GTM also deploys GA4.

Custom Code Not Appearing After Save

Custom code changes require the site to be republished. After editing the Custom Code fields, click Publish or Update in the editor. The staging preview may not execute custom scripts.

No Per-Page Code Injection

All custom code is global. Use conditional JavaScript for page-specific tracking:

if (window.location.pathname.startsWith('/landing/')) {
  window.dataLayer.push({
    event: 'campaign_landing',
    campaign: 'summer_2026'
  });
}

E-commerce Selectors Vary by Template

Hostinger Website Builder uses different templates with varying DOM structures. The product-related CSS selectors (.product-title, .add-to-cart-btn) may differ between templates. Inspect the rendered HTML of your specific template to identify the correct selectors.

AI-Generated Content Tracking

Hostinger's AI tools (AI Writer, AI Logo Maker) generate content at build time. The generated content is standard HTML in the published output and does not require special tracking considerations. There are no AI-specific JavaScript events or DOM attributes to monitor.

Zyro-Era Site Migration Issues

Sites migrated from Zyro may have legacy code in custom fields that references old Zyro-specific selectors or API endpoints. Audit custom code fields after migration and update any references to:

• *.zyro.com domains (now *.hostinger.com)
• Zyro-specific CSS class names (may have been renamed)
• Old integration settings that did not transfer

Platform-Specific Considerations

No template editing: Hostinger Website Builder does not expose HTML template files. You cannot modify layout structure, add conditional server-side logic, or inject code at specific template insertion points. All tracking code goes through the global Custom Code fields.

Hostinger hPanel access: Site management, DNS, and hosting settings are in Hostinger's hPanel (hpanel.hostinger.com). The website builder is launched from hPanel but runs as a separate application. Analytics integrations are configured within the builder, not in hPanel.

SSL and CDN: Hostinger provides free SSL and CDN on all Website Builder plans. Pages are served over HTTPS with Cloudflare or Hostinger's own CDN. Analytics scripts must use HTTPS endpoints.

Mobile editor: Hostinger Website Builder has a separate mobile editing view. Custom Code injection applies to both desktop and mobile versions. There is no way to inject mobile-only or desktop-only tracking code through the builder interface. Use window.innerWidth or user-agent detection in your scripts if needed.

Cookie consent: Hostinger provides a built-in cookie banner under Settings > Legal. It manages consent display but does not integrate with Google Consent Mode. Check the consent cookie before firing tracking scripts:

// Check Hostinger consent cookie
var consentGiven = document.cookie.indexOf('h_cookie_consent=1') > -1;
if (consentGiven) {
  // Initialize analytics
}

No public API for auditing: Hostinger Website Builder does not provide a public REST API for site configuration or content. Analytics code auditing requires inspecting the rendered HTML of the published site.