[🐞] Error 404 for '/_next/static/%7Epartytown/proxytown' and some iOS/Safari versions about partytown HOT 4 OPEN

we had to disable it. analytics data is priority over performance for our business now. ios users are about 1/3 and it's a lot of data lost.

we'll monitor this thread.

just one of many apple things we had to deal with. safari seems to be the new internet explorer for web evolution. :/

from partytown.

Ok not sure if this is exactly the same issue, but we found a drop in traffic as well when using Google Tag Manger, and I think we share the same underlying problem. Specifically for us, the drop was from Safari (in-app) traffic, and we were able to fix it by updating the GTM snippet.

I'll explain what the issue is below but the TL;DR is, because the GTM snippet dynamically loads the gtm.js script, if the snippet itself is loaded by partytown, then the fallback partytown has in place won't work. You need to check to make sure serviceWorkers are supported. Here's our updated snippet that started working for us. We added navigator as an argument to check if service workers were available.

(function(w,d,s,l,i,n){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.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;
  j.type=n.serviceWorker ? 'text/partytown' : ''; // <--------------make sure service workers work. if not, load like normal.
  j.async=!n.serviceWorker; // <------------------- this isn't necessary, but the script is already a little delayed from partytown. Didn't want it delayed any more than it is.
  f.parentNode.insertBefore(j,f);
  w.dispatchEvent(new CustomEvent('ptupdate')); // <----------------- because it's dynamically loaded, make sure partytown knows about it.
})(window,document,'script','dataLayer','{{ containerId }}', navigator);

The reason is because there are two different webviews apps can use, SFSafariViewController and WKWebView. Apps like slack use SFSafariViewController which is essentially full featured safari and includes support for service workers. Apps like Instagram appear to use WKWebView which is basically a barebones Safari, and doesn't appear to support service workers.

I'm not super familiar with next.js, but it looks like your loading the GTM script as a web worker from the get-go. If there's no fallback logic to load your GTM snippet on the main thread, then it won't load on apps like Instagram.

Partytown itself tries to fallback to loading any text/partytown scripts on the main thread when serviceWorkers are disabled. However with the GTM snippet, and from a lot of examples i've seen on the internet, simply adding j.type=text/partytown in the GTM snippet won't fallback correctly. Reason is because partytown will fallback the snippet itself, but that snippet is dynamically loading scripts itself which partytown doesn't seem to account for.

I think the docs for for GTM in partytown need to be updated as well. Gtag and GTM are two different things. The current HTML example shows how to load the gtag snippet, which is different than the tag manager snippet i'm referencing here.

from partytown.

is it related to this one #546?

from partytown.

I don't believe it's related to that bug. We had the same issue, which resulted in lost conversions. We have our library in /~partytown, and it generated 404 errors to /~partytownproxytown and to /~partytown/proxytown, but only on Apple devices - iOS Safari 604.1, iPad Safari 604.1, and MacOS Safari 605.1.15. We are using PartyTown 0.8.2, though for awhile we were referencing a different directory which has 0.8.1, with the same errors. We have a Cloudflare worker as a proxy.

Config:

window.onload = function () {
    window.partytown = {
        resolveUrl: function(url, location, type) {
            if (type === 'script') {
                let proxyUrl = new URL("https://www.ourdomain.com/api/partytown/proxy")
                proxyUrl.searchParams.append('url', url.href)
                return proxyUrl;
            }
            return new URL(url);
        },
        // debug: true,
        lib: "/~partytown/",
        forward: [
            'dataLayer.push', // Google Tag Manager
            'fbq', // Facebook
            '_tfa.push', // Taboola
        ],
    }

    document.head.appendChild(partytownScript);
}

from partytown.