Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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:
Thank you all so much!!
Solved! Go to the solution
This is an 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
...
This is an 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
...
In case it helps people somewhere down the line, I have an app web pixel with settings that need to be customized by whoever has the app installed (so I cannot just put an account id in there and call it good)
These graphql queries took a little time to get working, but they are quite helpful:
/** I use this to get whatever app web pixel has been activated */
export const findWebPixelQuery = `#graphql
query FindWebPixel {
webPixel {
id
settings
}
}
`;
/** If I know an id, I use this (i.e. from a route) */
export const getWebPixelQuery = `#graphql
query GetWebPixel($id: ID!) {
webPixel(id: $id) {
id
settings
}
}
`;
/** Create the web pixel (I only want to do this once users of the app have entered in their custom settings) */
export const createWebPixelMutation = `#graphql
mutation CreateWebPixel($webPixel: WebPixelInput!) {
webPixelCreate(webPixel: $webPixel) {
webPixel {
id
settings
}
userErrors {
field
message
}
}
}
`;
/** Same as create, but updates one with a known id */
export const updateWebPixelMutation = `#graphql
mutation UpdateWebPixel($id: ID!, $webPixel: WebPixelInput!) {
webPixelUpdate(id: $id, webPixel: $webPixel) {
userErrors {
code
field
message
}
webPixel {
id
settings
}
}
}
`;
/** Only need to know the id to delete */
export const deleteWebPixelMutation = `#graphql
mutation DeleteWebPixel($id: ID!) {
webPixelDelete(id: $id) {
deletedWebPixelId
userErrors {
field
message
}
}
}
`;
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024