Expand my Community achievements bar.

Join us for an upcoming in-person Adobe Target Skill Builders event ~~> We're hosting these live learning opportunities to equip you with the knowledge and skills to leverage Target successfully. Learn more to see if we'll be coming to a city near you!

CSS selector for iframe in VEC to track the click event in adobe target


Level 3

Hi Everyone,


I have a pardot form embdded in my page and that form load inside Iframe, I want to track the click event of submit button in form.

I am using VEC for creating the activity.


But we are not able to target the elements inside the form. We are not able to select the elements to track the click event.

Any suggestions how we can achieve this?

1 Reply


Level 4

Hi @varun790 


By default there is no way to get data/track something inside within an iframe unless you can inject script to the page (in your case a form) shown in the iframe.


As i see it there are 2 options:


1. track clicks on iframe

Track the number of clicks on the iframe and treat them as the submit - though, knowing it isn't correct. 

Something like this should do the trick for you (I've not included the necessary target code for the example):

  document.getElementById('pardot-iframe').contentWindow.addEventListener('click', function() {
    // Attempt to detect clicks within the iframe
    console.log('Click detected within the iframe!');
    // You can add your tracking code here


2. inject script in the pardot form

I'm not an expert in pardot, but i've previously worked with clients who were able to inject custom script to the form. I found this link [0] that describes the steps.


This should give you 2 options:

a) inject at.js and either send a target request on click or simply having the at.js should also allow for the VEC to work


2) not deploy at.js but use javascript to create a 'bridge' between the iframe and your main page - which would allow you to trigger a Target request (on the main page, when triggered by iframe). I'm not a developer, so have a real developer validate this approach, but i think it could look something like this:


Example script for main page:

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <title>Track iFrame Clicks</title>

<iframe id="pardot-iframe" src="URL_OF_PARDOT_FORM" style="width:100%; height:500px;" frameborder="0"></iframe>

  // Function to track clicks within the iframe
  function trackIframeClick(event) {
    const iframe = document.getElementById('pardot-iframe');
    const iframeWindow = iframe.contentWindow;

    // Listen for messages from the iframe
    window.addEventListener('message', function(event) {
      if (event.data === 'pardotFormSubmitClicked') {
        // Handle the Pardot form submit click event
        console.log('Pardot form submit button was clicked!');
        // You can add your tracking code here, e.g., sending data to Google Analytics

  // Check if the iframe is loaded and set up the click tracking
  document.getElementById('pardot-iframe').addEventListener('load', function() {



and script for the pardot form:

  document.querySelector('form').addEventListener('submit', function(event) {
    // Send a message to the parent window when the form is submitted
    window.parent.postMessage('pardotFormSubmitClicked', '*');

I hope there's something in this you can use.

[0] https://thespotforpardot.com/2021/09/03/6-ways-to-use-javascript-to-enhance-your-pardot-forms/