[๐] resolveUrl function in partytown config does not work
Opened this issue ยท 2 comments
Describe the bug
I am setting up Partytown to handle multiple 3rd party scripts, however to start with, I am only testing it with Google Tag Manager. In order to bypass any CORS issues, I am using a reverse proxy in Cloudflare using a web worker. I am trying to use the resolveUrl function in the Partytown configuration according to the documentation, however the resolveUrl function does not seem to run. Nothing indicates that it does run and nothing in the network tab in dev tools shows a would-be resolved url.
Steps I have take so far:
- I have confirmed that Partytown does work for scripts in the HTML using a simple test script (see below)
- I have confirmed that the reverse proxy is working by typing the would-be resolved url in Chrome and in Postman
- I have attempted to put logs inside of the resolveUrl function to see if it is being called (but nothing happened)
Here is the configuration I am using (actual domain replaced with 'example')
partytown = {
resolveUrl: function(url, location, type) {
if (type === 'script') {
let proxyUrl = new URL("https://example.com/proxy")
proxyUrl.searchParams.append('url', url.href)
return proxyUrl;
}
return url;
},
debug: 'true',
lib: "/js/~partytown",
forward: [
'dataLayer.push' // Google Tag Manager
],
}
Here is the Google Tag Manager Script (actual id replaced with 'G-ID')
<script type="text/partytown" src="https://www.googletagmanager.com/gtag/js?id=G-ID"></script>
Here is the test script used to make sure Partytown is running
<script type="text/partytown">
for (let i = 0; i < 10000; i++) {
console.log('Testing')
}
</script>
Reproduction
Working locally
Steps to reproduce
- Create a website
- Add Google Tag Manager Script
- Add Partytown
- View website
Browser Info
Chrome Version 121.0.6167.139, Safari Version 15.6.1 (17613.3.9.1.16)
Additional Information
Project uses Laravel 10 with Laravel Mix.
I'm using resolveUrl
in many projects and it seems to work fine. See: https://www.partydawn.top/?sgtm&pt
It uses the following settings code:
const params = new URLSearchParams(location.search);
const pt = params.has("pt");
const xhrfetch = params.has("xhrfetch");
const xhrallow = params.has("xhrallow");
partytown = {
forward: pt ? ["dataLayer.push"] : [],
allowXhrCredentials: xhrallow,
debug: true,
logCalls: true,
logGetters: true,
logSetters: true,
logImageRequests: true,
logScriptExecution: true,
logSendBeaconRequests: true,
logStackTraces: false,
};
if (xhrfetch) {
partytown.resolveUrl = function (url, location, type) {
if (type === "script" && url.host !== "proxy.partydawn.top") {
const proxyUrl = new URL("https://proxy.partydawn.top/api/partytown/proxy");
proxyUrl.searchParams.set("url", url.href);
proxyUrl.searchParams.set("xhrfetch", true);
return proxyUrl;
}
return url;
};
} else {
partytown.resolveUrl = function (url, location, type) {
if (type === "script" && url.host !== "proxy.partydawn.top") {
const proxyUrl = new URL("https://proxy.partydawn.top/api/partytown/proxy");
proxyUrl.searchParams.set("url", url.href);
return proxyUrl;
}
return url;
};
}
Same here resolveUrl
not fired i nextjs app
<Partytown
debug={true}
resolveUrl={(url, location, type) => {
console.log(url);
return url;
}}
forward={['dataLayer.push']}
/>
<script
key="plugin-google-tagmanager"
type="text/partytown"
dangerouslySetInnerHTML={{
__html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','${GOOGLE_TAG_MANAGER}');`,
}}
/>
Other props like logScriptExecution
don't work too.
So only debug and forward props works fine for Partytown
component.