Skip to main content

Eleventy Integration

Add Ovyxa analytics to your Eleventy (11ty) site by including the tracking script in your base layout template.

Step 1: Add the Script to Your Base Layout​

Edit your base layout file (commonly _includes/base.njk, _includes/layout.njk, or _includes/base.liquid) and add the script inside <head>:

_includes/base.njk
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>{{ title }}</title>
  <!-- ... other head content ... -->

  <script
    defer
    data-domain="yourdomain.com"
    src="https://ovyxa.com/js/script.js"
  ></script>
</head>
<body>
  {{ content | safe }}
</body>
</html>

That's it -- every page using this layout will automatically include Ovyxa tracking.

Using Environment Variables​

Make the domain configurable via Eleventy's global data:

_data/site.js
module.exports = {
  ovyxaDomain: process.env.OVYXA_DOMAIN || 'yourdomain.com',
}

Then reference it in your layout:

_includes/base.njk
{% if site.ovyxaDomain %}
<script
  defer
  data-domain="{{ site.ovyxaDomain }}"
  src="https://ovyxa.com/js/script.js"
></script>
{% endif %}

Tracking Custom Events​

Add event tracking anywhere in your templates or JavaScript:

<button onclick="window.ovyxa('event', 'Download', { props: { file: 'ebook.pdf' } })">
  Download eBook
</button>

Or from a JavaScript file:

window.ovyxa('event', 'ContactForm', { props: { page: window.location.pathname } })

Cookieless Mode​

Add data-cookieless to skip cookie consent requirements:

<script
  defer
  data-domain="yourdomain.com"
  data-cookieless
  src="https://ovyxa.com/js/script.js"
></script>

Verify Installation​

  1. Build and serve your site (npx @11ty/eleventy --serve)
  2. Visit the local or deployed site
  3. Open the browser Network tab and look for a request to ovyxa.com/js/script.js
  4. Check your Ovyxa dashboard to confirm pageviews are appearing

Next Steps​