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.
Issue:-
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?
Solved! Go to Solution.
Topics help categorize Community content and increase your ability to discover relevant content.
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/
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/