GA4 Send Custom Conversion Event From Pardot

Charlsey Pearce

May 2, 2022

Have you ever wondered how to set up a custom Google Analytics 4 conversion event that gets fired when a Pardot form is submitted?

If you have, then this blog post is for you!! It goes hand-in-hand with the our tutorial : Google Analytics 4 (GA4) Custom Conversion Event Implementation Tutorial

Pardot Form
We need to add Javascript code to the ‘Thank you Code section’ within the Pardot Form Completion Actions stage to send an event on form completion to the parent webpage.

Go to Pardot → Content → Forms → Edit Form → Completion Actions → Thank You Code. Paste the code listed below. Make the changes to the params as described.
CODE:
<script>
let message = {
eventName:
‘Form_Submit_Contact’,
sendToGA: true
};
let targetOrigin =
‘ENTER_YOUR_TARGET_ORIGIN_HERE’;
parent.postMessage(message,
targetOrigin);
</script>
messagePayload – Payload for the event we send to the WordPress website. Within the payload, we have an eventName paramter that can be altered depending upon which webpage the form is located in. Set this to the event name you’d like to send over. We also have a sendToGA parameter that determines whether the event should be sent to Google Analytics or not. Set it to true if you want to send it over.

targetOrigin – This needs to match the origin of the website the pardot form is placed on.

postMessage – Method used to communicate to the website from the iframe (Window.postMessage() – Web APIs | MDN)
WordPress Website
We need to add the google script tag code, dynamically embed the iframe and and an event listener required to log events from pardot and send events to Google Analaytics 4.
Go to the section of the website where you want to embed the iframe and paste the code below. Make the changes to the params as described.

Full Code
<!– 1. GTM Script –>
<!– Add your Google tag script here –>
<!– It will be in the format as shown below: –>
<script async src=”https://www.googletagmanager.com/gtag/js?id=G-…”></script>
<script>
window.dataLayer =
window.dataLayer || [];
function gtag()
{dataLayer.push(arguments);}
gtag(‘js’, new Date());
gtag(‘config’, ‘G-…’);
</script>

<!– 2. Dynamic Pardot form insertion –>
<!– Insert div with custom id beforehand to insert the pardot iframe dynamically –>
<div id=”before-pardot-form”></div>
<script type=”text/javascript”>
const FORM_URL =
‘ENTER_YOUR_FORM_URL_HERE’;
const DIV_ID = ‘before-pardot-form’;
let fieldId = “Last_Page_URL”;
let title = encodeURI(window.location.href);
let nodeBefore = document.getElementById(DIV_ID);
let formNode = document.createElement(‘iframe’);
//Create iframe dynamically
formNode.id = ‘pardot-frame’;
formNode.width = ‘100%’ formNode.height = 1000;
formNode.frameBorder = 0;
formNode.style = ‘border: 0;’
let fullUrl = FORM_URL+’?’+fieldId+’=’+title;
formNode.src = fullUrl;
//Insert the iframe
nodeBefore.parentNode.insertBefore(formNode, nodeBefore.nextSibling);

//3. Google Analytics Fire Event and event listener
//Event listener to the ‘message’ event which is fired after the pardot form is submitted
window.addEventListener(“message”,function(){
if(event.data.sendToGA){
let eventName = event.data.eventName;
gtag(“event”, eventName, {});
} }, false);
</script>
What does the code do?

Snippet 1: Adding google script tag code: The first snippet is taking directly off Google Analytics/Tag Manager whenever we set up the tag:

<!-- 1. GTM Script -->
<!-- Add your Google tag script here -->
<!-- It will be in the format as shown below: -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-..."></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-...');
</script>

Snippet 2: Dynamically embedding the iframe Sets the iframe characteristics dynamically and inserts it directly after the ‘before-pardot-form’ div has been inserted. So ideally, you would want to insert the entire full code snippet right within the section/component where you want to embed the iframe FORM_URL: Set to the pardot form URL

Adjust other iframe characteristics as needed.
<!-- 2. Dynamic Pardot form insertion -->
<!-- Insert div with custom id beforehand to insert the pardot iframe dynamically -->
<div id="before-pardot-form"></div>
<script type="text/javascript">
const FORM_URL = 'ENTER_YOUR_PARDOT_FORM_URL_HERE';
const DIV_ID = 'before-pardot-form';
let fieldId = "Last_Page_URL";
let title = encodeURI(window.location.href);
let nodeBefore = document.getElementById(DIV_ID);
let formNode = document.createElement('iframe');
//Create iframe dynamically
formNode.id = 'pardot-frame';
formNode.width = '100%'
formNode.height = 1000;
formNode.frameBorder = 0;
formNode.style = 'border: 0;'
let fullUrl = FORM_URL+'?'+fieldId+'='+title;
formNode.src = fullUrl;
//Insert the iframe
nodeBefore.parentNode.insertBefore(formNode, nodeBefore.nextSibling);

Snippet 3: Event listener and Google Analytics 4 Event Fire Listens to the ‘message’ event sent by the Pardot form and fires a cusotm Google Analytics 4 even, which has the same name as the event in Pardot.

//3. Google Analytics Fire Event and event listener
//Event listener to the 'message' event which is fired after the pardot form is submitted
window.addEventListener("message",function(){
  if(event.data.sendToGA){
      let eventName = event.data.eventName;
      gtag("event", eventName, {});
  }
},
false);

Listens to the message event fired by pardot and dynamically fires an event to GA4 depending upon the event name that has been configured within pardot. Only fires the event if the sendToGA property is set to true within the payload.

More Articles
© 2023 Ingenuity, All Rights Reserved