Tag Manager Installation (Wordpress)
To install on google tag manager it is advised to use the gtm4wp: Google Tag Manager for WordPress (Plugin)
Tracking Other Wordpress Contact Plugins
Caldera Forms
Create tag as Custom HTML:
<script>
jQuery( function() {
jQuery( document ).on( 'cf.form.submit', function (event, data ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
});
});
</script>
- note, the JS bind will not fire if the form is not set to AJAX submission.
Contact Form 7
Create tag as Custom HTML:
<script>
if (typeof jQuery != 'undefined') {
jQuery( function() {
jQuery('.wpcf7').on('wpcf7mailsent', function(e) {
var dataLayer = window.dataLayer || [];
var cF7formid = '(not set)';
var cF7formName = '(not set)';
if ( e && e.target && e.target.id ) {
cF7formName = e.target.id;
}
if( cF7formName ) {
var nameRegex = cF7formName.match(/-f([0-9]+)-/) || [''];
if( nameRegex && nameRegex[1] ) {
cF7formid = nameRegex[1];
}
}
dataLayer.push({
'contact-form-id': cF7formid,
'contact-form-name': cF7formName,
'event': 'contact-form-submitted'
});
});
});
}
</script>
Note: CF7 developers love changing their hook names, if this doesn't work try the below instead:
jQuery('.wpcf7').on('wpcf7:mailsent', function(e) {
Conversion Plus
For the popup form, create tag as Custom HTML and use the ajaxSuccess hook below:
<script>
jQuery(document).ready(function() {
jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {
if( ~settings.url.indexOf("/wp-admin/admin-ajax.php") && ~settings.data.indexOf("action=cp_add_subscriber") ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'cp-form-submitted'});
}
});
});
</script>
Divi Form Builder
Create tag as Custom HTML and use the ajaxSuccess hook below, the location will need to be changed to the contact page it is submitting the Ajax request to.
<script>
jQuery(document).ready(function() {
jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {
if (~settings.url.indexOf("/contact/")) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
}
});
});
</script>
It is also possible to use the field names that are being submitted:
<script>
jQuery(document).ready(function() {
jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {
if (~settings.data.indexOf("et_pb_contact_firstname")) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
}
});
});
</script>
Elementor Form Builder
Create tag as Custom HTML:
<script>
jQuery( document ).ready(function( $ ){
$( document ).on('submit_success', function( event, response ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
});
});
</script>
FluentForms
This can be tracked by creating a custom html tag with the below within in GTM:
<script>
(function($){
var fluentForms = $('.frm-fluent-form');
fluentForms.each(function() {
var $form = $(this);
var formId = $form.attr('data-form_id');
dataLayer.push({
'event': 'FluentFormActivities',
'eventCategory': 'FluentForm',
'eventAction': 'FormView',
'FluentFormID' : formId
});
$form.on('fluentform_submission_success', function() {
dataLayer.push({
'event': 'FluentFormActivities',
'eventCategory': 'FluentForm',
'eventAction': 'FormSubmitted',
'FluentFormID' : formId
});
});
});
}(jQuery));
</script>
FormCraft
This plugin does not strip or encode script tags, so can be done in the back-end
In form options go to options -> Custom Text -> Top Box
In newer versions, the form cannot be saved with the script tag added, another method will need to be researched.
Formidable
Just can copy and paste the dataLayer event script directly to success message in back-end.
Edit form -> Actions & Notifications -> Confirmation
<script>var dataLayer = window.dataLayer || []; dataLayer.push({'event' : 'contact-form-submitted'});</script>
Forminator
Create tag as custom HTML:
<script>
if (typeof jQuery != 'undefined') {
jQuery('body').on('forminator:form:submit:success', '.forminator-custom-form', function(e, data) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'forminator-form-submitted'});
});
}
</script>
Some other JS triggers:
forminator:form:added before:forminator:form:submit after:forminator:form:submit forminator:form:submit:success forminator:form:submit:failed forminator:form:submit:complete
You can also change the triggers above from form to either poll and quiz
Gravity Form
Create tag as custom HTML:
<script>
if (typeof jQuery != 'undefined') {
jQuery(document).ready(function(){
jQuery(document).on('gform_confirmation_loaded', function(event, form_id) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'gform_id' : form_id, 'event' : 'contact-form-submitted'});
});
});
}
</script>
For this to work, AJAX is required to be enabled on the form. This can be enabled in the short-code[1] when the form is called on the wordpress page:
[gravityform id="1" ajax="true"]
- note, the JS bind will not fire if the form is set to redirect after success.
Ninja Forms
Create tag as Custom HTML:
<script>
jQuery(document).ready( function() {
jQuery(document).on('nfFormSubmitResponse', function(event, response, id) {
var dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'contact-form-submitted',
'NFform_id': response.id
});
});
});
</script>
Pojo Forms
Create tag as Custom HTML:
<script>
jQuery( document ).ready(function( $ ){
$( document ).on('pojo_forms_form_submitted', function( event, response ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
});
});
</script>
QuForm
1.x
https://support.themecatcher.net/quform-wordpress/guides/basic/adding-custom-javascript/
<script>
if( typeof jQuery != 'undefined' ) {
jQuery(document).ready(function() {
jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {
if(
~settings.data.indexOf('iphorm_id=') &&
~settings.data.indexOf('post_id=')
) {
var idRegex = settings.data.match(/iphorm_id=([0-9]+)/) || [''];
if( idRegex && idRegex[1] ) {
form_id = idRegex[1];
}
var pidRegex = settings.data.match(/post_id=([0-9]+)/) || [''];
if( pidRegex && pidRegex[1] ) {
post_id = pidRegex[1];
}
var dataLayer = window.dataLayer || [];
dataLayer.push({
'form_id': form_id,
'post_id': post_id,
'domain': window.location.hostname,
'event' : 'qf-form-submitted'
});
}
});
});
}
</script>
2.x
https://support.themecatcher.net/quform-wordpress-v2/guides/integration/google-analytics/
<script>
jQuery(function ($) {
$('.quform-form-1').on('quform:successStart', function () {
dataLayer.push({'event': 'Contact Form'});
});
});
</script>
Siteorigin form
this strips out script tags so will need to add custom JS:
function () {
var success = document.getElementsByClassName("sow-contact-form-success");
return (typeof success[0] != "undefined");
}
Subsystic Popup
For the popup form, create tag as Custom HTML and use the ajaxSuccess hook below:
<script>
jQuery(document).ready(function() {
jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {
if( ~settings.url.indexOf("/wp-admin/admin-ajax.php") && ~settings.data.indexOf("action=subscribe") && ~settings.data.indexOf("pl=pps") ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'popup-form-submitted'});
}
});
});
</script>
The Plus Addons For Elementor (TPAE)
Forms can be tracked using a slight variation on the generic form listener:
<script>
jQuery(document).ready(function() {
jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {
if (~settings.url.indexOf("/wp-admin/admin-ajax.php") && ~settings.data.indexOf("action=tpae_form_submission")) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'tpae-form-submitted'});
}
});
});
</script>
WP Forms
Using a slightly altered version of the JQuery form listener should work for this:
<script>
jQuery(document).ready(function() {
jQuery( document ).on('wpformsAjaxSubmitSuccess', (function( event, json ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'form-submitted'});
}));
});
</script>
Alternatively: The Event can be added directly to the form confirmation message Edit the form & go to Settings > Confirmations Switch to Text view then add the event code:
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
</script>
Or if using GTM4WP
Add a datalayer variable in GTM with:
eventModel.form_id for Form ID
Setup a custom event Trigger:
Event: form_submit Some Custom Events: Form ID contains wpforms-form-
WS Forms
https://wsform.com/knowledgebase/conversion-tracking/
Go into admin, click to edit the required form.
In the form edit view, click the lightning icon (actions).
Add a new action for conversion tracking.
Select Google Tag Manager (DataLayer)
Enter "event" in the "Key" field.
Enter "ws-form-submitted" in the "Value" field.
Then publish the form.
Tracking Other Wordpress Newsletter Plugins
Mailchimp Forms (mc4wp)
if is not AJAX and stays on page when the form submits, add a JS variable:
function () {
var success = document.getElementsByClassName("mc4wp-success");
return (typeof success[0] != "undefined");
}
if not, custom HTML will need to be added as a listener:
jQuery(document).ready(function() {
mc4wp.forms.on('submitted', function() {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'newsletter-form-submitted'});
});
});
Pop-up Builder - Mailchimp
Add Custom HTML:
<script>
if (typeof SgpbMailchimp != "undefined") {
var originalmcsuccess = SgpbMailchimp.prototype.sgpbMailchimpSuccess;
SgpbMailchimp.prototype.sgpbMailchimpSuccess = function(data) {
originalmcsuccess.call(this, data);
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'mailchimp-form-submitted'});
};
}
</script>
Avia Form Builder
Add Custom HTML:
<script>
(function($) {
$('body').on('av_resize_finished', function() {
if(!$('#ajaxresponse_1').hasClass('hidden')) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'avia-form-submitted'});
}
});
})(jQuery);
</script>
Note: (Still not 100% on this)
Tracking Other Wordpress Ecommerce Plugins
WooCommerce
See Article: WooCommerce
Foxy Shop
https://wiki.foxycart.com/v/2.0/receipt#using_custom_tracking_code
copy template from:
/wp-content/plugins/foxyshop/themefiles/foxyshop-receipt.php
to theme / child theme root
Code:
{% if first_receipt_display %}
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({
'order_id' : '{{ order_id }}',
'order_value' : '{{ total_order }}',
'event' : 'order-submitted'
});
</script>
{% endif %}
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({
'order_id' : '<?php echo $transaction_id; ?>',
'order_value' : '<?php echo $order_total; ?>',
'event' : 'order-submitted'
});
</script>
Chauffeur Booking System Plugin
The Chauffeur Booking System Plugin is a paid for plug-in with very little documentation and hooks (actions and filters) to use at the time of looking into this.
The order ID & order value cannot be tracked without modification of the plugin.
Below is code to track the booking completion.
Insert the code as a custom HTML tag in the tag manager:
<script>
if (typeof jQuery != 'undefined') {
(function ($) {
var origCss = $.fn.css;
$.fn.css = function(prop, value) {
if( prop == 'display' && value == 'block' && this.hasClass('chbs-main-content-step-5') ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'chauffeur-booking-form-submitted'});
}
return origCss.apply(this, arguments);
}
})(jQuery);
}
</script>