attribu.tech

Firebase Hosting proxy

Proxy attribu.tech analytics through Firebase Hosting using Cloud Functions.

This is a server-specific guide. See Proxy the tracking script for an overview of why and how proxying works.
Firebase Hosting doesn't support reverse proxy natively. This guide uses Cloud Functions as a workaround to proxy requests to attribu.tech.

1. Set up Firebase Functions

If you haven't already, initialize Firebase Functions in your project:

firebase init functions

2. Install dependencies

cd functions && npm install express express-http-proxy

3. Create the Cloud Function

Replace or update functions/index.js with an Express app that proxies script and event requests to attribu.tech:

const functions = require("firebase-functions");
const express = require("express");
const proxy = require("express-http-proxy");

const app = express();

// Proxy the attribu.tech tracking script
app.get("/js/attribu.js", proxy("attribu.tech", {
  https: true,
  proxyReqPathResolver: () => "/js/script.js",
}));

// Proxy the attribu.tech event API
app.post("/api/proxy/events", proxy("attribu.tech", {
  https: true,
  proxyReqPathResolver: () => "/api/events",
  proxyReqOptDecorator: (proxyReqOpts, srcReq) => {
    proxyReqOpts.headers["X-Forwarded-For"] =
      srcReq.headers["x-forwarded-for"] || srcReq.ip;
    return proxyReqOpts;
  },
}));

exports.reverseProxy = functions.https.onRequest(app);

4. Configure Firebase Hosting rewrites

In your firebase.json, add rewrites so Firebase Hosting routes the proxy paths to your Cloud Function:

{
  "hosting": {
    "public": "public",
    "rewrites": [
      {
        "source": "/js/attribu.js",
        "function": "reverseProxy"
      },
      {
        "source": "/api/proxy/events",
        "function": "reverseProxy"
      }
    ]
  }
}

5. Update your script tag

Point the script src to your proxied path and set data-api-url to your proxied API endpoint:

<script
  defer
  data-website-id="YOUR_SITE_ID"
  data-domain="yourdomain.com"
  data-api-url="https://yourdomain.com/api/proxy/events"
  src="/js/attribu.js"
></script>
Replace YOUR_SITE_ID with your actual Website ID from attribu.tech. Replace yourdomain.com with your website's root domain.

6. Deploy

firebase deploy --only hosting,functions

Verify installation

  1. Visit your site in an incognito/private window.
  2. Open your browser's Developer Tools and go to the Network tab.
  3. Confirm the script loads from /js/attribu.js on your domain.
  4. Confirm the pageview POST goes to /api/proxy/events on your domain.
  5. Check your attribu.tech dashboard. A new pageview should appear within a few seconds.

Troubleshooting

  • Function not found - Make sure the function name in firebase.json rewrites matches the export name in functions/index.js (both should be reverseProxy).
  • Cold start delays - Cloud Functions may take a few seconds on the first request. Subsequent requests will be faster.
  • Script loads but no pageviews - Verify the /api/proxy/events rewrite is in your firebase.json and that the function handles POST requests.
  • CORS errors - The proxy should eliminate CORS issues since both the script and API are served from your domain. If you still see errors, make sure the proxy is not adding extra CORS headers that conflict.

What's next

PreviousAstroNextLaravel
Copied