You can enable the Connect library to record user interactions with products on your website. These interactions may suggest that the user is evaluating the product and preparing to add it to their cart. Here are some examples:

Selecting a size and/or color
Completing customization fields, such as for engraving or personalization
Reading product reviews
Clicking through product images

The product configuration signal works in conjunction with the product view signal signal. While the product view signal collects data about the product, the product configuration signal focuses on listening for clicks and other interactions that indicate user engagement with the product that goes beyond viewing the page.

Availability

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

Configuration

The Connect library provides a method, TLT.logSignal() with which to send the signal to the Acoustic Connect endpoint, as a JSON object. The Connect library must be initialized before the method is called.

Trigger the product configuration signal each time a user interacts with the product. Typically this involves listening for clicks on different elements on the page.

Required fields

You must populate the required fields before sending the signal. You can scrape the product productName and productId from the DOM or from the data layer. Capture the same name and ID as you do with the product view signal signal.

Field	Values	Definition
`category`	String. Valid value - `Behavior`.	The category of the signal. Do not edit.
`configurationType`	String	Assign a label to the interaction that happened. For example, you could name the product parameter (size, color, quantity) or identify the UI element (product option dropdown).
`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 configuration signals.
`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 - `productConfiguration`.	The type of signal to enable. Do not edit.

Optional fields

Field	Values	Definition
`signalCustomAttributes`	Array of objects	Allows for additional custom attributes. For each custom attribute, add an object with two string fields:`name` and `value`.

Example

(function () {

    // All fields are required
    const signal = {
        signalType: "productConfiguration",
        name: "productConfiguration generated from web site",
        category: "Behavior",
        productId: "",
        productName: "",
        configurationType: "", // Type of interaction, e.g. "reviews" or "size"
        effect: "positive",
        signalCustomAttributes: []
    };

    // Array of CSS selectors and configurationTypes
    const productConfigurations = [
        { selector: ".faq-button", type: "Read FAQ" },
        { selector: ".faq-size_select", type: "Select size" },
        { selector: "p.reviews", type: "Read reviews" },
    ];

    // Scrape productId and productName
    signal.productId = document.getElementById("sku")?.innerText || "";
    signal.productName = document.querySelector(".data-product-name")?.innerText || "";

    // Attach click listeners to all elements matching selectors, send signal on clicks
    productConfigurations.forEach((productConfiguration) => {
        const elements = document.querySelectorAll(productConfiguration.selector);
        if (!elements.length) return;
        elements.forEach((element) => {
            element.addEventListener("click", () => {
                // Set configuration type
                signal.configurationType = productConfiguration.type;

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

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

}());