Conversion tracking

The ring builder runs inside an iframe on ShowroomPro's domain, so the site's own Google Analytics, Google Ads or Tag Manager tags can't see what happens inside it. To connect a finished design to the ad click that brought the visitor, the quiz sends a message to the host page each time a shopper finishes a design. Listen for it and fire your own event.

This works with the embed.js widget (inline, floating or popup) and with the plain iframe snippet.

#The message

When a shopper finishes the quiz (engagement ring or wedding band), the page receives this message once:

{
  source: "showroompro",
  event: "design_created",
  design_id: "3f1c2a9e-…",              // ShowroomPro design ID
  timestamp: "2026-10-03T14:22:05.123Z" // ISO 8601, UTC
}

• It is sent once per design. Reloading, going back or editing the design later does not send it again.
• It contains no customer details: no name, email or phone number.
• It has no price. The jeweler's quote comes later.
• It is sent only when the quiz runs inside an iframe on your page.

If you use embed.js, ShowroomPro.on("design_created", fn) is a shorter alternative to the listeners below.

#1. Google Analytics 4 or Google Ads (gtag.js)

Paste this on the page that contains the ring builder, after your existing gtag.js snippet:

<script>
  window.addEventListener("message", function (e) {
    // Only trust messages that come from ShowroomPro.
    var allowedOrigins = ["https://www.showroompro.ai", "https://showroompro.ai"];
    if (allowedOrigins.indexOf(e.origin) === -1) return;

    // Only react to the design_created event.
    var data = e.data;
    if (!data || data.source !== "showroompro" || data.event !== "design_created") return;

    if (typeof gtag === "function") {
      gtag("event", "showroompro_design_created", { design_id: data.design_id });
    }
  });
</script>

To count it as a conversion, mark showroompro_design_created as a key event in GA4 (Admin → Events), then import it into Google Ads. Or call your Google Ads conversion tag directly inside the listener:

gtag("event", "conversion", { send_to: "AW-XXXXXXXXX/XXXXXXXXXXXX" });

#2. Google Tag Manager (dataLayer)

<script>
  window.addEventListener("message", function (e) {
    var allowedOrigins = ["https://www.showroompro.ai", "https://showroompro.ai"];
    if (allowedOrigins.indexOf(e.origin) === -1) return;

    var data = e.data;
    if (!data || data.source !== "showroompro" || data.event !== "design_created") return;

    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({ event: "showroompro_design_created", design_id: data.design_id });
  });
</script>

Then in GTM create a Custom Event trigger named showroompro_design_created, optionally a Data Layer Variable for design_id, and attach your GA4, Google Ads, Meta Pixel or other tags to the trigger.

#3. Test it

Finish a test design on the live page and check GTM Preview mode or GA4 DebugView. showroompro_design_created should appear right away.

#Why the origin and source checks matter

Any website or browser extension can post messages to your page. Checking e.origin confirms the message came from the ShowroomPro iframe, and checking data.source and data.event limits the listener to this one event. Allow both https://www.showroompro.ai and https://showroompro.ai, because older snippets load the quiz from the apex domain.

The quiz also sends other messages (lifecycle events with a type starting with ringbuilder:, and showroompro:resize). The widget uses those itself, and the listeners above ignore them.