BlueConic Experiences allows you to engage consumers with interactive content directly on your website. By embedding an Experience and connecting it to Google Analytics 4 (GA4), you can track key events such as completions and conversions.

This setup helps you measure performance, optimize engagement, and build audiences based on user behavior. It assumes you use Google Tag Manager (GTM) to manage tracking.

Before you begin

Before embedding and tracking your Experience, ensure you have:

Access to your BlueConic Experience
Permissions to publish and embed content
A Google Tag Manager account set up on your website
A GA4 configuration tag already created in GTM
Defined how your Experience completes:
- Redirect to a thank-you page, or
- Completion on the same page

Embed the BlueConic Experience

Copy the embed code

Navigate to the Experience you want to embed.
Select Publish > Embed.
Choose the Embedded format.
Copy the iframe embed code.

Add the Experience to your website

You can embed the Experience using your CMS or Google Tag Manager.

Option A: Add to HTML (CMS or site builder)

Paste the embed code directly into the page where you want the Experience to appear.

Option B: Add via Google Tag Manager (recommended)

In GTM, go to Tags > New.
Select Custom HTML.
Paste the iframe embed code.
Add a trigger for the page(s) where the Experience should appear (for example: Page Path contains /quiz).
Save and publish.

Track completions in GA4

Choose a tracking method based on how the Experience ends:

Track via redirect (thank-you page)

Use this method when the Experience redirects users after completion.

Configure the redirect

Open the Final Screen of your Experience.
Select Redirect as the action.
Enter a unique thank-you URL (for example: /quiz-thank-you).

Create a GA4 event tag in GTM

In GTM, go to Tags > New.
Select Google Analytics: GA4 Event.
Choose your GA4 configuration tag.
Enter the event name: quiz_complete.
Under Triggering, select:
- Page View → Page Path equals /quiz-thank-you
Save and publish.

This setup fires a quiz_complete event in GA4 when a user lands on the thank-you page.

Track on-page completion (no redirect)

Use this method when the Experience completes on the same page.

Update the embed code
Wrap your embed code with a JavaScript listener:

<iframe
  src="https://experience.blueconic.com/your-experience-id"
  width="100%" height="600px"
  frameborder="0"
></iframe>

<script>
  window.addEventListener("message", function(event) {
    if (event.data === "experienceComplete") {
      window.dataLayer = window.dataLayer || [];
      dataLayer.push({
        event: "experienceComplete",
        experienceName: "Holiday Gift Finder"
      });
    }
  });
</script>

Note: Coordinate with your BlueConic CSM to enable the experienceComplete postMessage for your Experience.

Create a GA4 event tag in GTM

Go to Tags > New.
Select Google Analytics: GA4 Event.
Choose your GA4 configuration tag.
Set the event name: experience_complete.

Add parameters:

experience_name = {{experienceName}}
(Create a Data Layer Variable named experienceName)

Set the trigger:

Trigger type: Custom Event
Event name: experienceComplete

Save and publish.

This setup tracks completions without requiring a redirect.

Verify tracking in GA4

Go to Google Analytics > Admin > DebugView.
Open your website in a live tab.
Complete the Experience.
Confirm the event appears:
- experience_complete or quiz_complete

When the event appears in DebugView, tracking is working correctly.

Next steps

Create custom dimensions in GA4 for:
- Experience name
- Outcomes
- UTM parameters
Build audiences in GA4 using completion events for remarketing.
Add additional engagement tracking (such as clicks or time spent) using more postMessage events.