Voog Analytics Integrations: Setup Guide | OpsBlu Docs

Voog Analytics Integrations: Setup Guide

Integrate GA4, GTM, and Meta Pixel with Voog using the built-in analytics settings, custom code injection, and Liquid template editing.

Voog is an Estonian website builder platform focused on multilingual websites and ecommerce. It uses Liquid templating (similar to Shopify) and provides both built-in analytics integration and custom code injection capabilities. Voog's standout feature is native multilingual support, which affects how analytics tracks language-specific page views.

Integration Architecture

Voog provides four integration paths:

  1. Built-in Analytics -- Navigate to Settings > Analytics to enter a Google Analytics tracking ID. Voog injects the tracking script automatically.
  2. Custom Code Injection -- Navigate to Settings > Custom Code to add scripts to the <head> and <body> sections of all pages.
  3. Liquid Template Editing -- Edit theme templates at Design > Edit Code. Voog uses Liquid templating with Voog-specific tags and objects, providing full control over script placement and data layer construction.
  4. Voog Plugins -- Some analytics integrations are available as Voog platform plugins, though the ecosystem is small.

Available Integrations

Analytics Platforms

Google Analytics 4

  • Built-in Analytics setting (Measurement ID)
  • Liquid template injection with full gtag.js
  • GTM-based GA4 (recommended for multilingual tracking)

Tag Management

Google Tag Manager

  • Custom Code head/body injection
  • Liquid layout template injection

Marketing Pixels

Meta Pixel

  • Via GTM container (recommended)
  • Custom Code head injection

Liquid Template Integration with Data Layer

Edit your theme's layout template at Design > Edit Code > layout.liquid to add GTM and a multilingual data layer:

<!DOCTYPE html>
<html lang="{{ page.language.code }}">
<head>
  <!-- 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-XXXX');</script>

  <script>
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    'pageTitle': {{ page.title | json }},
    'language': '{{ page.language.code }}',
    'languageName': '{{ page.language.title }}',
    'pageType': '{% if editmode %}edit{% elsif article %}article{% elsif product %}product{% else %}page{% endif %}',
    'siteName': {{ site.name | json }},
    {% if article %}
    'articleTitle': {{ article.title | json }},
    'articleAuthor': {{ article.author | json }},
    'articleDate': '{{ article.created_at | date: "%Y-%m-%d" }}',
    {% endif %}
    {% if product %}
    'productName': {{ product.name | json }},
    'productPrice': {{ product.price }},
    'productCurrency': '{{ site.currency }}',
    {% endif %}
  });
  </script>

  {{ site.header }}
</head>
<body>
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

  {{ content }}
  {{ site.footer }}
</body>
</html>

Voog Liquid Objects for Analytics

Voog's Liquid template language exposes content-specific objects:

Voog Object Data Layer Variable Notes
page.language.code language en, et, de, etc.
page.title pageTitle Current page title
article.title articleTitle Blog article title
article.author articleAuthor Article author name
product.name productName Product name (ecommerce)
product.price productPrice Product price
site.currency currency Store currency code
editmode (exclude) True when in admin editor

Platform Limitations

Edit mode tracking. Voog's Liquid templates render in edit mode when admins are editing pages. The editmode variable is true during editing. Exclude analytics from edit mode to avoid polluting data:

{% unless editmode %}
  <!-- GTM and tracking code -->
{% endunless %}

Multilingual URL structure. Voog creates language-specific URLs (e.g., /en/about, /et/meist). GA4 treats these as separate pages by default. Use the language data layer variable to create a GA4 custom dimension for cross-language content analysis.

Limited ecommerce events. Voog's built-in ecommerce does not push structured events (add_to_cart, begin_checkout, purchase) to a data layer. Product page views can be tracked via the product Liquid object, but cart and checkout events require client-side DOM observation.

Small plugin ecosystem. Voog has a limited number of platform plugins. Most analytics implementations use Liquid template editing or the built-in integration fields.

Performance Considerations

  • CDN-served pages. Voog serves pages from a CDN. Third-party tracking scripts add external DNS lookups on top of the CDN-served HTML.
  • Liquid rendering. Data layer construction in Liquid templates runs server-side during page generation. This is fast and has negligible performance impact.
  • Multilingual page weight. Voog's language switcher component loads all language URLs. This is a DOM-only concern but adds content for search engine crawlers to index.
  1. Add GTM to layout.liquid -- Wrap in {% unless editmode %} to exclude editor sessions
  2. Build multilingual data layer -- Include language code and language name on all pages
  3. Configure GA4 via GTM -- Create language custom dimension, map page types to content groups
  4. Add Meta Pixel via GTM -- Standard engagement tracking with language segmentation

Next Steps

For general integration concepts, see the integrations overview.

Nach oben