[Feature Request] Adding option to add Reverse Proxy.

[cyfyifanchen]

Adding option to add Reverse Proxy.

[kkopp001]

yesssss pleeaaase...... Half of our traffic doesnt get recorded which is super frustrating...

[onyoo]

I took a stab at this in our codebase.. I can re-route the /collect calls with something like this, but I can't seem to intercept the https://www.clarity.ms/tag call which is required to start the /collect calls. Abandoning for now. Just mentioning it to show interest in this ticket.

(function() {
    var proxiedXhr = window.XMLHttpRequest;

    window.XMLHttpRequest = function() {
        var xhr = new proxiedXhr();

        xhr.addEventListener("load", function(p) {
            const originalUrl = p.target.responseURL;
            console.log("Intercepted XMLHttpRequest call", originalUrl);
            if (originalUrl.startsWith("https://r.clarity.ms/collect")
             xhr.open('GET', "other-url/clarity-collect");
        });

        return xhr;
    };
})();

[z0nekill]

An alternative way is to use the npm package clarity-js. By setting the upload parameter of the clarity configuration to a reverse proxy URL you can funnel your traffic through your domain.

Conversely, if you were to do a custom inline tag of https://www.clarity.ms/tag/<project_id> and modify the upload parameter before loading it into a script tag that could also be a viable option, at least until it's officially supported by Clarity.

NPM Configuration Approach: https://github.com/microsoft/clarity/issues/408#issuecomment-2095062739

[cyfyifanchen]

I thought the npm package clarity-js isn't recommended and the script tag is. But the workaround is nice, have you tested it?

[z0nekill]

I'm using the npm package approach myself and have hardcoded the necessary values (works for now), I did take a look at using Regex to extract the configuration JSON from https://www.clarity.ms/tag/<project_id> to use with the NPM module but it was hacky - and prone to breaking.

However, your use case of modifying the upload parameter would be less hacky ;) as you would just be replacing

upload: "https://z.clarity.ms/collect" => "https://<mydomain>/collect"

But I wouldn't recommend it - because the script coming back from that service is bound to change, and so could the parameters and version of clarity-js returned as well.

[cyfyifanchen]

Good to know, thanks for the detailed info. Let me try it out and see what I can share here.

[TurkerTunali]

It seems Mautic and Piwik are our only options because most of the visitors have adblockers.

[TonsiTT]

I tried proxying and it worked but it seems the collect endpoint takes the IP address of the proxy as the 'location' for the user session instead

[z0nekill]

Have you tried setting X-Forwarded-For headers in your proxy setup?

[TonsiTT]

Have you tried setting X-Forwarded-For headers in your proxy setup?

Yup, didn't work

[onyoo]

I tried proxying and it worked but it seems the collect endpoint takes the IP address of the proxy as the 'location' for the user session instead

How did you proxy it? You and I seem to describe opposite problems (see my code above)

[TonsiTT]

I tried proxying and it worked but it seems the collect endpoint takes the IP address of the proxy as the 'location' for the user session instead

How did you proxy it? You and I seem to describe opposite problems (see my code above)

You can rewrite all clarity URLs to another domain name and just forward the call to the original URL. Alas, there is no use since it will give the wrong location on the clarity side