This article guides users through using the iFrame Generator tool to create a custom iFrame with UTM parameter tracking.

What Is the iFrame Generator Tool?

The iFrame Generator tool is a form-based solution where you can input the base URL of your iFrame. The tool automatically generates the necessary code to embed an iFrame that dynamically appends UTM parameters from the parent URL.

How to Use the Generator Tool:

1. Open the iFrame Generator Form: Access the form on our website by navigating to the Tool page.

2. Enter the Base URL: In the field labeled "Enter Base URL," input the base URL for your iFrame (e.g., https://play.goconsensus.com/a70a49a86). Ensure that this is the URL of the iFrame content you wish to embed without any additional query parameters.

3. Click "Generate Embed Code": Once you’ve entered the base URL, click the Generate Embed Code button. The tool will dynamically generate a script and iFrame code for you.

4. Copy the Generated Code: The generated embed code will appear in a text box. You can easily copy the entire block of code by selecting it and pasting it into your website.

Code Example:

Here is an example of the code generated by the tool:

<script>

  window.addEventListener('load', function() {

    var iframe = document.getElementById("yourIframeId"); // Replace with actual ID



    var params = new URLSearchParams(window.location.search);



    var utmCampaign = params.get("utm_campaign");

    var utmSource = params.get("utm_source");

    var utmMedium = params.get("utm_medium");

    var utmTerm = params.get("utm_term");

    var utmContent = params.get("utm_content");



    var baseSrc = "https://play.goconsensus.com/a70a49a86?hideCookieBanner=true";



    var queryParams = o];

    if (utmCampaign) queryParams.push("utm_campaign=" + encodeURIComponent(utmCampaign));

    if (utmSource) queryParams.push("utm_source=" + encodeURIComponent(utmSource));

    if (utmMedium) queryParams.push("utm_medium=" + encodeURIComponent(utmMedium));

    if (utmTerm) queryParams.push("utm_term=" + encodeURIComponent(utmTerm));

    if (utmContent) queryParams.push("utm_content=" + encodeURIComponent(utmContent));



    var newSrc = baseSrc + (queryParams.length > 0 ? '&' + queryParams.join('&') : '');

    iframe.src = newSrc;

  });

</script>



<iframe id="yourIframeId" src="https://play.goconsensus.com/a70a49a86?hideCookieBanner=true" width="100%" height="650px" frameborder="0" allowfullscreen style="border-radius: 16px; overflow: hidden;"></iframe>

Embedding the Generated Code:

1. Paste the Code into Your Site: Once you’ve copied the code from the tool, paste it into the HTML of your webpage where you want the iframe to appear. Be sure to replace yourIframeId with a unique ID for your iFrame.

2. Test the iFrame: After pasting the generated code, visit the page with some UTM parameters (e.g., ?utm_campaign=your_campaign&utm_source=google) to ensure the iFrame works as expected and appends the parameters correctly.

Benefits of Using the Generator Tool:

• Simplifies Code Creation: No need to manually write or modify code — the tool generates everything for you.

• Reduces Errors: By automating the process, you reduce the chance of mistakes in the code.

• Time-Saving: Quickly generate iFrame code without the need to involve developers for each embed.

Troubleshooting:

• Base URL is incorrect: Ensure the base URL is correct and doesn't already contain query parameters.

UTM parameters not showing: Check the parent URL for valid UTM parameters, and ensure they are not blocked by redirects or URL shorteners.

​​​​​​​A step-by-step guide to embed a dynamic iFrame on your website that captures UTM parameters from the parent URL and appends them to the iFrame's URL.

When to Use This Code

If you're embedding an iFrame that needs to pass UTM parameters (like utm_campaign, utm_source, etc.) from the parent page to an embedded iFrame for tracking purposes, this solution will help ensure that your iFrame URLs are dynamically updated based on the UTM parameters present in the parent URL.

Important Note About Lazy Loading

If you are using lazy loading for iframes (through a plugin or custom implementation), you'll need to either:

1. Exclude this iframe from lazy loading to ensure the UTM parameters are properly passed. You can do this by:

   • Adding data-no-lazy="1" attribute to the iframe if using WordPress lazy loading

   • Adding a specific class to exclude it from your lazy loading implementation (e.g., class="no-lazy")

   • Modifying your lazy loading configuration to exclude iframes with specific IDs or URLs

