How to integrate product catalog to my Facebook Pixel in my custom made React website?

Question

I would show dynamic ads in Facebook about my products.

Catalog manager says my Facebook Pixel is not ready, This pixel's microdata is incomplete.

Though here it says microdata are ok:

Here microdata is set in my React app:

<MetaTags>
  <title>{buyTicketData.name}</title>
  <meta property="og:description" content={buyTicketData.description} />
  <meta property="og:title" content={buyTicketData.name} />
  <meta
    property="og:image"
    content={`https://ticket-t01.s3.eu-central-1.amazonaws.com/${eventId}_0.cover.jpg`}
  />
  <meta property="og:url" content={`https://ticket.hu/${eventId}`} />
  <meta property="product:retailer_item_id" content={eventId} />
  <meta property="product:price:amount" content={buyTicketData.price} />
  <meta property="product:price:currency" content="HUF" />
  <meta property="product:availability" content="available for order" />
  <meta property="product:category" content="499969" />
</MetaTags>

ViewContent event is also sent.

Yes, I get a warning, I do not know wether I should send product_catalog_id or not.

What I hoped, during the usage of my website, the cataloge will be updated. But something I miss, do you know what?

ReactPixel.track("ViewContent", {
  content_ids: eventId,
  //product_catalog_id: eventId,
  content_type: "product",
  contents: [{ id: eventId, quantity: 1 }],
});

Answer 1

https://www.facebook.com/business/help/1175004275966513?id=725943027795860

Currently, to add microdata, you need to be able to edit your website's code or get help from a developer. You can use several communication systems, including OpenGraph, Schema.org or JSON-LD for Schema.org. Learn how to set microdata tags for catalogs on the Facebook for Developers website.

After you've added microdata to your website, use our microdata debugger tool to make sure it's set up correctly.