Dev Docs

Appearance

Proxy Path ​

Learn how to route Elevar requests through your domain to bypass ad-blockers.

Overview ​

Follow this guide to learn how to configure a proxy path that routes Elevar requests through your own domain. This helps prevent ad blockers from blocking Elevar traffic by making requests appear as same-origin requests.

When a proxy path is configured, requests that would normally be sent directly to Elevar domains are instead routed through your site first and then forwarded to Elevar’s servers.

Why a Proxy Path Is Required: ​

For Headless and Agnostic implementations, Elevar cannot proxy requests automatically. In these setups, requests are sent directly to Elevar servers by default, which makes them more likely to be blocked by ad blockers.

Using a proxy path helps ensure that:

  • Browser and network requests are less likely to be blocked
  • Client-side scripts and event data load reliably
  • Tracking accuracy is preserved across users and sessions

INFO

The setup process varies depending on your implementation path. Headless integrations need a single proxy, while Agnostic require a dual proxy for both static files and API events.

Headless Overview ​

For Shopify Headless integrations you need one proxy configuration:

  • Proxy path: /elevar
  • Destination: https://hits.getelevar.com

Agnostic Overview ​

For non-Shopify integrations you need two separate proxy configurations, this ensures proper routing for both static assets and event data:

Static Files:

  • Proxy path: /elevar/static
  • Destination: https://hits.getelevar.com

API Events:

  • Proxy path: /elevar
  • Destination: https://aa-hits.getelevar.com Both proxies are required for Agnostic implementations to function correctly.

Set up the proxy ​

The exact steps for configuring a proxy depend on the platform or framework used by your site. The examples below demonstrate common configurations, but they are not exhaustive.

Your proxy path can use any route you choose. All examples below use /elevar, but this value is configurable later in the Elevar script. The destination URLs must match exactly based on your implementation path.

Next.js ​

js
// next.config.js
// https://nextjs.org/docs/pages/api-reference/next-config-js/rewrites

module.exports = {
  async rewrites() {
    return [
      {
        source: "/elevar",
        destination: "https://hits.getelevar.com"
      }
    ];
  }
};
js
// next.config.js
// https://nextjs.org/docs/pages/api-reference/next-config-js/rewrites

module.exports = {
  async rewrites() {
    return [
      {
        source: "/elevar/static",
        destination: "https://hits.getelevar.com"
      },
      {
        source: "/elevar",
        destination: "https://aa-hits.getelevar.com"
      }
    ];
  }
};

Nuxt ​

ts
// nuxt.config.ts
// https://nuxt.com/docs/api/nuxt-config#nitro
// https://nitro.unjs.io/config#routerules

export default defineNuxtConfig({
  nitro: {
    routeRules: {
      "/elevar": {
        proxy: "https://hits.getelevar.com"
      }
    }
  }
});
ts
// nuxt.config.ts
// https://nuxt.com/docs/api/nuxt-config#nitro
// https://nitro.unjs.io/config#routerules

export default defineNuxtConfig({
  nitro: {
    routeRules: {
      "/elevar/static": {
        proxy: "https://hits.getelevar.com"
      },
      "/elevar": {
        proxy: "https://aa-hits.getelevar.com"
      }
    }
  }
});

Express ​

js
// app.js
// https://expressjs.com/
// https://github.com/villadora/express-http-proxy

app.use("/elevar", proxy("https://hits.getelevar.com"));
js
// app.js
// https://expressjs.com/
// https://github.com/villadora/express-http-proxy

app.use("/elevar/static", proxy("https://hits.getelevar.com"));

app.use("/elevar", proxy("https://aa-hits.getelevar.com"));

Remix / Shopify Hydrogen V2 ​

js
// app/routes/elevar.$.js
// https://remix.run/docs/en/main/guides/resource-routes

// Your proxy path is based on the path of this file.
// For example, this file's proxy path would be "/elevar".
// If using a different path, update `outgoingPath` below.

const outgoingOrigin = "https://hits.getelevar.com";

const proxy = async ({ request }) => {
  const incomingUrl = new URL(request.url);
  const outgoingPath = incomingUrl.pathname.replace("/elevar", "");
  const outgoingUrl = new URL(
    outgoingPath + incomingUrl.search,
    outgoingOrigin
  );
  const newRequest = new Request(outgoingUrl.toString(), new Request(request));
  return await fetch(newRequest);
};

export const loader = proxy;
export const action = proxy;

Update the Elevar Script ​

After configuring your proxy path, you'll need to update the script previously installed following the Install Scripts guide.

WARNING

Copy the script fresh from the Elevar app instead of editing your previous version.

Modify the Script ​

Make two changes to the copied script:

Update 1: Add the Proxy Path Setting

In the empty settings object, add your proxy path via the proxyPath property:

js
const settings = { proxyPath: "/elevar" };

Update 2: Update the Config Import URL

Replace the config import URL https://shopify-gtm-suite.getelevar.com with your proxy path + /static:

js
const config = (await import("/elevar/static/.../config.js")).default;

Full Script Example ​

The example below demonstrates how the proxy path is applied. Do not copy this script directly. Always use the script provided in the Elevar app, which includes your unique website ID.

html
<script type="module">
  try {
    // your proxy path
    const settings = { proxyPath: "/elevar" };
    //update to include proxy path
    const config = (await import("/elevar/static/.../config.js")).default;
    const scriptUrl = settings.proxyPath
      ? `${settings.proxyPath}${config.script_src_custom_pages_proxied}`
      : config.script_src_custom_pages;
    if (scriptUrl) {
      const { handler } = await import(scriptUrl);
      await handler(config, settings);
    }
  } catch (error) {
    console.error("Elevar Error:", error);
  }
</script>

Validate Changes ​

After updating the script and configuring the proxy, confirm that everything is loading correctly.

Console Validation: ​

  • Open your website in a browser and access the browser’s developer tools
  • Go to the Console tab
    • Type window.ElevarInvalidateContext and press Enter
    • If the object is defined, the Elevar script is loading correctly.

Network Validation: ​

  • Open the Network tab and confirm that Elevar requests are routed through your proxy path /elevar, instead of being sent directly to getelevar.com domains.

Copyright © 2025 Elevar