[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:
#408 (comment)

[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?