Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

[馃悶] resolveUrl function in partytown config does not work #553

Open
tyler-johnson-mm opened this issue Feb 5, 2024 · 2 comments
Open
Labels
bug Something isn't working

Comments

@tyler-johnson-mm
Copy link

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

  1. Create a website
  2. Add Google Tag Manager Script
  3. Add Partytown
  4. 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.

@tyler-johnson-mm tyler-johnson-mm added the bug Something isn't working label Feb 5, 2024
@j0Shi82
Copy link
Contributor

j0Shi82 commented Feb 19, 2024

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;
    };
}

@totodot
Copy link

totodot commented May 21, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants