You can enable the Connect library to record user activity on product pages. Your marketing specialists will know how much attention each product and product category is getting. This is crucial for segmentation. Also, they'll be able to tie product interest to identified visitors.

Keep in mind that the definition of the product page varies depending on the business. Here are some typical examples:

Retail: a product detail page or quick view
Travel: the viewing of an itinerary, room, etc. for booking
Banking: the viewing of a specific account to open
Insurance: the viewing of a specific policy to apply for

The product view signal works in conjunction with the product configuration signal. The product view signal collects data about the product, and the product configuration signal tracks interactions on the product page (for example, selecting clothing size, checking FAQs or reviews, etc) that suggest customer engagement.

Availability

The product view signal is supported by Premium and Ultimate subscriptions.

Prerequisites

The product view signal is quite advanced in terms of implementation because of the large number of data points you can collect. Not all fields are required, and not all fields may suit your particular business case. If there is a data layer on your website, it will speed up the configuration and make the payload data more reliable.

Configuration

The Connect library provides a method, TLT.logSignal() with which to send the signal to the Acoustic Connect endpoint, as a JSON object.

Trigger the product view signal each time a product details page or product details modal is loaded. On some sites there may be no individual product pages, with multiple products displayed together on a page (for example, a shortlist of available hotel rooms), in which case you should send one product view signal for each product displayed to the user.

You must populate the required fields before sending the signal: the name, ID and price of the product as well as the currency.

Required fields

You must provide values for all required fields, or the signal will be ignored. You can scrape product-related values from the DOM or from the data layer.

If your product pages don't have prices (as is often the case in banking and insurance), use placeholders for these required values.

Field	Values	Definition
`category`	String. Valid value - `Behavior`.	The category of the signal. Do not edit.
`currency`	String. Valid values - ISO 4217 currency codes.	The currency in which the price of the product is represented on the website. If there is only one currency on your website, provide a static value. If there is a selection, use dynamic values.
`effect`	String. Valid values: - `negative` - `positive`	Describes the effect of the signal on engagement. It is intended to be used for engagement index scoring. We suggest sending `positive` for all product views.
`name`	String, up to 256 characters	Assign a name to the signal to differentiate it from other signals.
`productId`	String	The identifier of the product. It may coincide with the SKU.
`productName`	String	The name of the product
`signalType`	String. Valid value - `productView`.	The type of signal to enable. Do not edit.
`unitPrice`	Number	The unit price of the product

Optional fields

Field	Values	Definition
`availability`	String	Indicates if the product is available for purchase, for example "In Stock", "Out of Stock", "Back Order".
`brandName`	String	The brand name of the product
`brandDescription`	String	The description of the brand
`dateAdded`	Combined date and time representation. Format: `yyyy-MM-dd HH:mm:ss.SSS` .	The date when the product was added to the product catalog
`discount`	Number	Discount from the original price. If the exact amount is not provided, you could calculate the difference between the original and the current price.
`model`	String	The number or description of the model
`MSRP`	Number. Must be a decimal or float.	Suggested retail price or original price
`productCategory`	String	The category that the product falls in based on the product catalog
`productDescription`	String	The description of the product
`productImageUrl`	String	The URL of the product image
`productRating`	Number	The rating of the product
`productStatus`	String	The current lifecycle state of the product (for example, "Active", "Discontinued", "Upcoming")
`productUrl`	String	The URL of the product page
`promotionId`	String	For the use case of on-site marketing like hero images and other calls-to-action, those calls-to-action would have a promotion ID that would "stick" to the behaviors after it.
`quantity`	Integer	Captures the quantity of the product added to the cart.
`shoppingCartUrl`	String	The URL of the shopping cart that the add-to-carts are contributing to
`SKU`	String	If the product ID is different from the SKU, add this field.
`virtualCategory`	String	The category is based on how the visitor got to the page, for example from "New arrivals" or "Sale".

Example 1

// Check that the Connect SDK is present
if (window.TLT && window.TLT.isInitialized()) {

    const signal = {
        signalType: "productView",
        name: "productView generated by web site",
        category: "Behavior",
        productId: "", // Required
        productName: "", // Required
        productDescription: "",
        unitPrice: 0, // Required
        currency: "USD", // Required
        discount: 0,
        productCategory: "", // Important
        productUrl: "",
        productImageUrl: "",
        shoppingCartUrl: "https://wwww.sample.com/cart",
        virtualCategory: "",
        availability: "",
        brandName: "",
        additionalAttributes: "",
        attributes: "",
        categories: "",
        brandDescription: "",
        model: "",
        MSRP: 0,
        SKU: "",
        productStatus: "",
        productRating: 0,
        dateAdded: "",
        promotionId: "",
        actionState: "",
        resumedCartItem: "",
        effect: "positive", // Required
        signalCustomAttributes: [
            {
                name: "type",
                value: "product-details-page"
            }
        ]
    };

    // If we are on a product details page, there will be a product description
    if (document.querySelector(".product_description")) {
        signal.productDescription = document.querySelector(".product_description")?.innerText || "";
        signal.productCategory = document.getElementById("poductCategory");
        const article = document.querySelector(".product-tile");
        if (article) {
            signal.productId = article.getAttribute("data-sku");
            signal.SKU = signal.productId;
            signal.productName = article.getAttribute("data-name");
            signal.productUrl = article.getAttribute("data-url");
            signal.productImageUrl = article.getAttribute("data-image-url");
            signal.quantity = Number(article.querySelector(".cartItem-num")?.innerText || 0);
            const discountedPrice = Number(article.querySelector(".price-sale")?.innerText || 0);
            const regularPrice = Number(article.querySelector(".price-default")?.innerText || 0);
            if (discountedPrice) {
                signal.unitPrice = discountedPrice;
                signal.discount = Math.round((regularPrice - discountedPrice) * 100) / 100;
            } else {
                signal.unitPrice = regularPrice;
            }
            // Optional: display signal in console
            console.log("onSiteSearch signal: " + JSON.stringify(signal, undefined, 2));

            // Send signal to Acoustic
            window.TLT.logSignal(signal);
        }
    }
}

Example 2

// Check that the Connect SDK is present
if (window.TLT && window.TLT.isInitialized()) {

    const href = window.location.href;

    const signal = {
        signalType: "productView",
        name: "productView generated by web site",
        category: "Behavior",
        productId: "", // Required
        productName: "", // Required
        productDescription: "",
        unitPrice: 0, // Required
        currency: "USD", // Required
        discount: 0,
        productCategory: "", // Important
        productUrl: "",
        productImageUrl: "",
        shoppingCartUrl: "https://wwww.sample.com/reservations",
        virtualCategory: "",
        availability: "",
        brandName: "",
        additionalAttributes: "",
        attributes: "",
        categories: "",
        brandDescription: "",
        model: "",
        MSRP: 0,
        SKU: "",
        productStatus: "",
        productRating: 0,
        dateAdded: "",
        promotionId: "",
        actionState: "",
        resumedCartItem: "",
        effect: "positive", // Required
        signalCustomAttributes: [
            {
                name: "type",
                value: "product-details-page"
            }
        ]
    };

    // If a shortlist of hotel rooms is displayed
    if (href.includes("/reserve-a-room/") && document.querySelector("a.choose-room")) {
        const cards = document.querySelectorAll("div.card");
        // Send a signal for each room in the list
        cards.forEach((card) => {
            signal.productDescription = card.querySelector("#desc")?.innerText || "";
            signal.productName = card.getAttribute("room-id");
            signal.productId = signal.productName;
            if (signal.productDescription.includes("your own kitchen")) {
                signal.productCategory = "Self catering";
            } else {
                signal.productCategory = "Standard room";
            }
            signal.unitPrice = Number(card.querySelector(".total-price")?.innerText);

            // Optional: display signal in console
            console.log("onSiteSearch signal: " + JSON.stringify(signal, undefined, 2));

            // Send signal to Acoustic
            window.TLT.logSignal(signal);
        });
    }
}