I have 1 custom pixel, but shopify is loading 2

Technical Q&A
,
1

I am aiming to improve the page load performance of my store as measured by google PageSpeed insights.

I have maxed out all the metrics except Total Blocking Time.

I have looked at the scripts that are blocking the most. It’s all web pixel related (see https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/code)

I have 1 custom pixel, but when I look at google page speed check I see there are 3 web pixel related things are being loaded

see this report https://pagespeed.web.dev/analysis/https-petscalmdown-co-uk-products-herbal-natural-calming-dog-treats/b680vm6g2b?form_factor=mobile

1 is /cdn/wpm/b0ccebf23w77f92986p5a389ae5mf388d8acm.js

2 is [email removed]

3 is [email removed]

As for what each of these links do:

1 is a minified js file that once unminified is 3472 lines of javascript

2 is a my custom pixel. it also contains some minified code that once unminified is 1826 lines

3 is a what looks like a debugging piece of code I would not expect in production.this page contains same lines as pixel 2 (once unminified is 1826 lines). unminified the pixel is:

(function (shopify) {
    shopify.extend("WebPixel::Render", function (api) {
        var analytics = api.analytics,
            browser = api.browser,
            init = api.init;
        var e = api._pixelInfo ? api._pixelInfo.runtimeContext : null,
            n = api._pixelInfo ? api._pixelInfo.type : null;
        analytics.subscribe("all_standard_events", function (i) {
            var l, o;
            (l = i.name),
                (o = i),
                browser.localStorage
                    .getItem("shopify-pixel-mode")
                    .then(function (i) {
                        "debug" === i && console.log(`[shopify-pixel][${n}][${e}] ${l}`, o);
                    })
                    .catch(function () {});
        });
    });
})(self.webPixelsManager.createShopifyExtend("shopify-custom-pixel", "custom"));

How can I stop pixel 3 from being loaded?

I see in view source of shopify web site I see pixel config code:

webPixelsConfigList: [
  { id: "14155810", eventPayloadVersion: "1", runtimeContext: "LAX", scriptVersion: "5", type: "CUSTOM", privacyPurposes: ["ANALYTICS"], name: "Meta and stats pixel" },
  { id: "shopify-app-pixel", configuration: "{}", eventPayloadVersion: "v1", runtimeContext: "STRICT", scriptVersion: "090", apiClientId: "shopify-pixel", type: "APP", purposes: ["ANALYTICS", "MARKETING"] },
  { id: "shopify-custom-pixel", eventPayloadVersion: "v1", runtimeContext: "LAX", scriptVersion: "090", apiClientId: "shopify-pixel", type: "CUSTOM", purposes: ["ANALYTICS", "MARKETING"] },
],

first line of webPixelsConfigList (id 14155810) seems to be my custom pixel.
second (id shopify-app-pixel) seems to be not used (I do have a deactivated app pixel, perhaps it’s that one)
third (shopify-custom-pixel) sees to be the one with the debugging code.

questions:

  • how can I stop shopify-custom-pixel from loading? I dont see it listed in settings > Customer events > pixels
  • what is/cdn/wpm/b0ccebf23w77f92986p5a389ae5mf388d8acm.js? it’s huge and takes a long time to execute.
1 Like