SOLVED
CSS selector for iframe in VEC to track the click event in adobe target
1 Accepted Solution
Correct answer by
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):
<script>
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
});
</script>
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">
<head>
<meta charset="UTF-8">
<title>Track iFrame Clicks</title>
</head>
<body>
<iframe id="pardot-iframe" src="URL_OF_PARDOT_FORM" style="width:100%; height:500px;" frameborder="0"></iframe>
<script>
// 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() {
trackIframeClick();
});
</script>
</body>
</html>
and script for the pardot form:
<script>
document.querySelector('form').addEventListener('submit', function(event) {
// Send a message to the parent window when the form is submitted
window.parent.postMessage('pardotFormSubmitClicked', '*');
});
</script>
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/
Correct answer by
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):
<script>
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
});
</script>
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">
<head>
<meta charset="UTF-8">
<title>Track iFrame Clicks</title>
</head>
<body>
<iframe id="pardot-iframe" src="URL_OF_PARDOT_FORM" style="width:100%; height:500px;" frameborder="0"></iframe>
<script>
// 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() {
trackIframeClick();
});
</script>
</body>
</html>
and script for the pardot form:
<script>
document.querySelector('form').addEventListener('submit', function(event) {
// Send a message to the parent window when the form is submitted
window.parent.postMessage('pardotFormSubmitClicked', '*');
});
</script>
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/
