Tracking Script

Add the Entrolytics tracking script to your website

Tracking Script

The Entrolytics tracking script is lightweight (under 1KB), privacy-focused, and easy to install. This guide covers installation methods for all major platforms and frameworks.

Why Use the Tracking Script?

  • ⚡ Incredibly lightweight - Less than 1KB gzipped
  • 🚀 No performance impact - Async loading, non-blocking
  • 🔒 Privacy-first - No cookies, GDPR compliant
  • 📊 Automatic tracking - Page views tracked automatically
  • 🎯 Custom events - Track any user interaction
  • 🌐 Universal - Works with any website or framework

Basic Installation

Add this script to your website's <head> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>

    <!-- Entrolytics Tracking Script -->
    <script
      defer
      src="https://cloud.entrolytics.click/script.js"
      data-website-id="YOUR_WEBSITE_ID"
    ></script>
  </head>
  <body>
    <!-- Your content -->
  </body>
</html>

Replace YOUR_WEBSITE_ID with your actual Website ID from the dashboard.

For better integration, use the @entro314labs/entro-nextjs SDK

Or add the script tag to your root layout:

app/layout.tsx
import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <Script
          defer
          src="https://cloud.entrolytics.click/script.js"
          data-website-id={process.env.NEXT_PUBLIC_ENTROLYTICS_WEBSITE_ID}
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

For better integration, use the @entro314labs/entro-react SDK

Or add to your index.html:

public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>

    <!-- Entrolytics -->
    <script
      defer
      src="https://cloud.entrolytics.click/script.js"
      data-website-id="%REACT_APP_ENTROLYTICS_WEBSITE_ID%"
    ></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

For better integration, use the @entro314labs/entro-vue SDK

Or add to your index.html:

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue App</title>

    <!-- Entrolytics -->
    <script
      defer
      src="https://cloud.entrolytics.click/script.js"
      data-website-id="YOUR_WEBSITE_ID"
    ></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Platform-Specific Guides

Content Management Systems

Option 1: Use the Entrolytics WordPress Plugin (Recommended)

Install from WordPress Plugin Directory or see WordPress integration.

Option 2: Add Manually

Edit Theme Header

Go to Appearance → Theme Editor → header.php

Add Script

Add before </head>:

<!-- Entrolytics -->
<script
  defer
  src="https://cloud.entrolytics.click/script.js"
  data-website-id="<?php echo esc_attr( get_option('entrolytics_website_id') ); ?>"
></script>

Save Changes

Click Update File

Option 3: Use a Plugin

  • Insert Headers and Footers
  • WPCode (formerly Insert Headers and Footers)
  • Head, Footer and Post Injections

Open Project Settings

Click the gear icon in the left sidebar

Go to Custom Code tab

Add to Head Code

Paste the tracking script in Head Code:

<script
  defer
  src="https://cloud.entrolytics.click/script.js"
  data-website-id="YOUR_WEBSITE_ID"
></script>

Publish

Publish your site for changes to take effect

Open Settings

Go to Settings → Custom Code

Add Code to Head

Click + Add Custom Code

  • Code snippet: Paste tracking script
  • Add Code to: Choose "Head"
  • Load code on: All pages
<script
  defer
  src="https://cloud.entrolytics.click/script.js"
  data-website-id="YOUR_WEBSITE_ID"
></script>

Apply

Click Apply and publish your site

Go to Settings

Click Settings → Advanced → Code Injection

Paste in Header

Add to Header section:

<script
  defer
  src="https://cloud.entrolytics.click/script.js"
  data-website-id="YOUR_WEBSITE_ID"
></script>

Save

Click Save - changes apply immediately

E-commerce Platforms

Option 1: Use the Entrolytics Shopify App (Recommended)

Install from Shopify App Store for automatic setup.

Option 2: Add Manually

Edit Theme

Go to Online Store → Themes → Actions → Edit code

Open theme.liquid

Find theme.liquid in the Layout folder

Add Script

Add before </head>:

<!-- Entrolytics -->
<script
  defer
  src="https://cloud.entrolytics.click/script.js"
  data-website-id="YOUR_WEBSITE_ID"
></script>

Save

Click Save and preview your store

Same as WordPress above, or use a code injection plugin.

