Skip to main content

Gatsby Integration

Add Ovyxa analytics to your Gatsby site using gatsby-ssr.js for server-rendered script injection.

Create or edit gatsby-ssr.js in your project root:

gatsby-ssr.js
const React = require('react')

exports.onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    React.createElement('script', {
      key: 'ovyxa',
      defer: true,
      'data-domain': 'yourdomain.com',
      src: 'https://ovyxa.com/js/script.js',
    }),
  ])
}

Option 2: Using gatsby-browser.js​

Add the script dynamically on the client side:

gatsby-browser.js
exports.onClientEntry = () => {
  const script = document.createElement('script')
  script.defer = true
  script.dataset.domain = 'yourdomain.com'
  script.src = 'https://ovyxa.com/js/script.js'
  document.head.appendChild(script)
}

Tracking Custom Events​

Track route changes and custom interactions:

gatsby-browser.js
exports.onRouteUpdate = ({ location }) => {
  // Track specific page visits as events
  if (location.pathname.startsWith('/pricing')) {
    window.ovyxa?.('event', 'ViewPricing', {
      props: { path: location.pathname },
    })
  }
}

Or trigger events from any component:

function SignupButton() {
  const handleClick = () => {
    window.ovyxa('event', 'Signup', { props: { plan: 'starter' } })
  }
  return <button onClick={handleClick}>Sign Up</button>
}

Cookieless Mode​

Add data-cookieless to skip cookie consent requirements:

gatsby-ssr.js
React.createElement('script', {
  key: 'ovyxa',
  defer: true,
  'data-domain': 'yourdomain.com',
  'data-cookieless': true,
  src: 'https://ovyxa.com/js/script.js',
})

Verify Installation​

  1. Build your site (gatsby build && gatsby 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​