Overview

Proxying Elevar's Code:

On Shopify storefronts, Elevar automatically sends requests to our servers via Shopify's "App Proxy". This prevents ad-blockers from blocking our code, as the requests are made to the same subdomain as your storefront.

For e-commerce platforms outside of Shopify, Elevar cannot do this automatically. This means that for these websites, we send requests directly to our servers by default. This opens up the possibility for ad-blockers to block these requests.

If this is a concern to you, please follow the steps below to proxy the requests our code makes to our servers.

Set up the proxy

• Exactly how to set up the proxy will be unique based on the software you’re using for your site. Below are some examples of how to achieve this with popular web frameworks, but it is by no means an exhaustive list.
• You will need to set up two proxies, because Elevar serves static files and API events from different server URLs. Both are required — if the static files proxy is missing or points at the wrong server URL, our code will fail to load (you’ll see a 404 for the javascript assets).

  Proxy	Proxy Path	Server URL
  Static Files	your proxy path + /static	https://hits.getelevar.com
  API Events	your proxy path	https://aa-hits.getelevar.com

• Your proxy path can be anything you want (it’s configurable in our code as shown in step 2), but the /static sub-path and the two server URLs above must match exactly.
• Order matters: the static files proxy is more specific, so make sure it is matched before the API events proxy.

Example: Next.js

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

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

Example: Nuxt

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

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

Example: Express

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

// Register the static files proxy before the API events proxy
app.use(
  "/elevar/static", // static files proxy path
  proxy("https://hits.getelevar.com") // static files server URL
);

app.use(
  "/elevar", // your proxy path
  proxy("https://aa-hits.getelevar.com") // our server URL
);

Tell Elevar to Use the Proxy

• You will need to update the script you have previously installed as part of Browser Setup
  • Note that you should copy the script fresh from our app instead of editing anything you've copied before, as this script has changed to support this proxying feature.

Access API Source:

• Begin on your Elevar homepage and use the left-hand menu to click on the "My Tracking" tab.
• Under the list of your sources, click on the "API" box.
  • (See Figure 1)

Figure 1

Browser Setup:

• Once inside the API. source, navigate to the "Setup-Steps" box and click on the "Browser Setup" tab.
• Navigate to the "Browser Setup" section of the page and click on the "Copy to Clipboard" button.
  • (See Figure 2)

Figure 2

Update Script:

• You will need to make two updates to the script you've just copied!
  • Update 1: In the empty settings object, add your proxy path via the proxyPath property.
  • Update 2: Replace https://shopify-gtm-suite.getelevar.com with your proxy path + /static.
• Example - Do not copy this script - You need the script from our app!:

<script type="module">
  try {
    const settings = { proxyPath: "/elevar" }; // your proxy path
    const config = (await import("/elevar/static/configs/.../config.js")).default;  //update to include proxy path
    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 your changes

Once you have updated our script on your site to include your proxy path (and your proxy path is setup), let's make sure the script is loading correctly!

On your site, open up your browser's developer console, then type window.ElevarInvalidateContext. If this is defined, you are all set! You should also see that no requests are being made to "getelevar.com"!