​
Tracking clicks via a reverse proxy

To avoid ad-blockers from blocking your click-tracking requests, we recommend setting up a reverse proxy.

Depending on which backend framework you’re using, there are a few different ways to do this:

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: "/_proxy/codeqr/track/:path",
        destination: "https://api.codeqr.link/track/:path",
      },
    ];
  },
};

Once you’ve set up your reverse proxy, don’t forget to update the apiHost parameter in the <Analytics /> component to point to your proxy URL.

import { Analytics as CodeQRAnalytics } from "@codeqr/analytics/react";

export default function App() {
  return (
    <Layout>
      <CodeQRAnalytics
        apiHost="/_proxy/codeqr" // the URL of your reverse proxy
        domainsConfig={{
          refer: "go.example.com", // the custom domain you're using on CodeQR for your short links
        }}
        queryParam="via" // optional: query parameter to listen to for client-side click-tracking (default: "via")
      />
      {/* Your app code here */}
    </Layout>
  );
}

​
Loading the script via a reverse proxy

To avoid ad-blockers from blocking the @codeqr/analytics script, it is recommended to use a reverse proxy.

Depending on which backend framework you’re using, there are a few different ways to do this:

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: "/_proxy/codeqr/script.js",
        destination: "https://codeqr-cdn.pages.dev/analytics/script.js",
      },
    ];
  },
};

Once you’ve set up your reverse proxy, don’t forget to update the scriptProps.src parameter in the <Analytics /> component to point to your proxy URL.

import { Analytics as CodeQRAnalytics } from "@codeqr/analytics/react";

export default function App() {
  return (
    <Layout>
      <CodeQRAnalytics
        scriptProps={{
          src: "/_proxy/codeqr/script.js", // pointing to your reverse proxy
        }}
      />
      {/* Your app code here */}
    </Layout>
  );
}