Setting up a proxy using Nginx

Optimize tracking by proxying data via Nginx.

NGINX is a popular web server and reverse proxy. If you’re using NGINX to serve your website, we’ve prepared this guide to help you proxy the traffic through your own domain.

Setup

NGINX Configuration

Below you can see an example config for proxying the Vemetric Script and Hub. Please make sure to adjust the config according to your needs (like adding SSL certificates). At least you need to adjust the server_name to your desired domain.

We recommend avoiding names or paths like analytics.yourdomain.com or yourdomain.com/track, as this might also trigger ad/tracker blockers.
Use more generic names like hub.yourdomain.com instead.

upstream vemetric-hub {
    server hub.vemetric.com:443;
}

upstream vemetric-cdn {
    server cdn.vemetric.com:443;
}

server {
    listen 443 ssl;
    listen [::]:443 ssl;
    http2 on;
    server_name hub.yourdomain.com;

    charset utf-8;

    location /robots.txt {
        return 200 "User-agent: *\nDisallow: /";
    }

    location /main.js {
        proxy_http_version 1.1;
        proxy_ssl_server_name on;
        proxy_ssl_name "cdn.vemetric.com";
        proxy_set_header Host "cdn.vemetric.com";
        proxy_hide_header "cf-cache-status";
        proxy_hide_header "age";
        proxy_hide_header "report-to";
        proxy_hide_header "nel";
        proxy_hide_header "cf-ray";
        proxy_hide_header "alt-svc";
        proxy_hide_header "server-timing";
        proxy_redirect off;
        proxy_pass https://vemetric-cdn;
    }

    location / {
        proxy_http_version 1.1;
        proxy_ssl_server_name on;
        proxy_ssl_name "hub.vemetric.com";
        proxy_set_header Host "hub.vemetric.com";
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_hide_header "cf-cache-status";
        proxy_hide_header "age";
        proxy_hide_header "report-to";
        proxy_hide_header "nel";
        proxy_hide_header "cf-ray";
        proxy_hide_header "alt-svc";
        proxy_hide_header "server-timing";
        proxy_redirect off;
        proxy_pass https://vemetric-hub;
    }
}

Configure Vemetric

Depending on your setup you need to adjust the Vemetric configuration:

The src attribute of the script tag should now point to https://hub.yourdomain.com/main.js. You also need to pass the data-host attribute with the value of https://hub.yourdomain.com

<script>
  window.vmtrcq = window.vmtrcq || [];
  window.vmtrc = window.vmtrc || function (){window.vmtrcq.push(Array.prototype.slice.call(arguments))};
</script>
<script defer src="https://hub.yourdomain.com/main.js" data-host="https://hub.yourdomain.com" data-token="YOUR_PROJECT_TOKEN"></script>

For the JavaScript SDK, you need to pass the scriptUrl and host options to the init function with the value of your proxy domain.

import { vemetric } from '@vemetric/web';

vemetric.init({
  token: 'YOUR_PROJECT_TOKEN',
  scriptUrl: 'https://hub.yourdomain.com/main.js',
  host: 'https://hub.yourdomain.com',
});

For the React SDK, you need to pass the scriptUrl and host props to the VemetricScript component with the value of your proxy domain.

import { VemetricScript } from '@vemetric/react';

<VemetricScript
  token="YOUR_PROJECT_TOKEN"
  scriptUrl="https://hub.yourdomain.com/main.js"
  host="https://hub.yourdomain.com"
/>

For the Astro SDK, you need to pass the scriptUrl and host props to the VemetricScript component with the value of your proxy domain.

import { VemetricScript } from '@vemetric/astro';

<VemetricScript
  token="YOUR_PROJECT_TOKEN"
  scriptUrl="https://hub.yourdomain.com/main.js"
  host="https://hub.yourdomain.com"
/>

Congratulations! You’ve successfully set up a proxy using NGINX. Please reach out if you have any questions.

Vercel

Optimize tracking by proxying data via Vercel.

Cloudflare

Optimize tracking by proxying data via Cloudflare.