2. OR modify the script to work with your lazy loading implementation by:

   • Moving the UTM parameter logic into the lazy loading callback function

   • Ensuring the src update happens after the iframe is actually loaded

Code Implementation

Use the following code snippet to embed an iFrame that dynamically captures UTM parameters from the parent URL and appends them to the iFrame URL.

<script>

  window.addEventListener('load', function() {

    var iframe = document.getElementById("yourIframeId"); // Replace with actual ID of your iframe



    // Use URLSearchParams to handle UTM parameters

    var params = new URLSearchParams(window.location.search);



    // Fetch UTM parameters from the parent URL

    var utmCampaign = params.get("utm_campaign");

    var utmSource = params.get("utm_source");

    var utmMedium = params.get("utm_medium");

    var utmTerm = params.get("utm_term");

    var utmContent = params.get("utm_content");



    // Base iframe source URL

    var baseSrc = "https://play.goconsensus.com/a70a49a86?hideCookieBanner=true"; // Modify with your base URL



    // Array to hold query parameters

    var queryParams =  ];



    // Append UTM parameters if they exist

    if (utmCampaign) {

      queryParams.push("utm_campaign=" + encodeURIComponent(utmCampaign));

    }

    if (utmSource) {

      queryParams.push("utm_source=" + encodeURIComponent(utmSource));

    }

    if (utmMedium) {

      queryParams.push("utm_medium=" + encodeURIComponent(utmMedium));

    }

    if (utmTerm) {

      queryParams.push("utm_term=" + encodeURIComponent(utmTerm));

    }

    if (utmContent) {

      queryParams.push("utm_content=" + encodeURIComponent(utmContent));

    }



    // Join the query parameters with '&' and append to the base URL

    var newSrc = baseSrc + (queryParams.length > 0 ? '&' + queryParams.join('&') : '');



    // Log the final iframe URL (for debugging purposes)

    console.log("Final iframe URL: " + newSrc);



    // Update iframe src dynamically

    iframe.src = newSrc;

  });

</script>



<!-- Example iframe with lazy loading exclusion -->

<iframe 

  id="yourIframeId" 

  src="https://play.goconsensus.com/a70a49a86?hideCookieBanner=true" 

  width="100%" 

  height="650px" 

  frameborder="0" 

  allowfullscreen 

  style="border-radius: 16px; overflow: hidden;"

  data-no-lazy="1"

  class="no-lazy">

</iframe>

Instructions for Implementation

1. Copy the Script: Copy the above script and paste it into the HTML of your webpage, ideally close to where your iFrame is located.

2. Modify the Base URL: Replace https://play.goconsensus.com/a70a49a86?hideCookieBanner=true with the base URL of the iFrame source you want to embed. Ensure ?hideCookieBanner=true remains as part of the query string.

3. Assign an ID to Your iFrame: Ensure that the iFrame in the script has a unique ID (yourIframeId in the example). Modify unique ID in the script and the <iframe> tag to match the ID you use.

4. Configure Lazy Loading Exclusion: Add the appropriate attributes to exclude the iframe from lazy loading if necessary (data-no-lazy="1" or appropriate class).

5. Test the Code: Once the script is implemented, test it by visiting the page with UTM parameters (e.g., ?utm_campaign=email_campaign&utm_source=google). Open the browser's developer console (F12) to ensure the correct UTM parameters are being appended to the iFrame URL.

Explanation of Key Elements

• URLSearchParams: This JavaScript object simplifies extracting URL query parameters from the parent URL.

• encodeURIComponent(): This function ensures that UTM values are properly encoded for use in URLs.

• Dynamic iFrame URL: The script appends UTM parameters to the base iframe URL dynamically and updates the iFrame source (src) based on the parent page's URL.

• Lazy Loading Attributes: The data-no-lazy and class="no-lazy" attributes help exclude the iframe from lazy loading when needed.

Troubleshooting

• iFrame not showing content?

  • Ensure that the iFrame's src is updated correctly by checking the browser console for the "Final iframe URL" log

  • Verify that lazy loading isn't interfering with the iframe loading

• UTM parameters not appending?

  • Double-check the parent URL in the browser is correct to ensure it contains valid UTM parameters

  • Confirm that lazy loading isn't preventing the script from executing properly