Pixel doesn't update because of browser cache

Web Pixels
1

Hello all,

I’m having an issue where whenever I update my pixel code or uninstall & reinstall the pixel, it doesn’t update on a browser that already has a cached version of the website (it works fine on incognito). The problem I’m trying to solve is that I want the pixel to update when there’s something to update, not just on incognito. If there’s a way to make it so the pixel can tell the browser that it has changed and needs to be updated, that would probably fix the problem.

I’m not sure how to fix this, I tried changing the name of the pixel extension, adding a field that’s just a random string so the browser knows the pixel is new (couldn’t get this to work so may or may not be the solution, I don’t think it is though), obviously deleting and reinstalling the pixel (though I’m not sure if the pixel gets automatically get deleted when uninstalling the app, I can’t make an api call to uninstall the pixel because the api access immediately gets revoked upon uninstall). I believe that the pixel is not being loaded in at all (not even an older version) on my normal browser because the functions my pixel is supposed to handle don’t work.

This is my code for installing the pixel:

try {
            const pixelResponse = await admin.graphql(
                `mutation {
          webPixelCreate(webPixel: { settings: "{\\"accountID\\":\\"${session.shop}\\"}" }) {
            userErrors {
              code
              field
              message
            }
            webPixel {
              settings
              id
            }
          }
        }`
            );

            const pixelResult = await pixelResponse.json();
            console.log('pixelResult', pixelResult);
            if (pixelResult.data?.webPixelCreate?.webPixel) {
                // Store pixel ID in user record
                await db.user.update({
                    where: { shopDomain: session.shop },
                    data: { pixelId: pixelResult.data.webPixelCreate.webPixel.id }
                });
            }
        } catch (pixelError) {
            console.error('Error creating pixel:', pixelError);
        }
    }

This is my shopify.extension.toml file:

name = "affilitrak-pixel"
type = "web_pixel_extension"


runtime_context = "strict"

[customer_privacy]
analytics = false
marketing = false
preferences = false
sale_of_data = "disabled"

[settings]
type = "object"

[settings.fields.accountID]
name = "Account ID"
description = "Account ID"
type = "single_line_text_field"
validations =  [
  { name = "min", value = "1" }
]

Again, the pixel is being created and it works on incognito, it just doesn’t work on my normal browser. I have tried adding console logs to the pixel code and checking that they show up on incognito so I am sure the pixel code is being added.

Any insight is appreciated!!

2

You can create only one web pixel. So you need to check if any pixel exists before creating one the Shop.