This article outlines how customers can use Google event tracking in their PathFactory instance to unlock additional insights about visitors interacting with their content. For example, form submissions tracking in PathFactory can be sent to Google Analytics, allowing you to incorporate the data points into aggregate reporting as needed.
In this guide, we’ll show you how to set up these standard events, add them to PathFactory, mark them as conversions, and ultimately add to your conversion metrics in GA4.
Prerequisites:
- GA4 Admin Access
- Enhanced event measurement is enabled within GA4
- Custom events configured within GA4
- Your GA4 property is integrated with your PathFactory instance
Step 1: Ensure that the GA4 scripts are running in your instance
In most cases, Google Analytics scripts will already be running across your instance as it is typically implemented during your initial onboarding to PathFactory. To confirm that your GA4 measurement ID is applied, you can navigate to your instance’s Organization Settings (in the top right ‘signed in as’ dropdown menu).
NOTE: Some customers will have this implemented by deploying the script via Google Tag Manager ( GTM) globally enabled in PathFactory. Customers should not call this script manually if they have the script deployed using either of these methods as it will cause duplications.
If not using GTM, be sure to add your GA4 property.
Step 2: Determine Tracking Events
Next, you’ll want to determine the events to track within the GA4 property determined in the Google Tag setup. Each event has parameters associated with it. Note: You can only use the parameters in your reports if you create custom dimensions for them.
Event | Automatically Triggered… | Parameters |
form_start | When a user is displayed a form via Form Strategy or CTAs. | form_id, form_name, form_destination |
form_submit | When a user submits a form. | form_id, form_name, form_destination, form_submit_text |
file_download | When a user clicks the download icon on a PDF. Note: This event will only trigger when using PathFactory’s default PDF viewer. (PDF Fallback Viewer is disabled) | file_extension, file_name, link_url |
Step 3: Create Custom Event Script in External Code Library
Below is a sample code configured to handle the form_start, form_submit (both for Standard and External Forms), and file_download events. You’ll need to adjust the script to meet your needs:
- The Dispatch Events, highlighted in yellow can follow any of the events listed in this article.
- The gtag parameters highlighted in red will need to follow the Tracking events configured in step 2.
Note: PathFactory external code snippets are not automatically added inside the Custom Form HTML code. This means that you if add a code snippet in PathFactory through the External Code Module, the forms in the Form Library will not interhit that code. In this case, we use PathFactory’s dispatch events which will trigger-run external code snippets when a certain event occurs such as the form_submit event, which will run the external code the moment a form submission is detected by PathFactory.
To configure the integration within PathFactory, you will need to:
- Add External Code leverage the Using External Code documentation
- Copy/paste the code below to CODE SNIPPET
- Set LOCATION as Bottom Body Tag
- Enable Globally. Below is the snippet in a copy & paste format for your convenience.
<script>
handleJukeboxDispatchedEvents = event => {
switch (event.detail.eventName) {
// Trigger Form Show Event
case "capture_show":
gtag('event', 'form_start', {
'form_id': event.detail.promoterConfig.formId,
'form_name': event.detail.promoterConfig.form.name,
'form_destination': window.location.href
});
console.info('Capture Show', event.detail);
break;
// Trigger Form Submit Event - External Forms
case "submit_external_form":
gtag('event', 'form_submit', {
'form_id': event.detail.promoterConfig.formId,
'form_name': event.detail.promoterConfig.form.name,
'form_destination': window.location.href
});
console.info('Submit External Form', event.detail);
break;
// Trigger Form Submit Event - Standard Forms
case "submit_form":
gtag('event', 'form_submit', {
'form_id': event.detail.promoterConfig.formId,
'form_name': event.detail.promoterConfig.form.name,
'form_destination': window.location.href,
'form_submit_text': event.detail.promoterConfig.form.formDetails.buttonText
});
console.info('Submit Form', event.detail);
break;
// Trigger File Download Event
case "click_download_pdf":
gtag('event', 'file_download', {
'file_extension': 'pdf',
'file_name': '{{content.title}}',
'link_url': '{{content.url}}'
});
console.info('Click Download', event.detail);
break;
}
};
window.addEventListener("pf_event", this.handleJukeboxDispatchedEvents, false);
</script>
Step 4: Verify the Event in GA4
Visit any track and perform an action defined in your Google Tag script to trigger an event. Using the Realtime overview report, you can verify Event are successfully passing to your GA4 property.
Step 5: Mark Events as Conversions
In the Admin section, select Events for your property. Use the toggle “Mark as conversion” to ensure certain events show up as conversions in your reporting going forward.
Note: Events can take up to 48 hours to appear. During our testing, Events did not appear until the next day.