Track e-commerce events:

// Add to functions.php
add_action('woocommerce_thankyou', 'entrolytics_track_purchase');

function entrolytics_track_purchase($order_id) {
  $order = wc_get_order($order_id);
  ?>
  <script>
    window.entrolytics?.track('purchase', {
      order_id: '<?php echo $order_id; ?>',
      total: <?php echo $order->get_total(); ?>,
      currency: '<?php echo $order->get_currency(); ?>'
    }, <?php echo $order->get_total(); ?>);
  </script>
  <?php
}

Go to Storefront

Navigate to Storefront → Script Manager

Create Script

Click Create a Script

  • Name: Entrolytics
  • Location: Head
  • Select pages: All pages
  • Script type: Script

Add Code

<script
  defer
  src="https://cloud.entrolytics.click/script.js"
  data-website-id="YOUR_WEBSITE_ID"
></script>

Save

Click Save to activate

Edit Base Template

Edit your theme's base template file, typically: app/design/frontend/[Vendor]/[Theme]/Magento_Theme/layout/default_head_blocks.xml

Add Script Block

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <head>
    <script
      src="https://cloud.entrolytics.click/script.js"
      defer="defer"
      data-website-id="YOUR_WEBSITE_ID"
    />
  </head>
</page>

Clear Cache

php bin/magento cache:clean
php bin/magento cache:flush

Static Site Generators

Use the @entro314labs/entro-astro SDK (Recommended)

Or add to your base layout:

src/layouts/Layout.astro
---
const { title } = Astro.props;
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>

    <!-- Entrolytics -->
    <script
      is:inline
      defer
      src="https://cloud.entrolytics.click/script.js"
      data-website-id={import.meta.env.PUBLIC_ENTROLYTICS_WEBSITE_ID}
    ></script>
  </head>
  <body>
    <slot />
  </body>
</html>

Add to your base template:

layouts/_default/baseof.html
<!DOCTYPE html>
<html lang="{{ .Site.Language.Lang }}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>

    <!-- Entrolytics -->
    <script
      defer
      src="https://cloud.entrolytics.click/script.js"
      data-website-id="{{ .Site.Params.entrolyticsWebsiteId }}"
    ></script>
  </head>
  <body>
    {{ block "main" . }}{{ end }}
  </body>
</html>

Add to config.toml:

[params]
entrolyticsWebsiteId = "YOUR_WEBSITE_ID"

Add to your default layout:

_layouts/default.html
<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang }}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ page.title }} - {{ site.title }}</title>

    <!-- Entrolytics -->
    <script
      defer
      src="https://cloud.entrolytics.click/script.js"
      data-website-id="{{ site.entrolytics_website_id }}"
    ></script>
  </head>
  <body>
    {{ content }}
  </body>
</html>

Add to _config.yml:

entrolytics_website_id: YOUR_WEBSITE_ID

Add to your base layout:

_includes/layouts/base.njk
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>

    <!-- Entrolytics -->
    <script
      defer
      src="https://cloud.entrolytics.click/script.js"
      data-website-id="{{ entrolyticsWebsiteId }}"
    ></script>
  </head>
  <body>
    {{ content | safe }}
  </body>
</html>

Add to .eleventy.js:

module.exports = function(eleventyConfig) {
  eleventyConfig.addGlobalData("entrolyticsWebsiteId", "YOUR_WEBSITE_ID");
};

Manual Page View Tracking

For single-page applications or custom routing:

Disable Auto-Tracking

<script
  defer
  src="https://cloud.entrolytics.click/script.js"
  data-website-id="YOUR_WEBSITE_ID"
  data-auto-track="false"
></script>

Track Page Views Manually

// Track current page
entrolytics.track();

// Track custom page
entrolytics.track({
  url: '/virtual-page',
  referrer: document.referrer,
  title: 'Custom Page Title'
});

// Track on route change
window.addEventListener('popstate', () => {
  entrolytics.track();
});
import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'

function usePageTracking() {
  const location = useLocation()

  useEffect(() => {
    window.entrolytics?.track({
      url: location.pathname + location.search,
      referrer: document.referrer,
      title: document.title
    })
  }, [location])
}

