Articles in this section

See more

How to Measure Traffic of an Embedded Campaign with UTM Parameters

Avatar
Cool Tabs Support
Updated
Follow

 

1. Introduction

When you embed a Cool Tabs campaign on your website (either as a standard embed or as a popup), it’s common to need to differentiate where the traffic coming to it originates from: whether it’s from a specific blog post, an advertising campaign, a partner who also has it embedded, or if you want to distinguish between the embed format and the popup format.

To do this, you can use UTM parameters (utm_source, utm_medium, utm_campaign, utm_term, utm_content), and Cool Tabs will automatically capture them so you can analyze them in your campaign’s statistics section.

If you are not yet familiar with UTMs, we recommend first reading the tutorial How to Create a Custom URL with UTM Parameters for Your Campaign.

 

2. How UTMs are read in an embedded campaign

An embedded campaign loads inside another webpage (the "parent URL"), so there are two places where UTMs can travel:

  • In the URL of the widget itself (the data-src of the embed or popup).

  • In the URL of the page where the campaign is embedded.
     

Cool Tabs applies the following priority hierarchy:

  1. UTMs defined in the embed URL: if there are UTM parameters in the widget’s data-src, those are the ones used.

  2. UTMs inherited from the parent URL: if the embed does not have UTMs, the UTMs from the page where the campaign is embedded are read.

 

Example

Imagine your embed is embedded in a blog post:

  • Parent URL: https://blog.example.com/post?utm_campaign=newsletter_may
  • Embed with UTMs: data-src="https://www.your-promos.com/embed/xxxx?utm_campaign=widget_blog"

Cool Tabs will register the traffic as utm_campaign=widget_blog (the embed wins).

On the other hand, if the embed is "clean":

  • Parent URL: https://blog.example.com/post?utm_campaign=newsletter_may
  • Embed without UTMs: data-src="https://www.your-promos.com/embed/xxxx"

Cool Tabs will inherit utm_campaign=newsletter_may from the parent URL.

 

3. Step by Step: How to add UTMs to the widget code

When you embed a campaign, the code you copy from the "Publish" section looks like this:
 

<div class='ct_embeded'

     data-src='https://www.your-promos.com/embed/d67cbc93161ce42242747d3238dce8e3'

     data-max-height='7500'

     data-max-height-mobile='10000'

     data-max-width='auto'

     data-min-height=''

     data-extra-height='0'

     data-initial-height='1000'

     data-initial-height-mobile='1200'

     data-height-calculation-method='bodyOffset'

     data-lazy='1'

     data-scroll-to-offset-extra-y='-150'></div>

<script src='https://embed3.ct-assets.com/assets/ct-embed.js?c9f9bb9396ce21c93b0af410e816aa9b0958b7ec2f2b359568a1eb15ad5d91eb'></script>
 

To add UTM parameters, you only need to modify the value of the data-src attribute by adding the UTMs at the end of the URL, separated by ? (the first) and & (the following):
 

<div class='ct_embeded'

     data-src='https://www.your-promos.com/embed/d67cbc93161ce42242747d3238dce8e3?utm_source=blog&utm_medium=embed&utm_campaign=spring_launch'

     data-max-height='7500'

     ...></div>
 

IMPORTANT: only modify the data-src of the <div>. The <script> always remains exactly as provided by Cool Tabs.

 

3.1. Set up UTMs directly from the embed code

The campaign's embed block includes a UTM Parameters section where you can fill in utm_campaign, utm_medium and utm_source. 

As you type each value, the iframe's data-src URL updates automatically in the code you're about to copy.

It also works with campaigns that are already active. Just generate the new code with the UTMs and replace the one you had embedded.

 

 

4. Common use cases

4.1. Differentiate Standard Embed from Popup Embed

If the same campaign is published in both formats and you want to measure which converts better, assign a different utm_content to each:

  • Standard embed: data-src='https://.../embed/xxxx?utm_source=web&utm_medium=widget&utm_content=embed'
  • Popup embed: data-src='https://.../embed/xxxx?utm_source=web&utm_medium=widget&utm_content=popup'

 

4.2. Differentiate multiple partners or websites where It’s embedded

If your campaign is embedded on third-party websites (affiliates, media, partners), assign a different utm_source to each:

  • Partner A: ?utm_source=partner_a&utm_medium=embed&utm_campaign=summer2026

  • Partner B: ?utm_source=partner_b&utm_medium=embed&utm_campaign=summer2026

 

4.3. Let the "parent" website decide attribution

If you want the actual traceability (Google Ads, Facebook Ads, newsletter, etc.) that already reaches your website to be maintained when passing through the embedded campaign, do not add UTMs to the data-src. Cool Tabs will automatically inherit the UTMs present in the URL where the user lands.

This is especially useful if you already have a consolidated tagging strategy on your website and don’t want the widget to override those tags.

 

5. How to review the results

Once the campaign is active, you can check the UTM parameter data in your campaign’s statistics panel:

  1. Access the campaign and go to the "Leads" section.

  2. In the side menu, click on "Statistics".

  3. In the "Participants" section, you will see the data broken down by medium, source, and campaign.

 

6. Other specifications

  • UTMs are case-sensitive. We recommend always using lowercase and a consistent criterion (utm_source=facebook, not mixing with Facebook or FB).

  • Do not use spaces in the values. Replace them with underscores (_) or hyphens (-).

  • If you modify the data-src to add UTMs, make sure not to break the single quotes (') that enclose the attribute.

  • The inheritance behavior from the parent URL works for both the standard embed and the popup.

 

7. Related content

If you have any questions, write to us at help@cool-tabs.com.


 

Comments

0 comments

Please sign in to leave a comment.

Related articles