How do you actually activate the web pixel?

Retired Boards Appdev Extensions
1

Hi there,

I could use clarification to step 5 in the documentation for setting up a web pixel (https://shopify.dev/docs/apps/marketing/pixels/getting-started#step-5-create-a-web-pixel-setting-for-the-store)

I understand that the create mutation must be called within the app, but my question is where & how. I’ve seen two posts here that offered solutions:

  1. Put a button in the app UI → this seems problematic from a UX perspective

  2. Put in the web folder → not popping up when I create a web pixel even after updating CLI

Additionally, even when I try to do the button solution, the query in the Shopify documentation throws errors.

So my ask is this, could someone share:

  1. The code for how they are calling this mutation
  2. Where in their app this code lives

Thank you all so much!!

2

Is this the “correct” solution, idk, but it worked and after two days of ANGST I will take it :slightly_smiling_face:

I was able to connect the widget by putting the graphql request in the app’s loader function

export const loader = async ({ request }: LoaderFunctionArgs) => {
  // Authenticate with Shopify
  const { admin } = await authenticate.admin(request);

  const mutationResponse = await admin.graphql(
    `#graphql
      mutation webPixelCreate($webPixel: WebPixelInput!) {
        webPixelCreate(webPixel: $webPixel) {
          userErrors {
            field
            message
          }
          webPixel {
            settings
            id
          }
        }
      }
    `,
    {
      variables: {
        webPixel: {
          settings: {
            "accountID": 'Account_ID_45466_this_is_as_per_toml'           
          },
        },
      },
    }
  );

  if (!mutationResponse.ok) {
    console.error('Request failed', mutationResponse);
    return;
  }

  const data = await mutationResponse.json();
  console.log(data);
  
  return mutationResponse

};

And then I set up the loader in the the index function of app/routes/app._index.tsxP:

export default function Index() {
  const muatationResponse = useLoaderData
3

in the docs it’s mentioned that :

This mutation creates a web pixel, and sets the accountID declared in shopify.extension.toml to the value 123

i quite didn’t understand this , in the shopify.extension.toml there’s no value such as accountID :

type = "web_pixel_extension"
name = "app_name"

runtime_context = "strict"

[settings]
type = "object"

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

accountID is listed here [settings.fields.accountID]