// Use in App component
function App() {
  usePageTracking()
  return <Routes>...</Routes>
}
// router/index.js
import { createRouter } from 'vue-router'

const router = createRouter({...})

router.afterEach((to, from) => {
  window.entrolytics?.track({
    url: to.fullPath,
    referrer: from.fullPath,
    title: document.title
  })
})

export default router
<script>
  import { page } from '$app/stores'
  import { onMount } from 'svelte'

  $: {
    if (typeof window !== 'undefined') {
      window.entrolytics?.track({
        url: $page.url.pathname + $page.url.search,
        title: document.title
      })
    }
  }
</script>

Verification

Check that tracking is working correctly:

Visit Your Website

Open your website in a new browser window.

Check Network Tab

  1. Press F12 or Cmd+Option+I (Mac)
  2. Click Network tab
  3. Filter by "script.js" or "send"
  4. Reload the page
  5. Look for requests to cloud.entrolytics.click

Successful: Status 200, green indicators Failed: Red status, check console for errors

  1. Press F12 or Cmd+Option+I (Mac)
  2. Click Network tab
  3. Reload the page
  4. Look for script.js and /api/send requests

Successful: 200 OK status codes

  1. Enable Develop menu: Preferences → Advanced → "Show Develop menu"
  2. Press Cmd+Option+I
  3. Click Network tab
  4. Reload page
  5. Look for Entrolytics requests

Check Dashboard

  1. Open your Entrolytics dashboard
  2. Go to Real-time view
  3. Your visit should appear within 1-2 seconds

Test Custom Events

// Open browser console (F12)
entrolytics.track('test_event', { test: true })

Check dashboard for the custom event.

Content Security Policy

If your site uses CSP headers, add Entrolytics to the allowlist:

Content-Security-Policy:
  script-src 'self' https://cloud.entrolytics.click;
  connect-src 'self' https://cloud.entrolytics.click;
<meta
  http-equiv="Content-Security-Policy"
  content="script-src 'self' https://cloud.entrolytics.click; connect-src 'self' https://cloud.entrolytics.click;"
>
next.config.js
const cspHeader = `
  script-src 'self' 'unsafe-eval' 'unsafe-inline' https://cloud.entrolytics.click;
  connect-src 'self' https://cloud.entrolytics.click;
`

module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: cspHeader.replace(/\n/g, ''),
          },
        ],
      },
    ]
  },
}
add_header Content-Security-Policy "script-src 'self' https://cloud.entrolytics.click; connect-src 'self' https://cloud.entrolytics.click;";

Troubleshooting

Advanced Configuration

Proxy Mode

Bypass ad blockers by proxying requests through your domain:

See Proxy Configuration for full setup.

Custom Domain

Use your own domain for self-hosted instances:

<script
  defer
  src="https://analytics.yourdomain.com/script.js"
  data-website-id="YOUR_WEBSITE_ID"
  data-host-url="https://analytics.yourdomain.com"
></script>

Debug Mode

Enable console logging:

<script
  defer
  src="https://cloud.entrolytics.click/script.js"
  data-website-id="YOUR_WEBSITE_ID"
  data-debug="true"
></script>

All tracking calls will be logged to the console.

Best Practices

Next Steps

Edit on GitHub

Installation

Self-host Entrolytics on your own infrastructure

Configuration

Configure Entrolytics for your needs

Table of Contents

Tracking Script
Why Use the Tracking Script?
Basic Installation
Platform-Specific Guides
Content Management Systems
Edit Theme Header
Add Script
Save Changes
Open Project Settings
Navigate to Custom Code
Add to Head Code
Publish
Open Settings
Add Code to Head
Apply
Go to Settings
Paste in Header
Save
E-commerce Platforms
Edit Theme
Open theme.liquid
Add Script
Save
Go to Storefront
Create Script
Add Code
Save
Edit Base Template
Add Script Block
Clear Cache
Static Site Generators
Manual Page View Tracking
Disable Auto-Tracking
Track Page Views Manually
Verification
Visit Your Website
Check Network Tab
Check Dashboard
Test Custom Events
Content Security Policy
Troubleshooting
Advanced Configuration
Proxy Mode
Custom Domain
Debug Mode
Best Practices
Next Steps