I'm implementing on a website a tool from Sales Force that is called Interaction Studio.

We need to develop into a sitemap file, where those interaction written into the file will catch the information that we need.

Here we have an example of a sitemap

Basically, the function that collects the categories is a custom function that collects the information from the breadcrumb. The function is:

const getCategoriesIdAsArray = () => {
      return Evergage.resolvers.fromSelectorAttributeMultiple(
        "a.c-breadcrumb__link",
        "href",
        (link) => {
          let catId = "";
          if (link.length) {
            link.shift();
            link.map((url, index) => {
              if (index < link.length - 1) {
                catId += url.split("/").reverse()[0].split("-")[0] + "|";
              } else {
                catId += url.split("/").reverse()[0].split("-")[0];
              }
            });
            return [catId];
          } else {
            return;
          }
        }
      );
    };

To collect the information, we need to write some code in the pageTypes array. This following code is what I have in my sitemap:

pageTypes: [
        {
          name: "product_detail_tecnico",
          action: "product_detail_tecnico",
          //isMatch: () => document.body.classList.contains("is-tech-product"),
          isMatch: () => {
            return Evergage.DisplayUtils.pageElementLoaded(
              "body#productcore.is-tech-product",
              "html"
            ).then(() => true);
          },
          locale: () => {
            return buildLocale();
          },
          catalog: {
            Product: {
              _id: productId,
              name: Evergage.resolvers.fromJsonLd("name"),
              url: Evergage.resolvers.fromJsonLd("url"),
              imageUrl: Evergage.resolvers.fromJsonLd("image"),
              description: Evergage.cashDom("meta[name='description']")
                .first()
                .attr("content")
                .substring(0, 250),
              decoTecnico: () => {
                return bodyClasses.includes("is-deco-product");
              },
              inventoryCount: 1,
              idc: productId && productId.split("_")[1],
              idp: getProductIdFromUrl(),
              price: Evergage.resolvers.fromJsonLd("offers.0.price"),
              precioAnterior: Evergage.util.getFloatValue(
                Evergage.cashDom(".c-product-price__before .js-old-price")
                  .first()
                  .text()
                  .split(" ")[0]
                  .replace(",", ".")
              ),
              video: Evergage.cashDom("iframe#player").attr("src"),
              categories: () => {
                return getCategoriesIdAsArray();
              },
            },
          },
        ]

As we can see, the last attribute, categories returns the value from the custom function that is an array with one string due to the data that I must pass in.

The data that I get on the visual editor:

In the sitemap into the pageTypes I also have this code:

 {
          name: "Category",
          action: "Viewed Category",
          isMatch: () => {
            return Evergage.DisplayUtils.pageElementLoaded(
              "body.categorycore",
              "html"
            ).then(() => true);
          },
          catalog: {
            Category: {
              _id: getCategoriesId(),
              //parentId: categoryParentId,
              name: categoryName,
              department: () => isDepartment(),
              url: Evergage.resolvers.fromHref(),
              description: Evergage.cashDom("meta[name='description']")
                .first()
                .attr("content"),
            },
          },
          listeners: [
            Evergage.listener("click", "section.c-distributive-filters", () => {
              Evergage.sendEvent({
                action: "Filter Results",
              });
            }),
          ],
        },

This code is required because to assign a category to a product, we must have that category recorded in the UI.

As we can see in the next picture, the categories are recorded.

The event stream is recording the following:

This is the code from item:

{
          description:
            "Tira LED 12V DC 30LED/m 5m IP20 Ancho 10mm es una opción muy extendida si se desea disponer de una luz decorativa que consuma muy poco. Su diseño flexi...",
          idc: "122262",
          inventoryCount: 1,
          type: "Product",
          url: "https://dev61.efectoled.com/es/comprar-tiras-led-monocolor/62294-tira-led-12v-dc-smd5050-30ledm-5m-ip20.html",
          idp: "62294",
          price: 7.95,
          imageUrl:
            "https://4438d3e301b6821c9a36cfd759bc58f8/442295-thickbox_default/tira-led-12v-dc-smd5050-30ledm-5m-ip20.jpg",
          name: "Tira LED 12V DC 30LED/m 5m IP20 Ancho 10mm",
          decoTecnico: false,
          attributes: {
            idp: { value: "62294" },
            decoTecnico: { value: false },
            idc: { value: "122262" },
          },
          id: "62294_122262",
          categories: [{ _id: "10|63|24", type: "c" }],
        }

But when I go into the details of a product, the categories are not.

I have read all the documentation that Interaction Studio provides, but I can not understand what happens. Because in the visual editor the data is recorded and in the event stream also is recorded.

Does anybody know why this is happening? Thanks in advance