How do you actually activate the web pixel?

[carecare]

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...)

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!!

[carecare · Accepted solution]

Is this the "correct" solution, idk, but it worked and after two days of ANGST I will take it 🙂

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<typeof loader>();
...
//// All of your other code
...

[badrooxe]

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" }
]

[samlevine3]

accountID is listed here [settings.fields.accountID]