Proxying Elevar's Non-Shopify Subdomain Code

Overview

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 non-Shopify subdomains, Elevar cannot do this automatically. This means that for these subdomains, 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 "Non-Shopify Subdomain" code makes to our servers.

Step 1: 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: Remix / Shopify Hydrogen V2

// 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".

const proxy = async ({ request }) => {
  const newUrl = new URL(request.url);
  newUrl.host = "https://hits.getelevar.com"; // our server URL
  const newRequest = new Request(newUrl.toString(), new Request(request));
  return await fetch(newRequest);
};

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

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
);

Step 2: Tell Elevar to use the proxy

You'll need to update the script you've previously installed as part of setting up the "Non-Shopify Subdomains" source. 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.

In the Elevar App, head to "My Tracking", then click "Non-Shopify Subdomains" source.

Inside this source, head to the "Prepare Your Pages" step, then click the "Copy to Clipboard" button.

You'll 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>

Step 3: Validate your changes

Once you've 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"!