Custom Web Pixels

Technical Q&A

Topic summary

A developer created a custom web pixel to trigger a review widget after checkout completion, but the widget fails to display properly.

Core Issue:

  • Custom pixels apparently cannot render widgets on the page
  • The code attempts to inject and initialize a Trusted Shops review widget post-checkout
  • Despite proper event subscription (checkout_completed) and data capture, the widget doesn’t appear

Technical Implementation:

  • Script dynamically loads Trusted Shops based on detected language (DE/NL)
  • Includes retry logic (checks every 500ms, max 10 attempts) to wait for the TrustedShops object
  • Captures order data: order number, email, total price, payment method, line items

Seeking Clarification:

  • Confirmation whether custom pixels have inherent limitations preventing widget rendering
  • Information about potential future Shopify support for this functionality
  • Alternative solutions or workarounds to display post-checkout widgets
Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I have created a custom web pixel that should trigger after checkout completed. The result is our review widget is shown and customers are invited to place a review. But apperently a custom pixel can’t project a widget. Is that correct? I read somewhere that shopify might implement this possibility? Or does anyone have another solution?

This is the code:

analytics.subscribe(‘checkout_completed’, (event) => {
console.log(“Trusted Shops - Checkout Completed Event Fired!”);

const checkoutData = event.data.checkout || {};
const orderNumber = checkoutData.order?.id || “Unknown”;
const email = checkoutData.email || “Unknown”;
const totalPrice = checkoutData.totalPrice?.amount || “0.00”;
const currency = checkoutData.currencyCode || “EUR”;
const paymentMethod = checkoutData.transactions?.[0]?.paymentMethod || “Unknown”;
const lineItems = checkoutData.lineItems || checkoutData.items || ;

console.log(“Trusted Shops Order Data Captured:”, {
orderNumber, email, totalPrice, paymentMethod, currency, lineItems
});

// Language Detection Fix
let tsLanguage = document.documentElement.lang?.trim() || “”;

if (!tsLanguage) {
const urlParams = new URLSearchParams(window.location.search);
tsLanguage = urlParams.get(“locale”) || “”;
}

tsLanguage = tsLanguage.toLowerCase().substring(0, 2);
console.log( Detected Language: "${tsLanguage}");

let tsid = “empty”;
if (tsLanguage === “de”) {
tsid = “xxx”;
} else if (tsLanguage === “nl”) {
tsid = “xxx”;
} else if (tsLanguage === “fr”) {
tsid = “xxx”;
}

if (tsid !== “empty”) {
console.log( Injecting Trusted Shops widget for language: ${tsLanguage});

let script = document.createElement(“script”);
script.type = “text/javascript”;
script.charset = “utf-8”;
script.async = true;
script.src=//widgets.trustedshops.com/js/${tsid}.js;

script.onload = function () {
console.log(" Trusted Shops script loaded successfully.");

// Wait for Trusted Shops to be available (check every 500ms)
let attempts = 0;
const maxAttempts = 10;

const checkTSObject = setInterval(() => {
if (window.TrustedShops) {
clearInterval(checkTSObject);
console.log(" Trusted Shops Widget Found - Initializing…");

try {
window.TrustedShops.init(); // Initialize Trusted Shops
console.log(" Trusted Shops Widget Successfully Initialized.“);
} catch (error) {
console.error(” Failed to initialize Trusted Shops Widget:", error);
}
} else {
attempts++;
console.warn( Trusted Shops object not found (Attempt ${attempts}/${maxAttempts}));

if (attempts >= maxAttempts) {
clearInterval(checkTSObject);
console.error(" Trusted Shops object not available after multiple attempts.");
}
}
}, 500); // Check every 500ms
};

script.onerror = function () {
console.error(" Trusted Shops script failed to load.");
};

document.body.appendChild(script);
} else {
console.warn( No Trusted Shops widget loaded. Detected language: "${tsLanguage}");
}
});