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.
• In all cases, you'll need to consider both your proxy path and our server URL. Your proxy path can be anything you want (it's configurable in our code as shown in step 2), but our server URL must be https://hits.getelevar.com.

Example: Next.js

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

module.exports = {
  async rewrites() {
    return [
      {
        source: "/elevar", // your proxy path
        destination: "https://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: {
      // your proxy path
      "/elevar": {
        // our server URL
        proxy: "https://hits.getelevar.com",
      },
    },
  },
});

Example: Express

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

app.use(
  "/elevar", // your proxy path
  proxy("https://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"!