Enable product configuration signals in the Connect web library

The product configuration signal captures user interactions with products that suggest evaluation and preparation to purchase. This signal helps track engagement beyond simple page views, identifying users who are actively considering a product.

Common interaction examples:

  • Selecting a size, color or variant
  • Completing customization fields (engraving, personalization)
  • Reading product reviews or FAQs
  • Clicking through product image galleries
  • Adjusting quantity selectors

Availability: Premium and Ultimate


Implementation considerations

Relationship to product view signal

The product configuration signal works in conjunction with the product view signal.

  • Product view - Collects data about the product itself.
  • Product configuration - Tracks user interactions indicating engagement.

Capture the same productName and productId values that you use for the product view signal. This ensures consistent tracking across related signals. You can scrape these values from the DOM or from the data layer if your website has one.

Triggering approach

Fire the signal each time a user interacts with a product element. This typically involves attaching event listeners to interactive elements on the product page.

Configuration type labels

Use the configurationType field to identify what the user interacted with. You can label by:

  • Product parameter - best for understanding which product attributes users care about. Examples: size, color, quantity, material, finish.
  • UI element - best for understanding which interface components get the most interactions. Examples: Size dropdown, Quantity stepper, Size chart link, Zoom button, Add to wish list button.
  • Action - best for understanding user intent and behavior patterns. Examples: read reviews, select color, view enlarged image, change quantity.

💡 Choose a consistent labeling approach across your implementation for better analytics.

Product catalog integration

Your company's product catalog in Connect will be dynamically updated based on incoming product configuration signals from your website.

  • If a signal contains a new product ID or category ID, Connect creates a new catalog entry based on the signal content.
  • If a product ID is already present in the catalog, Connect makes sure the default product attributes are up-to-date with the signal (name, unit price, category, description, currency, discount, product URLs).
  • If a category ID is already present in the catalog, Connect makes sure its name matches the signal content.

Special handling:

  • Null values in the signal do not overwrite existing catalog data.
  • Blank values (“”) update the catalog to blank/null.
  • Zero values update the related catalog field to zero.

Configuration

Method

TLT.logSignal(signalObject)

Sends the signal to the Acoustic Connect endpoint as a JSON object. The Connect library must be initialized before calling this method.

Signal structure

Top-level fields

  • category: String - Valid value - Behavior.
  • description: String - Description of the signal
  • effect: String - Describes the effect of the signal on engagement. Valid values: negative, positive. Use positive for all product configuration signals.
  • name: String - Name to differentiate this signal from others (for example, "product configuration from website"). Max length - 256 chars.
  • signalType (required): String - Valid value - productConfiguration.

Signal content

  • configurationType: String - Label for the interaction that happened (for example, "size", "color", "reviews", "image gallery").
  • currency (required): String - ISO 4217 currency code (for example, "USD", "EUR", "GBP")
  • discount: Number - Discount amount
  • imageUrls: Array of strings - URLs of product images
  • inventoryQuantity: Number - The number of units available
  • productCategory: String - Product category from catalog
  • productCategoryId: String - Product category identifier
  • productDescription: String - Description of the product
  • productId (required): String - Unique product identifier (may match SKU)
  • productName (required): String - Name of the product
  • productUrls: Array of strings - URLs of product pages
  • promotionId: String - ID from marketing campaigns that influenced the purchase
  • shoppingCartUrl: String - URL of the shopping cart
  • signalCustomAttributes: Array of objects - Additional custom attributes. Each object has name and value string fields.
  • unitPrice: Number - Unit price of the product
  • virtualCategory: String - Category based on navigation path (e.g., "New arrivals", "Sale")

Notes:

  • If any required field is missing or invalid, the entire signal will be discarded.
  • Optional fields enhance the signal but won't prevent processing if omitted or invalid.

Basic example

const signal = {
    // Required fields
    signalType: "productConfiguration",
    category: "Behavior",
    productId: "SKU-12345",
    productName: "Wireless Headphones",
    currency: "USD",

    // Optional fields
    name: "productConfiguration from website",
    configurationType: "Select color",
    unitPrice: 299.99,
    inventoryQuantity: 42,
    effect: "positive"
};

// Send the signal
TLT.logSignal(signal);

Complete implementation example

This example tracks multiple types of product interactions on a product detail page:

if (window.TLT && window.TLT.isInitialized()) {
    // Define the signal template
    const signal = {
        signalType: "productConfiguration",
        category: "Behavior",
        name: "productConfiguration generated from website",
        productId: "",
        productName: "",
        currency: "USD",
        configurationType: "",
        unitPrice: 0,
        effect: "positive"
    };

    // Define selectors for different interaction types
    const productConfigurations = [
        { selector: ".faq-button", type: "Read FAQ" },
        { selector: ".size-select", type: "Select size" },
        { selector: "p.reviews", type: "Read reviews" },
        { selector: ".color-swatch", type: "Select color" },
        { selector: ".image-thumbnail", type: "View image" },
        { selector: ".quantity-selector", type: "Adjust quantity" }
    ];

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

    const priceElement = document.querySelector(".product-price");
    if (priceElement) {
        signal.unitPrice = parseFloat(priceElement.innerText.replace(/[^0-9.]/g, "")) || 0;
    }

    // Attach click listeners to all matching elements
    productConfigurations.forEach((productConfiguration) => {
        const elements = document.querySelectorAll(productConfiguration.selector);
        if (!elements.length) return;

        elements.forEach((element) => {
            element.addEventListener("click", () => {
                // Set the configuration type for this interaction
                signal.configurationType = productConfiguration.type;

                // Optional: Log signal for debugging
                console.log("productConfiguration signal:", JSON.stringify(signal, undefined, 2));

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

Best practices

  1. Track meaningful interactions - Focus on interactions that indicate purchase intent (size/color selection, reviews) rather than trivial actions.
  2. Test interaction coverage - Verify signals fire for all important product interactions on your pages.
  3. Consider mobile interactions - Ensure touch events are properly captured on mobile devices.

Troubleshooting

Signals not firing on certain interactions?

  • Verify CSS selectors match the actual elements in your DOM.
  • Check if elements are dynamically loaded after page load.
  • Use querySelectorAll results to confirm elements are found.
  • Test both click and touch events for mobile compatibility.

Product data not captured correctly?

  • Confirm product details exist in the DOM when script runs.
  • Verify selectors match your site's HTML structure.
  • Use console.log() to debug extracted values.