Growth Agency Wiki - User contributions [en-gb]

Tag Manager Installation (Wordpress)

2025-12-03T12:15:00Z

Aaron.trevellick:

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:

<pre>
<script>
jQuery( function() {
jQuery( document ).on( 'cf.form.submit', function (event, data ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
});
});
</script>
</pre>

*note, the JS bind will not fire if the form is not set to AJAX submission.

== Contact Form 7 ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

Note: CF7 developers love changing their hook names, if this doesn't work try the below instead:<br />
<pre>
jQuery('.wpcf7').on('wpcf7:mailsent', function(e) {
</pre>

== Conversion Plus ==

For the popup form, create tag as Custom HTML and use the ajaxSuccess hook below:

<pre>
<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>
</pre>

== 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.

<pre>
<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>
</pre>
<br />
It is also possible to use the field names that are being submitted:

<pre>
<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>
</pre>

== Elementor Form Builder ==

Create tag as Custom HTML:

<pre>
<script>
jQuery( document ).ready(function( $ ){
$( document ).on('submit_success', function( event, response ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
});
});
</script>
</pre>

== 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
<pre>
<script>var dataLayer = window.dataLayer || []; dataLayer.push({'event' : 'contact-form-submitted'});</script>
</pre>

== Forminator ==

Create tag as custom HTML:

<pre>
<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>
</pre>

Some other JS triggers:
<pre>
forminator:form:added
before:forminator:form:submit
after:forminator:form:submit
forminator:form:submit:success
forminator:form:submit:failed
forminator:form:submit:complete
</pre>

You can also change the triggers above from form to either poll and quiz

== Gravity Form ==

Create tag as custom HTML:

<pre>
<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>
</pre>

For this to work, AJAX is required to be enabled on the form.
This can be enabled in the short-code[https://codex.wordpress.org/Shortcode_API] when the form is called on the wordpress page:
<pre>
[gravityform id="1" ajax="true"]
</pre>

*note, the JS bind will not fire if the form is set to redirect after success.

== Ninja Forms ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

== Pojo Forms ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

== QuForm ==

=== 1.x ===

https://support.themecatcher.net/quform-wordpress/guides/basic/adding-custom-javascript/

<pre>
<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>
</pre>

=== 2.x ===

https://support.themecatcher.net/quform-wordpress-v2/guides/integration/google-analytics/

<pre>
<script>
jQuery(function ($) {
$('.quform-form-1').on('quform:successStart', function () {
dataLayer.push({'event': 'Contact Form'});
});
});
</script>
</pre>

== Siteorigin form ==
this strips out script tags so will need to add custom JS:

<pre>
function () {
var success = document.getElementsByClassName("sow-contact-form-success");
return (typeof success[0] != "undefined");
}
</pre>

== Subsystic Popup ==

For the popup form, create tag as Custom HTML and use the ajaxSuccess hook below:

<pre>
<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>
</pre>

== WP Forms ==
Using a slightly altered version of the JQuery form listener should work for this:

<pre>
<script>
jQuery(document).ready(function() {
jQuery( document ).on('wpformsAjaxSubmitSuccess', (function( event, json ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'form-submitted'});
}));
});
</script>
</pre>

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:
<pre>
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
</script>
</pre>

<b>Or if using GTM4WP</b><br />
Add a datalayer variable in GTM with:<br />
eventModel.form_id for Form ID<br />

Setup a custom event Trigger:
<pre>
Event: form_submit
Some Custom Events:
Form ID contains wpforms-form-
</pre>

== WS Forms ==

https://wsform.com/knowledgebase/conversion-tracking/<br /><br />

Go into admin, click to edit the required form.<br />
In the form edit view, click the lightning icon (actions).<br />
Add a new action for conversion tracking.<br />
Select Google Tag Manager (DataLayer)<br />
Enter "event" in the "Key" field.<br />
Enter "ws-form-submitted" in the "Value" field.<br /><br />
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:

<pre>
function () {
var success = document.getElementsByClassName("mc4wp-success");
return (typeof success[0] != "undefined");
}
</pre>

if not, custom HTML will need to be added as a listener:

<pre>
jQuery(document).ready(function() {
mc4wp.forms.on('submitted', function() {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'newsletter-form-submitted'});
});
});
</pre>

== Pop-up Builder - Mailchimp ==

Add Custom HTML:

<pre>
<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>
</pre>

== Avia Form Builder ==
Add Custom HTML:

<pre>
<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>
</pre>

Note: (Still not 100% on this)

= Tracking Other Wordpress Ecommerce Plugins =

== WooCommerce ==

See Article: [[WooCommerce]]

== Foxy Shop ==

<pre>
https://wiki.foxycart.com/v/2.0/receipt#using_custom_tracking_code
</pre>

copy template from:
<pre>
/wp-content/plugins/foxyshop/themefiles/foxyshop-receipt.php
</pre>

to theme / child theme root

Code:

<pre>
{% if first_receipt_display %}

<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({
'order_id' : '{{ order_id }}',
'order_value' : '{{ total_order }}',
'event' : 'order-submitted'
});
</script>

{% endif %}
</pre>

<pre>
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({
'order_id' : '<?php echo $transaction_id; ?>',
'order_value' : '<?php echo $order_total; ?>',
'event' : 'order-submitted'
});
</script>
</pre>

== 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.<br />
The order ID & order value cannot be tracked without modification of the plugin.

Below is code to track the booking completion.<br />
Insert the code as a custom HTML tag in the tag manager:

<pre>
<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>
</pre>

Main Page

2025-07-29T09:09:38Z

Aaron.trevellick: /* Login to make changes */

== Login to make changes ==
You can login using the same username and password as the tools login.

== Main Subjects ==

Google Tag Manager Installation: [[Google Tag Manager]]<br />
Google Call Tracking: [[Google Call Tracking]]<br />
Getting Feeds: [[Feeds]]<br /><br />

Let's Encrypt: [[LetsEncrypt]]

SuiteCRM 8.x: [[SuiteCRM_8.x]]

Tag Manager Installation (Wordpress)

2025-07-09T16:05:08Z

Aaron.trevellick: /* 1.x */

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:

<pre>
<script>
jQuery( function() {
jQuery( document ).on( 'cf.form.submit', function (event, data ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
});
});
</script>
</pre>

*note, the JS bind will not fire if the form is not set to AJAX submission.

== Contact Form 7 ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

Note: CF7 developers love changing their hook names, if this doesn't work try the below instead:<br />
<pre>
jQuery('.wpcf7').on('wpcf7:mailsent', function(e) {
</pre>

== Conversion Plus ==

For the popup form, create tag as Custom HTML and use the ajaxSuccess hook below:

<pre>
<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>
</pre>

== 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.

<pre>
<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>
</pre>
<br />
It is also possible to use the field names that are being submitted:

<pre>
<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>
</pre>

== Elementor Form Builder ==

Create tag as Custom HTML:

<pre>
<script>
jQuery( document ).ready(function( $ ){
$( document ).on('submit_success', function( event, response ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
});
});
</script>
</pre>

== 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
<pre>
<script>var dataLayer = window.dataLayer || []; dataLayer.push({'event' : 'contact-form-submitted'});</script>
</pre>

== Gravity Form ==

Create tag as custom HTML:

<pre>
<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>
</pre>

For this to work, AJAX is required to be enabled on the form.
This can be enabled in the short-code[https://codex.wordpress.org/Shortcode_API] when the form is called on the wordpress page:
<pre>
[gravityform id="1" ajax="true"]
</pre>

*note, the JS bind will not fire if the form is set to redirect after success.

== Ninja Forms ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

== Pojo Forms ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

== QuForm ==

=== 1.x ===

https://support.themecatcher.net/quform-wordpress/guides/basic/adding-custom-javascript/

<pre>
<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>
</pre>

=== 2.x ===

https://support.themecatcher.net/quform-wordpress-v2/guides/integration/google-analytics/

<pre>
<script>
jQuery(function ($) {
$('.quform-form-1').on('quform:successStart', function () {
dataLayer.push({'event': 'Contact Form'});
});
});
</script>
</pre>

== Siteorigin form ==
this strips out script tags so will need to add custom JS:

<pre>
function () {
var success = document.getElementsByClassName("sow-contact-form-success");
return (typeof success[0] != "undefined");
}
</pre>

== Subsystic Popup ==

For the popup form, create tag as Custom HTML and use the ajaxSuccess hook below:

<pre>
<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>
</pre>

== WP Forms ==
Using a slightly altered version of the JQuery form listener should work for this:

<pre>
<script>
jQuery(document).ready(function() {
jQuery( document ).on('wpformsAjaxSubmitSuccess', (function( event, json ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'form-submitted'});
}));
});
</script>
</pre>

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:
<pre>
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
</script>
</pre>

<b>Or if using GTM4WP</b><br />
Add a datalayer variable in GTM with:<br />
eventModel.form_id for Form ID<br />

Setup a custom event Trigger:
<pre>
Event: form_submit
Some Custom Events:
Form ID contains wpforms-form-
</pre>

== WS Forms ==

https://wsform.com/knowledgebase/conversion-tracking/<br /><br />

Go into admin, click to edit the required form.<br />
In the form edit view, click the lightning icon (actions).<br />
Add a new action for conversion tracking.<br />
Select Google Tag Manager (DataLayer)<br />
Enter "event" in the "Key" field.<br />
Enter "ws-form-submitted" in the "Value" field.<br /><br />
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:

<pre>
function () {
var success = document.getElementsByClassName("mc4wp-success");
return (typeof success[0] != "undefined");
}
</pre>

if not, custom HTML will need to be added as a listener:

<pre>
jQuery(document).ready(function() {
mc4wp.forms.on('submitted', function() {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'newsletter-form-submitted'});
});
});
</pre>

== Pop-up Builder - Mailchimp ==

Add Custom HTML:

<pre>
<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>
</pre>

== Avia Form Builder ==
Add Custom HTML:

<pre>
<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>
</pre>

Note: (Still not 100% on this)

= Tracking Other Wordpress Ecommerce Plugins =

== WooCommerce ==

See Article: [[WooCommerce]]

== Foxy Shop ==

<pre>
https://wiki.foxycart.com/v/2.0/receipt#using_custom_tracking_code
</pre>

copy template from:
<pre>
/wp-content/plugins/foxyshop/themefiles/foxyshop-receipt.php
</pre>

to theme / child theme root

Code:

<pre>
{% if first_receipt_display %}

<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({
'order_id' : '{{ order_id }}',
'order_value' : '{{ total_order }}',
'event' : 'order-submitted'
});
</script>

{% endif %}
</pre>

<pre>
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({
'order_id' : '<?php echo $transaction_id; ?>',
'order_value' : '<?php echo $order_total; ?>',
'event' : 'order-submitted'
});
</script>
</pre>

== 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.<br />
The order ID & order value cannot be tracked without modification of the plugin.

Below is code to track the booking completion.<br />
Insert the code as a custom HTML tag in the tag manager:

<pre>
<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>
</pre>

Tag Manager Installation (Wordpress)

2025-07-09T16:03:49Z

Aaron.trevellick: /* Tracking Other Wordpress Contact Plugins */

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:

<pre>
<script>
jQuery( function() {
jQuery( document ).on( 'cf.form.submit', function (event, data ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
});
});
</script>
</pre>

*note, the JS bind will not fire if the form is not set to AJAX submission.

== Contact Form 7 ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

Note: CF7 developers love changing their hook names, if this doesn't work try the below instead:<br />
<pre>
jQuery('.wpcf7').on('wpcf7:mailsent', function(e) {
</pre>

== Conversion Plus ==

For the popup form, create tag as Custom HTML and use the ajaxSuccess hook below:

<pre>
<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>
</pre>

== 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.

<pre>
<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>
</pre>
<br />
It is also possible to use the field names that are being submitted:

<pre>
<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>
</pre>

== Elementor Form Builder ==

Create tag as Custom HTML:

<pre>
<script>
jQuery( document ).ready(function( $ ){
$( document ).on('submit_success', function( event, response ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
});
});
</script>
</pre>

== 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
<pre>
<script>var dataLayer = window.dataLayer || []; dataLayer.push({'event' : 'contact-form-submitted'});</script>
</pre>

== Gravity Form ==

Create tag as custom HTML:

<pre>
<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>
</pre>

For this to work, AJAX is required to be enabled on the form.
This can be enabled in the short-code[https://codex.wordpress.org/Shortcode_API] when the form is called on the wordpress page:
<pre>
[gravityform id="1" ajax="true"]
</pre>

*note, the JS bind will not fire if the form is set to redirect after success.

== Ninja Forms ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

== Pojo Forms ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

== QuForm ==

=== 1.x ===

https://support.themecatcher.net/quform-wordpress/guides/basic/adding-custom-javascript/

<pre>
<script>
if( typeof jQuery != 'undefined' ) {

jQuery(document).ready(function() {
jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {
console.log( 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>
</pre>

=== 2.x ===

https://support.themecatcher.net/quform-wordpress-v2/guides/integration/google-analytics/

<pre>
<script>
jQuery(function ($) {
$('.quform-form-1').on('quform:successStart', function () {
dataLayer.push({'event': 'Contact Form'});
});
});
</script>
</pre>

== Siteorigin form ==
this strips out script tags so will need to add custom JS:

<pre>
function () {
var success = document.getElementsByClassName("sow-contact-form-success");
return (typeof success[0] != "undefined");
}
</pre>

== Subsystic Popup ==

For the popup form, create tag as Custom HTML and use the ajaxSuccess hook below:

<pre>
<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>
</pre>

== WP Forms ==
Using a slightly altered version of the JQuery form listener should work for this:

<pre>
<script>
jQuery(document).ready(function() {
jQuery( document ).on('wpformsAjaxSubmitSuccess', (function( event, json ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'form-submitted'});
}));
});
</script>
</pre>

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:
<pre>
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
</script>
</pre>

<b>Or if using GTM4WP</b><br />
Add a datalayer variable in GTM with:<br />
eventModel.form_id for Form ID<br />

Setup a custom event Trigger:
<pre>
Event: form_submit
Some Custom Events:
Form ID contains wpforms-form-
</pre>

== WS Forms ==

https://wsform.com/knowledgebase/conversion-tracking/<br /><br />

Go into admin, click to edit the required form.<br />
In the form edit view, click the lightning icon (actions).<br />
Add a new action for conversion tracking.<br />
Select Google Tag Manager (DataLayer)<br />
Enter "event" in the "Key" field.<br />
Enter "ws-form-submitted" in the "Value" field.<br /><br />
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:

<pre>
function () {
var success = document.getElementsByClassName("mc4wp-success");
return (typeof success[0] != "undefined");
}
</pre>

if not, custom HTML will need to be added as a listener:

<pre>
jQuery(document).ready(function() {
mc4wp.forms.on('submitted', function() {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'newsletter-form-submitted'});
});
});
</pre>

== Pop-up Builder - Mailchimp ==

Add Custom HTML:

<pre>
<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>
</pre>

== Avia Form Builder ==
Add Custom HTML:

<pre>
<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>
</pre>

Note: (Still not 100% on this)

= Tracking Other Wordpress Ecommerce Plugins =

== WooCommerce ==

See Article: [[WooCommerce]]

== Foxy Shop ==

<pre>
https://wiki.foxycart.com/v/2.0/receipt#using_custom_tracking_code
</pre>

copy template from:
<pre>
/wp-content/plugins/foxyshop/themefiles/foxyshop-receipt.php
</pre>

to theme / child theme root

Code:

<pre>
{% if first_receipt_display %}

<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({
'order_id' : '{{ order_id }}',
'order_value' : '{{ total_order }}',
'event' : 'order-submitted'
});
</script>

{% endif %}
</pre>

<pre>
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({
'order_id' : '<?php echo $transaction_id; ?>',
'order_value' : '<?php echo $order_total; ?>',
'event' : 'order-submitted'
});
</script>
</pre>

== 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.<br />
The order ID & order value cannot be tracked without modification of the plugin.

Below is code to track the booking completion.<br />
Insert the code as a custom HTML tag in the tag manager:

<pre>
<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>
</pre>

Tag Manager Installation (Wordpress)

2025-06-30T11:15:42Z

Aaron.trevellick: /* Tracking Other Wordpress Contact Plugins */

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:

<pre>
<script>
jQuery( function() {
jQuery( document ).on( 'cf.form.submit', function (event, data ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
});
});
</script>
</pre>

*note, the JS bind will not fire if the form is not set to AJAX submission.

== Contact Form 7 ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

Note: CF7 developers love changing their hook names, if this doesn't work try the below instead:<br />
<pre>
jQuery('.wpcf7').on('wpcf7:mailsent', function(e) {
</pre>

== Conversion Plus ==

For the popup form, create tag as Custom HTML and use the ajaxSuccess hook below:

<pre>
<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>
</pre>

== 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.

<pre>
<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>
</pre>
<br />
It is also possible to use the field names that are being submitted:

<pre>
<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>
</pre>

== Elementor Form Builder ==

Create tag as Custom HTML:

<pre>
<script>
jQuery( document ).ready(function( $ ){
$( document ).on('submit_success', function( event, response ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
});
});
</script>
</pre>

== 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
<pre>
<script>var dataLayer = window.dataLayer || []; dataLayer.push({'event' : 'contact-form-submitted'});</script>
</pre>

== Gravity Form ==

Create tag as custom HTML:

<pre>
<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>
</pre>

For this to work, AJAX is required to be enabled on the form.
This can be enabled in the short-code[https://codex.wordpress.org/Shortcode_API] when the form is called on the wordpress page:
<pre>
[gravityform id="1" ajax="true"]
</pre>

*note, the JS bind will not fire if the form is set to redirect after success.

== Ninja Forms ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

== Pojo Forms ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

== Siteorigin form ==
this strips out script tags so will need to add custom JS:

<pre>
function () {
var success = document.getElementsByClassName("sow-contact-form-success");
return (typeof success[0] != "undefined");
}
</pre>

== Subsystic Popup ==

For the popup form, create tag as Custom HTML and use the ajaxSuccess hook below:

<pre>
<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>
</pre>

== WP Forms ==
Using a slightly altered version of the JQuery form listener should work for this:

<pre>
<script>
jQuery(document).ready(function() {
jQuery( document ).on('wpformsAjaxSubmitSuccess', (function( event, json ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'form-submitted'});
}));
});
</script>
</pre>

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:
<pre>
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
</script>
</pre>

<b>Or if using GTM4WP</b><br />
Add a datalayer variable in GTM with:<br />
eventModel.form_id for Form ID<br />

Setup a custom event Trigger:
<pre>
Event: form_submit
Some Custom Events:
Form ID contains wpforms-form-
</pre>

== WS Forms ==

https://wsform.com/knowledgebase/conversion-tracking/<br /><br />

Go into admin, click to edit the required form.<br />
In the form edit view, click the lightning icon (actions).<br />
Add a new action for conversion tracking.<br />
Select Google Tag Manager (DataLayer)<br />
Enter "event" in the "Key" field.<br />
Enter "ws-form-submitted" in the "Value" field.<br /><br />
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:

<pre>
function () {
var success = document.getElementsByClassName("mc4wp-success");
return (typeof success[0] != "undefined");
}
</pre>

if not, custom HTML will need to be added as a listener:

<pre>
jQuery(document).ready(function() {
mc4wp.forms.on('submitted', function() {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'newsletter-form-submitted'});
});
});
</pre>

== Pop-up Builder - Mailchimp ==

Add Custom HTML:

<pre>
<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>
</pre>

== Avia Form Builder ==
Add Custom HTML:

<pre>
<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>
</pre>

Note: (Still not 100% on this)

= Tracking Other Wordpress Ecommerce Plugins =

== WooCommerce ==

See Article: [[WooCommerce]]

== Foxy Shop ==

<pre>
https://wiki.foxycart.com/v/2.0/receipt#using_custom_tracking_code
</pre>

copy template from:
<pre>
/wp-content/plugins/foxyshop/themefiles/foxyshop-receipt.php
</pre>

to theme / child theme root

Code:

<pre>
{% if first_receipt_display %}

<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({
'order_id' : '{{ order_id }}',
'order_value' : '{{ total_order }}',
'event' : 'order-submitted'
});
</script>

{% endif %}
</pre>

<pre>
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({
'order_id' : '<?php echo $transaction_id; ?>',
'order_value' : '<?php echo $order_total; ?>',
'event' : 'order-submitted'
});
</script>
</pre>

== 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.<br />
The order ID & order value cannot be tracked without modification of the plugin.

Below is code to track the booking completion.<br />
Insert the code as a custom HTML tag in the tag manager:

<pre>
<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>
</pre>

Tag Manager Installation (Wordpress)

2025-06-30T11:14:25Z

Aaron.trevellick: /* Conversion Plus */

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:

<pre>
<script>
jQuery( function() {
jQuery( document ).on( 'cf.form.submit', function (event, data ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
});
});
</script>
</pre>

*note, the JS bind will not fire if the form is not set to AJAX submission.

== Contact Form 7 ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

Note: CF7 developers love changing their hook names, if this doesn't work try the below instead:<br />
<pre>
jQuery('.wpcf7').on('wpcf7:mailsent', function(e) {
</pre>

== Conversion Plus ==

For the popup form, create tag as Custom HTML and use the ajaxSuccess hook below:

<pre>
<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>
</pre>

== 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.

<pre>
<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>
</pre>
<br />
It is also possible to use the field names that are being submitted:

<pre>
<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>
</pre>

== Elementor Form Builder ==

Create tag as Custom HTML:

<pre>
<script>
jQuery( document ).ready(function( $ ){
$( document ).on('submit_success', function( event, response ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
});
});
</script>
</pre>

== 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
<pre>
<script>var dataLayer = window.dataLayer || []; dataLayer.push({'event' : 'contact-form-submitted'});</script>
</pre>

== Gravity Form ==

Create tag as custom HTML:

<pre>
<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>
</pre>

For this to work, AJAX is required to be enabled on the form.
This can be enabled in the short-code[https://codex.wordpress.org/Shortcode_API] when the form is called on the wordpress page:
<pre>
[gravityform id="1" ajax="true"]
</pre>

*note, the JS bind will not fire if the form is set to redirect after success.

== Ninja Forms ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

== Pojo Forms ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

== Siteorigin form ==
this strips out script tags so will need to add custom JS:

<pre>
function () {
var success = document.getElementsByClassName("sow-contact-form-success");
return (typeof success[0] != "undefined");
}
</pre>

== WP Forms ==
Using a slightly altered version of the JQuery form listener should work for this:

<pre>
<script>
jQuery(document).ready(function() {
jQuery( document ).on('wpformsAjaxSubmitSuccess', (function( event, json ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'form-submitted'});
}));
});
</script>
</pre>

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:
<pre>
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
</script>
</pre>

<b>Or if using GTM4WP</b><br />
Add a datalayer variable in GTM with:<br />
eventModel.form_id for Form ID<br />

Setup a custom event Trigger:
<pre>
Event: form_submit
Some Custom Events:
Form ID contains wpforms-form-
</pre>

== WS Forms ==

https://wsform.com/knowledgebase/conversion-tracking/<br /><br />

Go into admin, click to edit the required form.<br />
In the form edit view, click the lightning icon (actions).<br />
Add a new action for conversion tracking.<br />
Select Google Tag Manager (DataLayer)<br />
Enter "event" in the "Key" field.<br />
Enter "ws-form-submitted" in the "Value" field.<br /><br />
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:

<pre>
function () {
var success = document.getElementsByClassName("mc4wp-success");
return (typeof success[0] != "undefined");
}
</pre>

if not, custom HTML will need to be added as a listener:

<pre>
jQuery(document).ready(function() {
mc4wp.forms.on('submitted', function() {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'newsletter-form-submitted'});
});
});
</pre>

== Pop-up Builder - Mailchimp ==

Add Custom HTML:

<pre>
<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>
</pre>

== Avia Form Builder ==
Add Custom HTML:

<pre>
<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>
</pre>

Note: (Still not 100% on this)

= Tracking Other Wordpress Ecommerce Plugins =

== WooCommerce ==

See Article: [[WooCommerce]]

== Foxy Shop ==

<pre>
https://wiki.foxycart.com/v/2.0/receipt#using_custom_tracking_code
</pre>

copy template from:
<pre>
/wp-content/plugins/foxyshop/themefiles/foxyshop-receipt.php
</pre>

to theme / child theme root

Code:

<pre>
{% if first_receipt_display %}

<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({
'order_id' : '{{ order_id }}',
'order_value' : '{{ total_order }}',
'event' : 'order-submitted'
});
</script>

{% endif %}
</pre>

<pre>
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({
'order_id' : '<?php echo $transaction_id; ?>',
'order_value' : '<?php echo $order_total; ?>',
'event' : 'order-submitted'
});
</script>
</pre>

== 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.<br />
The order ID & order value cannot be tracked without modification of the plugin.

Below is code to track the booking completion.<br />
Insert the code as a custom HTML tag in the tag manager:

<pre>
<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>
</pre>

Tag Manager Installation (Wordpress)

2025-06-30T10:23:37Z

Aaron.trevellick: /* Formidable */

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:

<pre>
<script>
jQuery( function() {
jQuery( document ).on( 'cf.form.submit', function (event, data ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
});
});
</script>
</pre>

*note, the JS bind will not fire if the form is not set to AJAX submission.

== Contact Form 7 ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

Note: CF7 developers love changing their hook names, if this doesn't work try the below instead:<br />
<pre>
jQuery('.wpcf7').on('wpcf7:mailsent', function(e) {
</pre>

== Conversion Plus ==

For the poppup form, create tag as Custom HTML and use the ajaxSuccess hook below:

<pre>
<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>
</pre>

== 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.

<pre>
<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>
</pre>
<br />
It is also possible to use the field names that are being submitted:

<pre>
<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>
</pre>

== Elementor Form Builder ==

Create tag as Custom HTML:

<pre>
<script>
jQuery( document ).ready(function( $ ){
$( document ).on('submit_success', function( event, response ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
});
});
</script>
</pre>

== 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
<pre>
<script>var dataLayer = window.dataLayer || []; dataLayer.push({'event' : 'contact-form-submitted'});</script>
</pre>

== Gravity Form ==

Create tag as custom HTML:

<pre>
<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>
</pre>

For this to work, AJAX is required to be enabled on the form.
This can be enabled in the short-code[https://codex.wordpress.org/Shortcode_API] when the form is called on the wordpress page:
<pre>
[gravityform id="1" ajax="true"]
</pre>

*note, the JS bind will not fire if the form is set to redirect after success.

== Ninja Forms ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

== Pojo Forms ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

== Siteorigin form ==
this strips out script tags so will need to add custom JS:

<pre>
function () {
var success = document.getElementsByClassName("sow-contact-form-success");
return (typeof success[0] != "undefined");
}
</pre>

== WP Forms ==
Using a slightly altered version of the JQuery form listener should work for this:

<pre>
<script>
jQuery(document).ready(function() {
jQuery( document ).on('wpformsAjaxSubmitSuccess', (function( event, json ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'form-submitted'});
}));
});
</script>
</pre>

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:
<pre>
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
</script>
</pre>

<b>Or if using GTM4WP</b><br />
Add a datalayer variable in GTM with:<br />
eventModel.form_id for Form ID<br />

Setup a custom event Trigger:
<pre>
Event: form_submit
Some Custom Events:
Form ID contains wpforms-form-
</pre>

== WS Forms ==

https://wsform.com/knowledgebase/conversion-tracking/<br /><br />

Go into admin, click to edit the required form.<br />
In the form edit view, click the lightning icon (actions).<br />
Add a new action for conversion tracking.<br />
Select Google Tag Manager (DataLayer)<br />
Enter "event" in the "Key" field.<br />
Enter "ws-form-submitted" in the "Value" field.<br /><br />
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:

<pre>
function () {
var success = document.getElementsByClassName("mc4wp-success");
return (typeof success[0] != "undefined");
}
</pre>

if not, custom HTML will need to be added as a listener:

<pre>
jQuery(document).ready(function() {
mc4wp.forms.on('submitted', function() {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'newsletter-form-submitted'});
});
});
</pre>

== Pop-up Builder - Mailchimp ==

Add Custom HTML:

<pre>
<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>
</pre>

== Avia Form Builder ==
Add Custom HTML:

<pre>
<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>
</pre>

Note: (Still not 100% on this)

= Tracking Other Wordpress Ecommerce Plugins =

== WooCommerce ==

See Article: [[WooCommerce]]

== Foxy Shop ==

<pre>
https://wiki.foxycart.com/v/2.0/receipt#using_custom_tracking_code
</pre>

copy template from:
<pre>
/wp-content/plugins/foxyshop/themefiles/foxyshop-receipt.php
</pre>

to theme / child theme root

Code:

<pre>
{% if first_receipt_display %}

<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({
'order_id' : '{{ order_id }}',
'order_value' : '{{ total_order }}',
'event' : 'order-submitted'
});
</script>

{% endif %}
</pre>

<pre>
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({
'order_id' : '<?php echo $transaction_id; ?>',
'order_value' : '<?php echo $order_total; ?>',
'event' : 'order-submitted'
});
</script>
</pre>

== 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.<br />
The order ID & order value cannot be tracked without modification of the plugin.

Below is code to track the booking completion.<br />
Insert the code as a custom HTML tag in the tag manager:

<pre>
<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>
</pre>

Google Tag Manager for WordPress (Plugin)

2025-06-30T10:13:40Z

Aaron.trevellick: /* New Tracking */

Google Tag Manager for WordPress is a plugin that allows easy installation and tracking for the GTM.

https://wordpress.org/plugins/duracelltomi-google-tag-manager/

== Events ==

=== New Tracking ===
event:<br />
<pre>purchase</pre>

Variables:<br />
<pre>ecommerce.value
ecommerce.transaction_id</pre>

Due to the event being very generic, it is advised to put a trigger rule for ecommerce.transaction_id > 0

=== Classic tracking ===
event:<br />
gtm4wp.orderCompleted

transactionProducts.sku

Example Data From GTM4WP Plugin:
<pre>
dataLayer = [{
"event":"transaction",
"transactionId":"100002486",
"transactionDate":"2015-09-03",
"transactionTotal":295,
"transactionShipping":0,
"transactionTax":26.82,
"transactionPaymentType":"Rechnung",
"transactionCurrency":"EUR",
"transactionShippingMethod":"tablerate",
"transactionProducts":[
{
"name":"Handelsvertretergesetz",
"sku":"9783700760344",
"category":"Buch",
"price":113.64,
"quantity":1
},
{
"name":"Steuerrecht",
"sku":"9783700759294",
"category":"Kodex",
"price":77.27,
"quantity":2
}
]
}];
</pre>

=== CF7 tracking ===
event:<br />
gtm4wp.contactForm7Submitted

=== Analytics 4: Ecommerce Tracking ===
If Enhanced Ecommerce is enabled, then you can use the below Tag Manager template to setup Analytics 4 Ecommerce tracking for you.<br />
Just make sure to test it in case it becomes outdated!<br />

[[File:Gtm4wp-ga4-container-elements.json]]

Source: https://gtm4wp.com/how-to-articles/how-to-setup-enhanced-ecommerce-tracking-google-analytics-4-ga4-version<br />

You will need to set the configuration tag to the Analytics account you want the information to be sent to, other than that it should all be done for you.

Google Tag Manager for WordPress (Plugin)

2025-06-30T10:12:33Z

Aaron.trevellick: /* Events */

Google Tag Manager for WordPress is a plugin that allows easy installation and tracking for the GTM.

https://wordpress.org/plugins/duracelltomi-google-tag-manager/

== Events ==

=== New Tracking ===
event:<br />
purchase

Variables:<br />
ecommerce.value<br />
ecommerce.transaction_id

Due to the event being very generic, it is advised to put a trigger rule for ecommerce.transaction_id > 0

=== Classic tracking ===
event:<br />
gtm4wp.orderCompleted

transactionProducts.sku

Example Data From GTM4WP Plugin:
<pre>
dataLayer = [{
"event":"transaction",
"transactionId":"100002486",
"transactionDate":"2015-09-03",
"transactionTotal":295,
"transactionShipping":0,
"transactionTax":26.82,
"transactionPaymentType":"Rechnung",
"transactionCurrency":"EUR",
"transactionShippingMethod":"tablerate",
"transactionProducts":[
{
"name":"Handelsvertretergesetz",
"sku":"9783700760344",
"category":"Buch",
"price":113.64,
"quantity":1
},
{
"name":"Steuerrecht",
"sku":"9783700759294",
"category":"Kodex",
"price":77.27,
"quantity":2
}
]
}];
</pre>

=== CF7 tracking ===
event:<br />
gtm4wp.contactForm7Submitted

=== Analytics 4: Ecommerce Tracking ===
If Enhanced Ecommerce is enabled, then you can use the below Tag Manager template to setup Analytics 4 Ecommerce tracking for you.<br />
Just make sure to test it in case it becomes outdated!<br />

[[File:Gtm4wp-ga4-container-elements.json]]

Source: https://gtm4wp.com/how-to-articles/how-to-setup-enhanced-ecommerce-tracking-google-analytics-4-ga4-version<br />

You will need to set the configuration tag to the Analytics account you want the information to be sent to, other than that it should all be done for you.

Arlo

2025-04-03T10:16:06Z

Aaron.trevellick: Created page with "== Tracking In Tag Manager == Tracking:<br /> https://support.arlo.co/hc/en-gb/articles/360040819751-Google-Tag-Manager<br /><br /> Sales event 'purchase'"

== Tracking In Tag Manager ==

Tracking:<br />
https://support.arlo.co/hc/en-gb/articles/360040819751-Google-Tag-Manager<br /><br />

Sales event 'purchase'

Google Tag Manager

2025-04-03T10:13:14Z

Aaron.trevellick: /* Systems */

= GTM =
<pre>
https://tagmanager.google.com/
</pre>
Google Tag Manager is a site container used for storing and triggering scripts.<br />
These then can be used for tracking.<br />

= Systems =

Below are links to pages for different systems.
These pages will include the methods used for installing the Tag Manager and the Conversion Value tracking.<br />

{| class="wikitable sortable" style="width:100%"
|-
! Self-Host System !! On-site Builder Systems !! Chat Systems !! Other
|-
| [[CS-Cart]] || [[Bigcommerce]] || [[CollectChat]] || [[Arlo]]
|-
| [[Joomla]] || [[Ecwid]] || [[HubSpot Chat]] || [[Calendly]]
|-
| [[Magento 1.x]] || [[EKMPowershop]] || [[Jivo]] ||
|-
| [[Magento 2.x]] || [[MyshopBlocks]] || [[LiveChat]] ||
|-
| [[OpenCart]] || [[Roman Cart]] || [[PureChat]] ||
|-
| [[Prestashop]] || [[Shopify]] || [[Tawk]] ||
|-
| [[Tag Manager Installation (Wordpress)|Wordpress]] || [[Squarespace]] || [[Tidio]] ||
|-
| [[X-Cart]] || [[Trill]] || [[ZenDesk]] ||
|-
| [[Zen Cart]] || [[Wix]] || [[Zoho]] ||
|-
||| [[Yell]] || ||
|}

= Useful Info =

== Generic jQuery Form Listener ==

If there is no instructions in the wiki for a particular system and/or plugin and the form uses Ajax to submit,
It may be worth trying this generic form listener.<br />

depending on what the jQuery is called when initialized you may need to change "jQuery" to "$" in the code below.<br />

create a custom HTML tag and change the index URL to what the URL is submitting to in the Ajax form.<br />

<pre>
<script>
jQuery(document).ready(function() {
jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {
if (~settings.url.indexOf("/contact/form/process/")) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
}
});
});
</script>
</pre>
<br />
note: the form must be using the actual jQuery's Ajax method to perform the request for this to work

== Unique Page Views ==

You can track unique page views by storing a value in the sessionStorage variable.
This can be useful for tracking forms where only a thank you page is available track.

Create a tag that only fires on the page you want to track
<pre>
<script>
var gtm_fs_count = 1;
var page_path = "{{Page Path}}".replace(/\//g, 'F_SLASH');
if (sessionStorage[page_path]) {

gtm_fs_count = gtm_fs_count+1;
sessionStorage.setItem(page_path, gtm_fs_count);

} else if(!sessionStorage[page_path]) {

sessionStorage.setItem(page_path, gtm_fs_count) ;

}
</script>
</pre>

Create a custom JS variable to retrieve the value:
<pre>
function() {
var page_path = "{{Page Path}}".replace(/\//g,"F_SLASH");
return parseInt(window.sessionStorage[page_path]);
}
</pre>

Then update the trigger to the variable is less than 2 as well as its existing conditions

== Cookie Consent Banner & Consent Mode V2 ==

For clients that don't have this setup & functioning already, its possible to setup a consent mode friendly cookie banner using the below JS:
Within the .zip, the file is /build/cookieconsent.js
[[Media:Cookieconsent-master.zip|Cookieconsent-master.zip]]

This file will need to be hosted somewhere that is accessible for the client site.
Once this has been done the below script will need to be added to the site, before GTM is loaded.
Make sure to swap cookieconsent.js with the location of the js file.

<pre>
<script src="cookieconsent.js"></script>
<script>
// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
window.CookieConsent.init({
categories: {
// Unique name.
necessary: {
needed: true,
wanted: true,
checked: true,
// Language settings for categories.
language: {
locale: {
en: {
name: 'Strictly Necessary Cookies',
description: 'Cookies Required for the site to function as intended.',
},
}
}
},
analytics: {
needed: false,
wanted: false,
checked: false,
language: {
locale: {
en: {
name: 'Analytics',
description: 'Cookies used by Google & other 3rd party analytics services.',
},
}
}
}
},
consentModeControls: {
ad_storage: 'analytics',
ad_user_data: 'analytics',
ad_personalization: 'analytics',
analytics_storage: 'analytics'
},
});
</script>
<script>
if (localStorage.getItem('consentMode') === null) {
gtag('consent', 'default', {
'ad_storage': 'denied',
'ad_user_data': 'denied',
'ad_personalization': 'denied',
'analytics_storage': 'denied'
});
} else {
gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')));
}
</script>
</pre>

Optional, but to make it look slightly better you could reduce the opacity:
<pre>
<style>
#cconsent-bar {
opacity: 0.9;
}
</style>
</pre>

Tag Manager Installation (Wordpress)

2025-04-01T15:57:45Z

Aaron.trevellick:

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:

<pre>
<script>
jQuery( function() {
jQuery( document ).on( 'cf.form.submit', function (event, data ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
});
});
</script>
</pre>

*note, the JS bind will not fire if the form is not set to AJAX submission.

== Contact Form 7 ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

Note: CF7 developers love changing their hook names, if this doesn't work try the below instead:<br />
<pre>
jQuery('.wpcf7').on('wpcf7:mailsent', function(e) {
</pre>

== Conversion Plus ==

For the poppup form, create tag as Custom HTML and use the ajaxSuccess hook below:

<pre>
<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>
</pre>

== 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.

<pre>
<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>
</pre>
<br />
It is also possible to use the field names that are being submitted:

<pre>
<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>
</pre>

== Elementor Form Builder ==

Create tag as Custom HTML:

<pre>
<script>
jQuery( document ).ready(function( $ ){
$( document ).on('submit_success', function( event, response ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
});
});
</script>
</pre>

== 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.

== Gravity Form ==

Create tag as custom HTML:

<pre>
<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>
</pre>

For this to work, AJAX is required to be enabled on the form.
This can be enabled in the short-code[https://codex.wordpress.org/Shortcode_API] when the form is called on the wordpress page:
<pre>
[gravityform id="1" ajax="true"]
</pre>

*note, the JS bind will not fire if the form is set to redirect after success.

== Ninja Forms ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

== Pojo Forms ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

== Siteorigin form ==
this strips out script tags so will need to add custom JS:

<pre>
function () {
var success = document.getElementsByClassName("sow-contact-form-success");
return (typeof success[0] != "undefined");
}
</pre>

== WP Forms ==
Using a slightly altered version of the JQuery form listener should work for this:

<pre>
<script>
jQuery(document).ready(function() {
jQuery( document ).on('wpformsAjaxSubmitSuccess', (function( event, json ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'form-submitted'});
}));
});
</script>
</pre>

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:
<pre>
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
</script>
</pre>

<b>Or if using GTM4WP</b><br />
Add a datalayer variable in GTM with:<br />
eventModel.form_id for Form ID<br />

Setup a custom event Trigger:
<pre>
Event: form_submit
Some Custom Events:
Form ID contains wpforms-form-
</pre>

== WS Forms ==

https://wsform.com/knowledgebase/conversion-tracking/<br /><br />

Go into admin, click to edit the required form.<br />
In the form edit view, click the lightning icon (actions).<br />
Add a new action for conversion tracking.<br />
Select Google Tag Manager (DataLayer)<br />
Enter "event" in the "Key" field.<br />
Enter "ws-form-submitted" in the "Value" field.<br /><br />
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:

<pre>
function () {
var success = document.getElementsByClassName("mc4wp-success");
return (typeof success[0] != "undefined");
}
</pre>

if not, custom HTML will need to be added as a listener:

<pre>
jQuery(document).ready(function() {
mc4wp.forms.on('submitted', function() {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'newsletter-form-submitted'});
});
});
</pre>

== Pop-up Builder - Mailchimp ==

Add Custom HTML:

<pre>
<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>
</pre>

== Avia Form Builder ==
Add Custom HTML:

<pre>
<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>
</pre>

Note: (Still not 100% on this)

= Tracking Other Wordpress Ecommerce Plugins =

== WooCommerce ==

See Article: [[WooCommerce]]

== Foxy Shop ==

<pre>
https://wiki.foxycart.com/v/2.0/receipt#using_custom_tracking_code
</pre>

copy template from:
<pre>
/wp-content/plugins/foxyshop/themefiles/foxyshop-receipt.php
</pre>

to theme / child theme root

Code:

<pre>
{% if first_receipt_display %}

<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({
'order_id' : '{{ order_id }}',
'order_value' : '{{ total_order }}',
'event' : 'order-submitted'
});
</script>

{% endif %}
</pre>

<pre>
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({
'order_id' : '<?php echo $transaction_id; ?>',
'order_value' : '<?php echo $order_total; ?>',
'event' : 'order-submitted'
});
</script>
</pre>

== 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.<br />
The order ID & order value cannot be tracked without modification of the plugin.

Below is code to track the booking completion.<br />
Insert the code as a custom HTML tag in the tag manager:

<pre>
<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>
</pre>

Tag Manager Installation (Wordpress)

2025-04-01T15:16:13Z

Aaron.trevellick: /* Tracking Other Wordpress Contact Plugins */

To install on google tag manager it is advised to use the Duracell Tomi Plugin:
[[Google Tag Manager for WordPress (Plugin)]]

= Tracking Other Wordpress Contact Plugins =

== Caldera Forms ==

Create tag as Custom HTML:

<pre>
<script>
jQuery( function() {
jQuery( document ).on( 'cf.form.submit', function (event, data ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
});
});
</script>
</pre>

*note, the JS bind will not fire if the form is not set to AJAX submission.

== Contact Form 7 ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

Note: CF7 developers love changing their hook names, if this doesn't work try the below instead:<br />
<pre>
jQuery('.wpcf7').on('wpcf7:mailsent', function(e) {
</pre>

== Conversion Plus ==

For the poppup form, create tag as Custom HTML and use the ajaxSuccess hook below:

<pre>
<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>
</pre>

== 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.

<pre>
<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>
</pre>
<br />
It is also possible to use the field names that are being submitted:

<pre>
<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>
</pre>

== Elementor Form Builder ==

Create tag as Custom HTML:

<pre>
<script>
jQuery( document ).ready(function( $ ){
$( document ).on('submit_success', function( event, response ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
});
});
</script>
</pre>

== 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.

== Gravity Form ==

Create tag as custom HTML:

<pre>
<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>
</pre>

For this to work, AJAX is required to be enabled on the form.
This can be enabled in the short-code[https://codex.wordpress.org/Shortcode_API] when the form is called on the wordpress page:
<pre>
[gravityform id="1" ajax="true"]
</pre>

*note, the JS bind will not fire if the form is set to redirect after success.

== Ninja Forms ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

== Pojo Forms ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

== Siteorigin form ==
this strips out script tags so will need to add custom JS:

<pre>
function () {
var success = document.getElementsByClassName("sow-contact-form-success");
return (typeof success[0] != "undefined");
}
</pre>

== WP Forms ==
Using a slightly altered version of the JQuery form listener should work for this:

<pre>
<script>
jQuery(document).ready(function() {
jQuery( document ).on('wpformsAjaxSubmitSuccess', (function( event, json ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'form-submitted'});
}));
});
</script>
</pre>

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:
<pre>
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
</script>
</pre>

<b>Or if using GTM4WP</b><br />
Add a datalayer variable in GTM with:<br />
eventModel.form_id for Form ID<br />

Setup a custom event Trigger:
<pre>
Event: form_submit
Some Custom Events:
Form ID contains wpforms-form-
</pre>

== WS Forms ==

https://wsform.com/knowledgebase/conversion-tracking/<br /><br />

Go into admin, click to edit the required form.<br />
In the form edit view, click the lightning icon (actions).<br />
Add a new action for conversion tracking.<br />
Select Google Tag Manager (DataLayer)<br />
Enter "event" in the "Key" field.<br />
Enter "ws-form-submitted" in the "Value" field.<br /><br />
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:

<pre>
function () {
var success = document.getElementsByClassName("mc4wp-success");
return (typeof success[0] != "undefined");
}
</pre>

if not, custom HTML will need to be added as a listener:

<pre>
jQuery(document).ready(function() {
mc4wp.forms.on('submitted', function() {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'newsletter-form-submitted'});
});
});
</pre>

== Pop-up Builder - Mailchimp ==

Add Custom HTML:

<pre>
<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>
</pre>

== Avia Form Builder ==
Add Custom HTML:

<pre>
<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>
</pre>

Note: (Still not 100% on this)

= Tracking Other Wordpress Ecommerce Plugins =

== WooCommerce ==

See Article: [[WooCommerce]]

== Foxy Shop ==

<pre>
https://wiki.foxycart.com/v/2.0/receipt#using_custom_tracking_code
</pre>

copy template from:
<pre>
/wp-content/plugins/foxyshop/themefiles/foxyshop-receipt.php
</pre>

to theme / child theme root

Code:

<pre>
{% if first_receipt_display %}

<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({
'order_id' : '{{ order_id }}',
'order_value' : '{{ total_order }}',
'event' : 'order-submitted'
});
</script>

{% endif %}
</pre>

<pre>
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({
'order_id' : '<?php echo $transaction_id; ?>',
'order_value' : '<?php echo $order_total; ?>',
'event' : 'order-submitted'
});
</script>
</pre>

== 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.<br />
The order ID & order value cannot be tracked without modification of the plugin.

Below is code to track the booking completion.<br />
Insert the code as a custom HTML tag in the tag manager:

<pre>
<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>
</pre>

Shopify

2025-03-26T14:31:49Z

Aaron.trevellick: /* File Location */

= Shopify Pixel =

The old method is due to be deprecated in Dec-24, so this will only be available until then. </br>
New Shopify sites also appear to have checkout scripts disabled by default. </br>
The new method for adding tracking to Shopify sites is through a Custom Pixel. </br>

Based on Shopifys documentation:</br>
[https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial Creating a GTM pixel]</br>
[https://shopify.dev/docs/api/web-pixels-api/pixel-privacy Pixel privacy documentation]</br>

The <noscript> section needs to be added to the <body> through theme.liquid via Online Store > Edit.</br></br>

- Go to Settings > Customer Events > Add Custom Pixel.
- Set the Customer Privacy settings to Not required.
- Set Data Sale to Data collected does not qualify as data sale.
- Add the below code.

<pre>
// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

//Initialize GTM tag
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXX');

let customerPrivacyStatus = init.customerPrivacy;
let ad_permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );
let analytics_permission = ( customerPrivacyStatus.analyticsProcessingAllowed ? 'granted' : 'denied' );

//Google Consent Mode v2
gtag('consent', 'default', {
'ad_storage': ad_permission,
'analytics_storage': analytics_permission,
'ad_user_data': ad_permission,
'ad_personalization': ad_permission,
});

// Use the customerPrivacy Standard API to subscribe to consent collected events and update the status
api.customerPrivacy.subscribe('visitorConsentCollected', (event) => {
window.dataLayer = window.dataLayer || [];
let customerPrivacyStatus = event.customerPrivacy;
let ad_permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );
let analytics_permission = ( customerPrivacyStatus.analyticsProcessingAllowed ? 'granted' : 'denied' );

gtag('consent', 'update', {
'ad_storage': ad_permission,
'analytics_storage': analytics_permission ,
'ad_user_data': ad_permission,
'ad_personalization': ad_permission,
});
});

//subscribe to events
analytics.subscribe("checkout_completed", (event) => {
window.dataLayer.push({
event: "checkout_completed",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});

</pre>

Other Ecommerce events that could be useful:

<pre>

analytics.subscribe("payment_info_submitted", (event) => {
window.dataLayer.push({
event: "payment_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});

analytics.subscribe("checkout_shipping_info_submitted", (event) => {
window.dataLayer.push({
event: "checkout_shipping_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});

analytics.subscribe("checkout_address_info_submitted", (event) => {
window.dataLayer.push({
event: "checkout_address_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});

analytics.subscribe("checkout_contact_info_submitted", (event) => {
window.dataLayer.push({
event: "checkout_contact_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});

analytics.subscribe("checkout_started", (event) => {
window.dataLayer.push({
event: "checkout_started",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});

analytics.subscribe("product_added_to_cart", (event) => {
window.dataLayer.push({
event: "product_added_to_cart",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
price: event.data?.cartLine?.merchandise?.price?.amount,
currency: event.data?.cartLine?.cost?.totalAmount?.currencyCode,
product_id: event.data?.cartLine?.merchandise?.product?.id + '_' + event.data?.cartLine?.merchandise?.id,
product_title: event.data?.cartLine?.merchandise?.product?.title,
quantity: event.data?.cartLine?.quantity,
total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,
test: event.data,
});
});

analytics.subscribe("cart_viewed", (event) => {
window.dataLayer.push({
event: "cart_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
total_cost: event.data?.cart?.cost?.totalAmount?.amount,
quantity: event.data?.cart?.totalQuantity,
cart_id: event.data?.cart?.id,
});
});

analytics.subscribe("page_viewed", (event) => {
window.dataLayer.push({
event: "page_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
page_title: event.context.document.title,
});
});

analytics.subscribe("product_viewed", (event) => {
window.dataLayer.push({
event: "product_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
product_id: event.data?.productVariant?.product?.id + '_' + event.data?.productVariant?.id,
product_title: event.data?.productVariant?.title,
product_sku: event.data?.productVariant?.sku,
});
});

analytics.subscribe("search_submitted", (event) => {
window.dataLayer.push({
event: "search_submitted",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
query: event.data?.searchResult?.query,
});
});

analytics.subscribe("collection_viewed", (event) => {
window.dataLayer.push({
event: "collection_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
collection_id: event.data?.collection?.id,
collection_title: event.data?.collection?.title,
});
});
</pre>

== File Location ==

The Shopify pixel loads the JS into a JS file which is loaded by the browser.<br />
The location of this can be built by using data from the home web page.<br /><br />

<pre>

https://<<domain>>/wpm@<<wpm_id>>/custom/web-pixel-<<pixel_id>>@<<script_version>>/sandbox/modern/

wpm_id - is the version of the wpm (Web Pixel Manager), this is the same across all sites and will change when the wpm is updated by shopify.
pixel_id - this is found via the JSON below that is on the site
script_version - this is found via the JSON below that is on the site

{"id":"<<pixel_id >>","eventPayloadVersion":"1","runtimeContext":"LAX","scriptVersion":"<<script_version>>","type":"CUSTOM","privacyPurposes":[],"name":"GTM + Value Tracking"}

</pre>

= Tag Manager =

Add Tag Manager to theme:
Modify Theme
<pre>
"online store" -> "..." or "Actions" -> "edit HTML / CSS"
</pre>

Modify theme.liquid

Google Tag Manager will also need to be added to Checkout's additional settings to track conversions

== Conversion Tracking Code ==

Google Tag Manager will also need to be added to Checkout's additional settings to track conversions

In "settings" -> "checkout" -> "additional settings"

<pre>
{% if first_time_accessed %}
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({'order_id' : '{{ order_number }}', 'order_value' : '{{ total_price | money_without_currency }}', 'event' : 'order-submitted'});
</script>
{% endif %}
</pre>

*Note: if testing without "{% if first_time_accessed %}" on a order that has already converted, the order ID will not show

to add product ids add within the code above:

<pre>
dataLayer.push({ 'product_ids' : [{% for line_item in line_items %}{{ line_item.product_id }}{% unless forloop.last == true %}, {% endunless %}{% endfor %}] });
</pre>

*Note: This was made for dynamic re-marketing, for analytics 4 go to the section below

=== Tracking Contact Page ===

In the snippets section, go to "form-status.liquid" or "contact.liquid".

Find the snippet that shows the success text ( in-between {%- if form.posted_successfully? -%}{%- endif -%} ),
Then add:

<pre>
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
</script>
</pre>

= Product Feed =

The below App is free to use & should do most of the setup for you:<br />
https://apps.shopify.com/google<br />

After installing the App a Google account with access to the Merchant Centre needs to sign in.<br />
DO NOT sign in using one of our Master email addresses, instead you can either:<br />
- Ask the client to do this, if they don't have access to Merchant Center we can try to add them.
- Create a new email address that only has access to this Merchant Center & sign in with this instead.

Then the below needs to be done, in this order otherwise it won't send the products through & you'll have to start from scratch:<br />
- Make sure the Store requirements are met & confirm these, if they aren't then send this back to the client so they can add whats necessary.
- Under Product Feed, start the setup process.
- Connect the Merchant Centre on the settings tab.
- Specify the Target Market & set the Shipping settings to Manual (These will need to be added to Merchant Center by someone afterwards).
If this has been done correctly then the products should now be available within the Merchant Center account.<br /><br />

Below is for Reference, Do not use!<br />
Alternatively, Shopify does provide you with the Product feed URL for your store.<br />
To access this, you will need to append .atom to either all of your collections or to a specific collection URL.<br />
<br />
For example:
<br />
<pre>
"yourstorename.com/collections/all.atom"
"yourstorename.com/collections/collectionname.atom"
</pre>

= Events for Analytics 4 =

View Item: <br />
Add this to product-template.liquid

<pre>

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
event: "view_item",
ecommerce: {
currency: "GBP",
items: [
{
item_id: {{ product.id }},
item_name: "{{ product.title }}",
{% if product.vendor %} item_brand: "{{ product.vendor }}", {% endif %}
price: {{ product.price | money_without_currency }},
{% if product.type %} item_category: "{{ product.type }}", {% endif %}
google_business_vertical: "retail",
id: "{{ product.id }}"
}
]
},
});
</script>

</pre>

Add To Cart:<br />
The below listener can be added to GTM, this should send add_to_cart events to GTM for you.

<pre>
<script>
jQuery(document).ready(function() {
jQuery( document ).ajaxSuccess(function( event, xhr, settings, data ) {
if (~settings.url.indexOf("/cart/add")) {

var items = [];
items.push({
item_id: data.product_id,
item_name: data.title,
item_category: data.product_type,
price: ( data.price / 100 ),
google_business_vertical: "retail",
id: data.product_id
});

if (typeof data.brand != "undefined") items[0]['item_brand'] = data.brand;

var dataLayer = window.dataLayer || [];
dataLayer.push({
event: 'add_to_cart',
ecommerce: {
currency: "GBP",
items: items
}
});
}
});
});
</script>
</pre>

Purchases:<br />
Add this to the Settings > Checkout > Additional Scripts section.

<pre>
{% if first_time_accessed %}
<script>
var items = [];
var temp = {};

{% for line_item in line_items %}
temp = {
item_id: {{ line_item.product.id }},
item_name: "{{ line_item.title }}",
price: {{ line_item.final_line_price | money_without_currency }},
google_business_vertical: "retail",
id: {{ line_item.product.id }},
quantity: {{ line_item.quantity }}

};

{% if line_item.product.type %}
temp['item_category'] = "{{ line_item.product.type }}";
{% endif %}

{% if line_item.product.vendor %}
temp['item_brand'] = "{{ line_item.product.vendor }}";
{% endif %}

items.push(temp);

{% endfor %}

var dataLayer = window.dataLayer || [];
dataLayer.push({
event: 'purchase',
ecommerce: {
affiliation: 'Online Store',
transaction_id: '{{ order_number }}',
value: '{{ total_price | money_without_currency }}',
tax: '{{ tax_price | money_without_currency }}',
shipping: '{{ shipping_price | money_without_currency}}',
currency: "GBP",
items: items
}
});

</script>
{% endif %}
</pre>

The Event Tag & Variables can be setup with the below template:<br />
[[File:Shopify-ga4-container-elements.json]]

= Shopify Links =
Cheat sheet for Variables: <br />
https://www.shopify.co.uk/partners/shopify-cheat-sheet

Shopify

2025-03-26T14:31:36Z

Aaron.trevellick: /* File Location */

= Shopify Pixel =

The old method is due to be deprecated in Dec-24, so this will only be available until then. </br>
New Shopify sites also appear to have checkout scripts disabled by default. </br>
The new method for adding tracking to Shopify sites is through a Custom Pixel. </br>

Based on Shopifys documentation:</br>
[https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial Creating a GTM pixel]</br>
[https://shopify.dev/docs/api/web-pixels-api/pixel-privacy Pixel privacy documentation]</br>

The <noscript> section needs to be added to the <body> through theme.liquid via Online Store > Edit.</br></br>

- Go to Settings > Customer Events > Add Custom Pixel.
- Set the Customer Privacy settings to Not required.
- Set Data Sale to Data collected does not qualify as data sale.
- Add the below code.

<pre>
// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

//Initialize GTM tag
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXX');

let customerPrivacyStatus = init.customerPrivacy;
let ad_permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );
let analytics_permission = ( customerPrivacyStatus.analyticsProcessingAllowed ? 'granted' : 'denied' );

//Google Consent Mode v2
gtag('consent', 'default', {
'ad_storage': ad_permission,
'analytics_storage': analytics_permission,
'ad_user_data': ad_permission,
'ad_personalization': ad_permission,
});

// Use the customerPrivacy Standard API to subscribe to consent collected events and update the status
api.customerPrivacy.subscribe('visitorConsentCollected', (event) => {
window.dataLayer = window.dataLayer || [];
let customerPrivacyStatus = event.customerPrivacy;
let ad_permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );
let analytics_permission = ( customerPrivacyStatus.analyticsProcessingAllowed ? 'granted' : 'denied' );

gtag('consent', 'update', {
'ad_storage': ad_permission,
'analytics_storage': analytics_permission ,
'ad_user_data': ad_permission,
'ad_personalization': ad_permission,
});
});

//subscribe to events
analytics.subscribe("checkout_completed", (event) => {
window.dataLayer.push({
event: "checkout_completed",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});

</pre>

Other Ecommerce events that could be useful:

<pre>

analytics.subscribe("payment_info_submitted", (event) => {
window.dataLayer.push({
event: "payment_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});

analytics.subscribe("checkout_shipping_info_submitted", (event) => {
window.dataLayer.push({
event: "checkout_shipping_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});

analytics.subscribe("checkout_address_info_submitted", (event) => {
window.dataLayer.push({
event: "checkout_address_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});

analytics.subscribe("checkout_contact_info_submitted", (event) => {
window.dataLayer.push({
event: "checkout_contact_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});

analytics.subscribe("checkout_started", (event) => {
window.dataLayer.push({
event: "checkout_started",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});

analytics.subscribe("product_added_to_cart", (event) => {
window.dataLayer.push({
event: "product_added_to_cart",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
price: event.data?.cartLine?.merchandise?.price?.amount,
currency: event.data?.cartLine?.cost?.totalAmount?.currencyCode,
product_id: event.data?.cartLine?.merchandise?.product?.id + '_' + event.data?.cartLine?.merchandise?.id,
product_title: event.data?.cartLine?.merchandise?.product?.title,
quantity: event.data?.cartLine?.quantity,
total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,
test: event.data,
});
});

analytics.subscribe("cart_viewed", (event) => {
window.dataLayer.push({
event: "cart_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
total_cost: event.data?.cart?.cost?.totalAmount?.amount,
quantity: event.data?.cart?.totalQuantity,
cart_id: event.data?.cart?.id,
});
});

analytics.subscribe("page_viewed", (event) => {
window.dataLayer.push({
event: "page_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
page_title: event.context.document.title,
});
});

analytics.subscribe("product_viewed", (event) => {
window.dataLayer.push({
event: "product_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
product_id: event.data?.productVariant?.product?.id + '_' + event.data?.productVariant?.id,
product_title: event.data?.productVariant?.title,
product_sku: event.data?.productVariant?.sku,
});
});

analytics.subscribe("search_submitted", (event) => {
window.dataLayer.push({
event: "search_submitted",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
query: event.data?.searchResult?.query,
});
});

analytics.subscribe("collection_viewed", (event) => {
window.dataLayer.push({
event: "collection_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
collection_id: event.data?.collection?.id,
collection_title: event.data?.collection?.title,
});
});
</pre>

== File Location ==

The Shopify pixel loads the JS into a JS file which is loaded by the browser.<br />
The location of this can be built by using data from the home web page.<br /><br />
https://<<domain>>/wpm@<<wpm_id>>/custom/web-pixel-<<pixel_id>>@<<script_version>>/sandbox/modern/

<pre>

wpm_id - is the version of the wpm (Web Pixel Manager), this is the same across all sites and will change when the wpm is updated by shopify.
pixel_id - this is found via the JSON below that is on the site
script_version - this is found via the JSON below that is on the site

{"id":"<<pixel_id >>","eventPayloadVersion":"1","runtimeContext":"LAX","scriptVersion":"<<script_version>>","type":"CUSTOM","privacyPurposes":[],"name":"GTM + Value Tracking"}

</pre>

= Tag Manager =

Add Tag Manager to theme:
Modify Theme
<pre>
"online store" -> "..." or "Actions" -> "edit HTML / CSS"
</pre>

Modify theme.liquid

Google Tag Manager will also need to be added to Checkout's additional settings to track conversions

== Conversion Tracking Code ==

Google Tag Manager will also need to be added to Checkout's additional settings to track conversions

In "settings" -> "checkout" -> "additional settings"

<pre>
{% if first_time_accessed %}
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({'order_id' : '{{ order_number }}', 'order_value' : '{{ total_price | money_without_currency }}', 'event' : 'order-submitted'});
</script>
{% endif %}
</pre>

*Note: if testing without "{% if first_time_accessed %}" on a order that has already converted, the order ID will not show

to add product ids add within the code above:

<pre>
dataLayer.push({ 'product_ids' : [{% for line_item in line_items %}{{ line_item.product_id }}{% unless forloop.last == true %}, {% endunless %}{% endfor %}] });
</pre>

*Note: This was made for dynamic re-marketing, for analytics 4 go to the section below

=== Tracking Contact Page ===

In the snippets section, go to "form-status.liquid" or "contact.liquid".

Find the snippet that shows the success text ( in-between {%- if form.posted_successfully? -%}{%- endif -%} ),
Then add:

<pre>
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
</script>
</pre>

= Product Feed =

The below App is free to use & should do most of the setup for you:<br />
https://apps.shopify.com/google<br />

After installing the App a Google account with access to the Merchant Centre needs to sign in.<br />
DO NOT sign in using one of our Master email addresses, instead you can either:<br />
- Ask the client to do this, if they don't have access to Merchant Center we can try to add them.
- Create a new email address that only has access to this Merchant Center & sign in with this instead.

Then the below needs to be done, in this order otherwise it won't send the products through & you'll have to start from scratch:<br />
- Make sure the Store requirements are met & confirm these, if they aren't then send this back to the client so they can add whats necessary.
- Under Product Feed, start the setup process.
- Connect the Merchant Centre on the settings tab.
- Specify the Target Market & set the Shipping settings to Manual (These will need to be added to Merchant Center by someone afterwards).
If this has been done correctly then the products should now be available within the Merchant Center account.<br /><br />

Below is for Reference, Do not use!<br />
Alternatively, Shopify does provide you with the Product feed URL for your store.<br />
To access this, you will need to append .atom to either all of your collections or to a specific collection URL.<br />
<br />
For example:
<br />
<pre>
"yourstorename.com/collections/all.atom"
"yourstorename.com/collections/collectionname.atom"
</pre>

= Events for Analytics 4 =

View Item: <br />
Add this to product-template.liquid

<pre>

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
event: "view_item",
ecommerce: {
currency: "GBP",
items: [
{
item_id: {{ product.id }},
item_name: "{{ product.title }}",
{% if product.vendor %} item_brand: "{{ product.vendor }}", {% endif %}
price: {{ product.price | money_without_currency }},
{% if product.type %} item_category: "{{ product.type }}", {% endif %}
google_business_vertical: "retail",
id: "{{ product.id }}"
}
]
},
});
</script>

</pre>

Add To Cart:<br />
The below listener can be added to GTM, this should send add_to_cart events to GTM for you.

<pre>
<script>
jQuery(document).ready(function() {
jQuery( document ).ajaxSuccess(function( event, xhr, settings, data ) {
if (~settings.url.indexOf("/cart/add")) {

var items = [];
items.push({
item_id: data.product_id,
item_name: data.title,
item_category: data.product_type,
price: ( data.price / 100 ),
google_business_vertical: "retail",
id: data.product_id
});

if (typeof data.brand != "undefined") items[0]['item_brand'] = data.brand;

var dataLayer = window.dataLayer || [];
dataLayer.push({
event: 'add_to_cart',
ecommerce: {
currency: "GBP",
items: items
}
});
}
});
});
</script>
</pre>

Purchases:<br />
Add this to the Settings > Checkout > Additional Scripts section.

<pre>
{% if first_time_accessed %}
<script>
var items = [];
var temp = {};

{% for line_item in line_items %}
temp = {
item_id: {{ line_item.product.id }},
item_name: "{{ line_item.title }}",
price: {{ line_item.final_line_price | money_without_currency }},
google_business_vertical: "retail",
id: {{ line_item.product.id }},
quantity: {{ line_item.quantity }}

};

{% if line_item.product.type %}
temp['item_category'] = "{{ line_item.product.type }}";
{% endif %}

{% if line_item.product.vendor %}
temp['item_brand'] = "{{ line_item.product.vendor }}";
{% endif %}

items.push(temp);

{% endfor %}

var dataLayer = window.dataLayer || [];
dataLayer.push({
event: 'purchase',
ecommerce: {
affiliation: 'Online Store',
transaction_id: '{{ order_number }}',
value: '{{ total_price | money_without_currency }}',
tax: '{{ tax_price | money_without_currency }}',
shipping: '{{ shipping_price | money_without_currency}}',
currency: "GBP",
items: items
}
});

</script>
{% endif %}
</pre>

The Event Tag & Variables can be setup with the below template:<br />
[[File:Shopify-ga4-container-elements.json]]

= Shopify Links =
Cheat sheet for Variables: <br />
https://www.shopify.co.uk/partners/shopify-cheat-sheet

Shopify

2025-03-26T14:30:35Z

Aaron.trevellick:

= Shopify Pixel =

The old method is due to be deprecated in Dec-24, so this will only be available until then. </br>
New Shopify sites also appear to have checkout scripts disabled by default. </br>
The new method for adding tracking to Shopify sites is through a Custom Pixel. </br>

Based on Shopifys documentation:</br>
[https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial Creating a GTM pixel]</br>
[https://shopify.dev/docs/api/web-pixels-api/pixel-privacy Pixel privacy documentation]</br>

The <noscript> section needs to be added to the <body> through theme.liquid via Online Store > Edit.</br></br>

- Go to Settings > Customer Events > Add Custom Pixel.
- Set the Customer Privacy settings to Not required.
- Set Data Sale to Data collected does not qualify as data sale.
- Add the below code.

<pre>
// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

//Initialize GTM tag
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXX');

let customerPrivacyStatus = init.customerPrivacy;
let ad_permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );
let analytics_permission = ( customerPrivacyStatus.analyticsProcessingAllowed ? 'granted' : 'denied' );

//Google Consent Mode v2
gtag('consent', 'default', {
'ad_storage': ad_permission,
'analytics_storage': analytics_permission,
'ad_user_data': ad_permission,
'ad_personalization': ad_permission,
});

// Use the customerPrivacy Standard API to subscribe to consent collected events and update the status
api.customerPrivacy.subscribe('visitorConsentCollected', (event) => {
window.dataLayer = window.dataLayer || [];
let customerPrivacyStatus = event.customerPrivacy;
let ad_permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );
let analytics_permission = ( customerPrivacyStatus.analyticsProcessingAllowed ? 'granted' : 'denied' );

gtag('consent', 'update', {
'ad_storage': ad_permission,
'analytics_storage': analytics_permission ,
'ad_user_data': ad_permission,
'ad_personalization': ad_permission,
});
});

//subscribe to events
analytics.subscribe("checkout_completed", (event) => {
window.dataLayer.push({
event: "checkout_completed",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});

</pre>

Other Ecommerce events that could be useful:

<pre>

analytics.subscribe("payment_info_submitted", (event) => {
window.dataLayer.push({
event: "payment_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});

analytics.subscribe("checkout_shipping_info_submitted", (event) => {
window.dataLayer.push({
event: "checkout_shipping_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});

analytics.subscribe("checkout_address_info_submitted", (event) => {
window.dataLayer.push({
event: "checkout_address_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});

analytics.subscribe("checkout_contact_info_submitted", (event) => {
window.dataLayer.push({
event: "checkout_contact_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});

analytics.subscribe("checkout_started", (event) => {
window.dataLayer.push({
event: "checkout_started",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});

analytics.subscribe("product_added_to_cart", (event) => {
window.dataLayer.push({
event: "product_added_to_cart",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
price: event.data?.cartLine?.merchandise?.price?.amount,
currency: event.data?.cartLine?.cost?.totalAmount?.currencyCode,
product_id: event.data?.cartLine?.merchandise?.product?.id + '_' + event.data?.cartLine?.merchandise?.id,
product_title: event.data?.cartLine?.merchandise?.product?.title,
quantity: event.data?.cartLine?.quantity,
total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,
test: event.data,
});
});

analytics.subscribe("cart_viewed", (event) => {
window.dataLayer.push({
event: "cart_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
total_cost: event.data?.cart?.cost?.totalAmount?.amount,
quantity: event.data?.cart?.totalQuantity,
cart_id: event.data?.cart?.id,
});
});

analytics.subscribe("page_viewed", (event) => {
window.dataLayer.push({
event: "page_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
page_title: event.context.document.title,
});
});

analytics.subscribe("product_viewed", (event) => {
window.dataLayer.push({
event: "product_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
product_id: event.data?.productVariant?.product?.id + '_' + event.data?.productVariant?.id,
product_title: event.data?.productVariant?.title,
product_sku: event.data?.productVariant?.sku,
});
});

analytics.subscribe("search_submitted", (event) => {
window.dataLayer.push({
event: "search_submitted",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
query: event.data?.searchResult?.query,
});
});

analytics.subscribe("collection_viewed", (event) => {
window.dataLayer.push({
event: "collection_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
collection_id: event.data?.collection?.id,
collection_title: event.data?.collection?.title,
});
});
</pre>

== File Location ==

The Shopify pixel loads the JS into a JS file which is loaded by the browser.<br />
The location of this can be built by using data from the home web page.<br /><br />
https://<<domain>>/wpm@<<wpm_id>>/custom/web-pixel-<<pixel_id>>@<<script_version>>/sandbox/modern/

wpm_id - is the version of the wpm (Web Pixel Manager), this is the same across all sites and will change when the wpm is updated by shopify.
pixel_id - this is found via the JSON below that is on the site
script_version - this is found via the JSON below that is on the site

{"id":"<<pixel_id >>","eventPayloadVersion":"1","runtimeContext":"LAX","scriptVersion":"<<script_version>>","type":"CUSTOM","privacyPurposes":[],"name":"GTM + Value Tracking"}

<pre>

</pre>

= Tag Manager =

Add Tag Manager to theme:
Modify Theme
<pre>
"online store" -> "..." or "Actions" -> "edit HTML / CSS"
</pre>

Modify theme.liquid

Google Tag Manager will also need to be added to Checkout's additional settings to track conversions

== Conversion Tracking Code ==

Google Tag Manager will also need to be added to Checkout's additional settings to track conversions

In "settings" -> "checkout" -> "additional settings"

<pre>
{% if first_time_accessed %}
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({'order_id' : '{{ order_number }}', 'order_value' : '{{ total_price | money_without_currency }}', 'event' : 'order-submitted'});
</script>
{% endif %}
</pre>

*Note: if testing without "{% if first_time_accessed %}" on a order that has already converted, the order ID will not show

to add product ids add within the code above:

<pre>
dataLayer.push({ 'product_ids' : [{% for line_item in line_items %}{{ line_item.product_id }}{% unless forloop.last == true %}, {% endunless %}{% endfor %}] });
</pre>

*Note: This was made for dynamic re-marketing, for analytics 4 go to the section below

=== Tracking Contact Page ===

In the snippets section, go to "form-status.liquid" or "contact.liquid".

Find the snippet that shows the success text ( in-between {%- if form.posted_successfully? -%}{%- endif -%} ),
Then add:

<pre>
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
</script>
</pre>

= Product Feed =

The below App is free to use & should do most of the setup for you:<br />
https://apps.shopify.com/google<br />

After installing the App a Google account with access to the Merchant Centre needs to sign in.<br />
DO NOT sign in using one of our Master email addresses, instead you can either:<br />
- Ask the client to do this, if they don't have access to Merchant Center we can try to add them.
- Create a new email address that only has access to this Merchant Center & sign in with this instead.

Then the below needs to be done, in this order otherwise it won't send the products through & you'll have to start from scratch:<br />
- Make sure the Store requirements are met & confirm these, if they aren't then send this back to the client so they can add whats necessary.
- Under Product Feed, start the setup process.
- Connect the Merchant Centre on the settings tab.
- Specify the Target Market & set the Shipping settings to Manual (These will need to be added to Merchant Center by someone afterwards).
If this has been done correctly then the products should now be available within the Merchant Center account.<br /><br />

Below is for Reference, Do not use!<br />
Alternatively, Shopify does provide you with the Product feed URL for your store.<br />
To access this, you will need to append .atom to either all of your collections or to a specific collection URL.<br />
<br />
For example:
<br />
<pre>
"yourstorename.com/collections/all.atom"
"yourstorename.com/collections/collectionname.atom"
</pre>

= Events for Analytics 4 =

View Item: <br />
Add this to product-template.liquid

<pre>

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
event: "view_item",
ecommerce: {
currency: "GBP",
items: [
{
item_id: {{ product.id }},
item_name: "{{ product.title }}",
{% if product.vendor %} item_brand: "{{ product.vendor }}", {% endif %}
price: {{ product.price | money_without_currency }},
{% if product.type %} item_category: "{{ product.type }}", {% endif %}
google_business_vertical: "retail",
id: "{{ product.id }}"
}
]
},
});
</script>

</pre>

Add To Cart:<br />
The below listener can be added to GTM, this should send add_to_cart events to GTM for you.

<pre>
<script>
jQuery(document).ready(function() {
jQuery( document ).ajaxSuccess(function( event, xhr, settings, data ) {
if (~settings.url.indexOf("/cart/add")) {

var items = [];
items.push({
item_id: data.product_id,
item_name: data.title,
item_category: data.product_type,
price: ( data.price / 100 ),
google_business_vertical: "retail",
id: data.product_id
});

if (typeof data.brand != "undefined") items[0]['item_brand'] = data.brand;

var dataLayer = window.dataLayer || [];
dataLayer.push({
event: 'add_to_cart',
ecommerce: {
currency: "GBP",
items: items
}
});
}
});
});
</script>
</pre>

Purchases:<br />
Add this to the Settings > Checkout > Additional Scripts section.

<pre>
{% if first_time_accessed %}
<script>
var items = [];
var temp = {};

{% for line_item in line_items %}
temp = {
item_id: {{ line_item.product.id }},
item_name: "{{ line_item.title }}",
price: {{ line_item.final_line_price | money_without_currency }},
google_business_vertical: "retail",
id: {{ line_item.product.id }},
quantity: {{ line_item.quantity }}

};

{% if line_item.product.type %}
temp['item_category'] = "{{ line_item.product.type }}";
{% endif %}

{% if line_item.product.vendor %}
temp['item_brand'] = "{{ line_item.product.vendor }}";
{% endif %}

items.push(temp);

{% endfor %}

var dataLayer = window.dataLayer || [];
dataLayer.push({
event: 'purchase',
ecommerce: {
affiliation: 'Online Store',
transaction_id: '{{ order_number }}',
value: '{{ total_price | money_without_currency }}',
tax: '{{ tax_price | money_without_currency }}',
shipping: '{{ shipping_price | money_without_currency}}',
currency: "GBP",
items: items
}
});

</script>
{% endif %}
</pre>

The Event Tag & Variables can be setup with the below template:<br />
[[File:Shopify-ga4-container-elements.json]]

= Shopify Links =
Cheat sheet for Variables: <br />
https://www.shopify.co.uk/partners/shopify-cheat-sheet

Tawk

2025-03-18T13:37:37Z

Aaron.trevellick: /* Tracking In Tag Manager */

== Tracking In Tag Manager ==

Tawk has an API for tracking.<br />
https://developer.tawk.to/jsapi/

<pre>
<script>
(function() {
function tawkDataLayerEvent( eventName ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'tawk-' + eventName});
}
window.Tawk_API = window.Tawk_API || {};
window.Tawk_API.onLoad = function(){ tawkDataLayerEvent('loaded'); };
window.Tawk_API.onStatusChange = function(){ tawkDataLayerEvent('status-changed'); };
window.Tawk_API.onBeforeLoad = function(){ tawkDataLayerEvent('before-load'); };
window.Tawk_API.onChatMaximized = function(){ tawkDataLayerEvent('chat-maximised'); };
window.Tawk_API.onChatMinimized = function(){ tawkDataLayerEvent('chat-minimised'); };
window.Tawk_API.onChatHidden = function(){ tawkDataLayerEvent('chat-hidden'); };
window.Tawk_API.onChatStarted = function(){ tawkDataLayerEvent('chat-started'); };
window.Tawk_API.onChatEnded = function(){ tawkDataLayerEvent('chat-ended'); };
window.Tawk_API.onPrechatSubmit = function(){ tawkDataLayerEvent('prechat-submitted'); };
window.Tawk_API.onOfflineSubmit = function(){ tawkDataLayerEvent('offline-submitted'); };
})();
</script>
</pre>

This creates the following events to be fired:
<pre>
tawk-loaded
tawk-status-changed
tawk-before-load
tawk-chat-maximised
tawk-chat-minimised
tawk-chat-hidden
tawk-chat-started
tawk-chat-ended
tawk-prechat-submitted
tawk-offline-submitted
</pre>

Tag Manager Installation (Wordpress)

2025-03-13T10:27:22Z

Aaron.trevellick: /* Chauffeur Booking System Plugin */

To install on google tag manager it is advised to use the Duracell Tomi Plugin:
[[Google Tag Manager for WordPress (Plugin)]]

= Tracking Other Wordpress Contact Plugins =

== Caldera Forms ==

Create tag as Custom HTML:

<pre>
<script>
jQuery( function() {
jQuery( document ).on( 'cf.form.submit', function (event, data ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
});
});
</script>
</pre>

*note, the JS bind will not fire if the form is not set to AJAX submission.

== Contact Form 7 ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

Note: CF7 developers love changing their hook names, if this doesn't work try the below instead:<br />
<pre>
jQuery('.wpcf7').on('wpcf7:mailsent', function(e) {
</pre>

== Conversion Plus ==

For the poppup form, create tag as Custom HTML and use the ajaxSuccess hook below:

<pre>
<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>
</pre>

== 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.

<pre>
<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>
</pre>
<br />
It is also possible to use the field names that are being submitted:

<pre>
<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>
</pre>

== Elementor Form Builder ==

Create tag as Custom HTML:

<pre>
<script>
jQuery( document ).ready(function( $ ){
$( document ).on('submit_success', function( event, response ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
});
});
</script>
</pre>

== 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.

== Gravity Form ==

Create tag as custom HTML:

<pre>
<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>
</pre>

For this to work, AJAX is required to be enabled on the form.
This can be enabled in the short-code[https://codex.wordpress.org/Shortcode_API] when the form is called on the wordpress page:
<pre>
[gravityform id="1" ajax="true"]
</pre>

*note, the JS bind will not fire if the form is set to redirect after success.

== Ninja Forms ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

== Pojo Forms ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

== Siteorigin form ==
this strips out script tags so will need to add custom JS:

<pre>
function () {
var success = document.getElementsByClassName("sow-contact-form-success");
return (typeof success[0] != "undefined");
}
</pre>

== WP Forms ==
Using a slightly altered version of the JQuery form listener should work for this:

<pre>
<script>
jQuery(document).ready(function() {
jQuery( document ).on('wpformsAjaxSubmitSuccess', (function( event, json ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'form-submitted'});
}));
});
</script>
</pre>

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:
<pre>
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
</script>
</pre>

<b>Or if using GTM4WP</b><br />
Add a datalayer variable in GTM with:<br />
eventModel.form_id for Form ID<br />

Setup a custom event Trigger:
<pre>
Event: form_submit
Some Custom Events:
Form ID contains wpforms-form-
</pre>

= Tracking Other Wordpress Newsletter Plugins =

== Mailchimp Forms (mc4wp) ==

if is not AJAX and stays on page when the form submits, add a JS variable:

<pre>
function () {
var success = document.getElementsByClassName("mc4wp-success");
return (typeof success[0] != "undefined");
}
</pre>

if not, custom HTML will need to be added as a listener:

<pre>
jQuery(document).ready(function() {
mc4wp.forms.on('submitted', function() {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'newsletter-form-submitted'});
});
});
</pre>

== Pop-up Builder - Mailchimp ==

Add Custom HTML:

<pre>
<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>
</pre>

== Avia Form Builder ==
Add Custom HTML:

<pre>
<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>
</pre>

Note: (Still not 100% on this)

= Tracking Other Wordpress Ecommerce Plugins =

== WooCommerce ==

See Article: [[WooCommerce]]

== Foxy Shop ==

<pre>
https://wiki.foxycart.com/v/2.0/receipt#using_custom_tracking_code
</pre>

copy template from:
<pre>
/wp-content/plugins/foxyshop/themefiles/foxyshop-receipt.php
</pre>

to theme / child theme root

Code:

<pre>
{% if first_receipt_display %}

<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({
'order_id' : '{{ order_id }}',
'order_value' : '{{ total_order }}',
'event' : 'order-submitted'
});
</script>

{% endif %}
</pre>

<pre>
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({
'order_id' : '<?php echo $transaction_id; ?>',
'order_value' : '<?php echo $order_total; ?>',
'event' : 'order-submitted'
});
</script>
</pre>

== 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.<br />
The order ID & order value cannot be tracked without modification of the plugin.

Below is code to track the booking completion.<br />
Insert the code as a custom HTML tag in the tag manager:

<pre>
<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>
</pre>

Calendly

2025-03-13T10:02:30Z

Aaron.trevellick: Created page with "== Tracking In Tag Manager == Tracking:<br /> https://www.analyticsmania.com/post/how-to-track-calendly-with-google-tag-manager-and-google-analytics-4/ <pre> <script> window.dataLayer = window.dataLayer ||[]; window.addEventListener('message', function(e) { if (e.data.event && e.data.event.indexOf('calendly') === 0) { window.dataLayer.push({ 'event' : 'calendly', 'calendly_event' : e.data.event.split('.')[1] }); } } ); </script>..."

== Tracking In Tag Manager ==

Tracking:<br />
https://www.analyticsmania.com/post/how-to-track-calendly-with-google-tag-manager-and-google-analytics-4/

<pre>
<script>
window.dataLayer = window.dataLayer ||[];
window.addEventListener('message',
function(e) {
if (e.data.event && e.data.event.indexOf('calendly') === 0) {
window.dataLayer.push({
'event' : 'calendly',
'calendly_event' : e.data.event.split('.')[1]
});
}
}
);
</script>
</pre>

Google Tag Manager

2025-03-13T10:00:50Z

Aaron.trevellick:

= GTM =
<pre>
https://tagmanager.google.com/
</pre>
Google Tag Manager is a site container used for storing and triggering scripts.<br />
These then can be used for tracking.<br />

= Systems =

Below are links to pages for different systems.
These pages will include the methods used for installing the Tag Manager and the Conversion Value tracking.<br />

{| class="wikitable sortable" style="width:100%"
|-
! Self-Host System !! On-site Builder Systems !! Chat Systems !! Other
|-
| [[CS-Cart]] || [[Bigcommerce]] || [[CollectChat]] || [[Calendly]]
|-
| [[Joomla]] || [[Ecwid]] || [[HubSpot Chat]] ||
|-
| [[Magento 1.x]] || [[EKMPowershop]] || [[Jivo]] ||
|-
| [[Magento 2.x]] || [[MyshopBlocks]] || [[LiveChat]] ||
|-
| [[OpenCart]] || [[Roman Cart]] || [[PureChat]] ||
|-
| [[Prestashop]] || [[Shopify]] || [[Tawk]] ||
|-
| [[Tag Manager Installation (Wordpress)|Wordpress]] || [[Squarespace]] || [[Tidio]] ||
|-
| [[X-Cart]] || [[Trill]] || [[ZenDesk]] ||
|-
| [[Zen Cart]] || [[Wix]] || [[Zoho]] ||
|-
||| [[Yell]] || ||
|}

= Useful Info =

== Generic jQuery Form Listener ==

If there is no instructions in the wiki for a particular system and/or plugin and the form uses Ajax to submit,
It may be worth trying this generic form listener.<br />

depending on what the jQuery is called when initialized you may need to change "jQuery" to "$" in the code below.<br />

create a custom HTML tag and change the index URL to what the URL is submitting to in the Ajax form.<br />

<pre>
<script>
jQuery(document).ready(function() {
jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {
if (~settings.url.indexOf("/contact/form/process/")) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
}
});
});
</script>
</pre>
<br />
note: the form must be using the actual jQuery's Ajax method to perform the request for this to work

== Unique Page Views ==

You can track unique page views by storing a value in the sessionStorage variable.
This can be useful for tracking forms where only a thank you page is available track.

Create a tag that only fires on the page you want to track
<pre>
<script>
var gtm_fs_count = 1;
var page_path = "{{Page Path}}".replace(/\//g, 'F_SLASH');
if (sessionStorage[page_path]) {

gtm_fs_count = gtm_fs_count+1;
sessionStorage.setItem(page_path, gtm_fs_count);

} else if(!sessionStorage[page_path]) {

sessionStorage.setItem(page_path, gtm_fs_count) ;

}
</script>
</pre>

Create a custom JS variable to retrieve the value:
<pre>
function() {
var page_path = "{{Page Path}}".replace(/\//g,"F_SLASH");
return parseInt(window.sessionStorage[page_path]);
}
</pre>

Then update the trigger to the variable is less than 2 as well as its existing conditions

== Cookie Consent Banner & Consent Mode V2 ==

For clients that don't have this setup & functioning already, its possible to setup a consent mode friendly cookie banner using the below JS:
Within the .zip, the file is /build/cookieconsent.js
[[Media:Cookieconsent-master.zip|Cookieconsent-master.zip]]

This file will need to be hosted somewhere that is accessible for the client site.
Once this has been done the below script will need to be added to the site, before GTM is loaded.
Make sure to swap cookieconsent.js with the location of the js file.

<pre>
<script src="cookieconsent.js"></script>
<script>
// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
window.CookieConsent.init({
categories: {
// Unique name.
necessary: {
needed: true,
wanted: true,
checked: true,
// Language settings for categories.
language: {
locale: {
en: {
name: 'Strictly Necessary Cookies',
description: 'Cookies Required for the site to function as intended.',
},
}
}
},
analytics: {
needed: false,
wanted: false,
checked: false,
language: {
locale: {
en: {
name: 'Analytics',
description: 'Cookies used by Google & other 3rd party analytics services.',
},
}
}
}
},
consentModeControls: {
ad_storage: 'analytics',
ad_user_data: 'analytics',
ad_personalization: 'analytics',
analytics_storage: 'analytics'
},
});
</script>
<script>
if (localStorage.getItem('consentMode') === null) {
gtag('consent', 'default', {
'ad_storage': 'denied',
'ad_user_data': 'denied',
'ad_personalization': 'denied',
'analytics_storage': 'denied'
});
} else {
gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')));
}
</script>
</pre>

Optional, but to make it look slightly better you could reduce the opacity:
<pre>
<style>
#cconsent-bar {
opacity: 0.9;
}
</style>
</pre>

Squarespace

2025-01-23T10:02:04Z

Aaron.trevellick: /* Contact Form */

= Install Tag Manager =

A business Account or higher is required to install tag manager.<br /><br />

Go to:
<pre>
Settings -> Advanced -> Code Injection
</pre>
Enter the GTM to the Head & Footer

= Contact Form =

On the contact form, click:
<pre>
Edit -> Advanced
</pre>

within the Post-Submit HTML field enter:
<pre>
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
</script>
</pre>

= Sales =

Settings -> Advanced -> Code Injection </br>
Scroll down to Order Confirmation Page & add the below:</br>

<pre>
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({'order_id' : '{orderId}'});
dataLayer.push({'order_value' : '{orderGrandTotal}'});
dataLayer.push({'event' : 'order-submitted'});
</script>
</pre>

ZenDesk

2025-01-23T10:00:08Z

Aaron.trevellick: /* Tracking In Tag Manager */

== Tracking In Tag Manager ==

ZenDesk has an API for tracking.

https://developer.zendesk.com/embeddables/docs/widget/chat

To use this, create a custom HTML tag In tag manager and trigger it on any pages the ZenDesk chat runs on.

Add this script to the custom HTML:

<pre>
<script>
function zendeskDataLayerEvent( eventName ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'zendesk-' + eventName});
}

zE('webWidget:on', 'chat:connected', function(){ zendeskDataLayerEvent('connected'); });
zE('webWidget:on', 'open', function(){ zendeskDataLayerEvent('on-show'); });
zE('webWidget:on', 'close', function(){ zendeskDataLayerEvent('on-hide'); });
zE('webWidget:on', 'chat:start', function(){ zendeskDataLayerEvent('chat-started'); });
zE('webWidget:on', 'chat:unreadMessages', function(number){ zendeskDataLayerEvent('unread-msg'); });
zE('webWidget:on', 'chat:end', function(){ zendeskDataLayerEvent('chat-ended'); });
</script>
</pre>

This sets up the events in the datalayer to be used in triggers:

<pre>
zendesk-connected
zendesk-on-show
zendesk-on-hide
zendesk-chat-started
zendesk-unread-msg
zendesk-chat-ended
</pre>

*note there is no way to track offline form submits (when no one is there to chat)

=== Legacy ===

Legacy ZenDesk has an API for tracking.

https://api.zopim.com/files/meshim/widget/controllers/LiveChatAPI-js.html

To use this, create a custom HTML tag In tag manager and trigger it on any pages the ZenDesk chat runs on.

Add this script to the custom HTML:

<pre>
<script>
function zendeskDataLayerEvent( eventName ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'zendesk-' + eventName});
console.log( 'Datalayer: zendesk-' + eventName );
}

var waitForZopim = setInterval(function () {

if (window.$zopim === undefined || window.$zopim.livechat === undefined) {
return;
}

$zopim(function() {
$zopim.livechat.setOnConnected( function() {
zendeskDataLayerEvent('connected');
});
$zopim.livechat.window.onShow( function() {
zendeskDataLayerEvent('on-show');
});
$zopim.livechat.window.onHide( function() {
zendeskDataLayerEvent('on-hide');
});
$zopim.livechat.setOnChatStart( function() {
zendeskDataLayerEvent('chat-started');
});
$zopim.livechat.setOnUnreadMsgs( function() {
zendeskDataLayerEvent('unread-msg');
});
$zopim.livechat.setOnChatEnd( function() {
zendeskDataLayerEvent('chat-ended');
});
});

clearInterval( waitForZopim );

}, 100);

</script>
</pre>

This sets up the events in the datalayer to be used in triggers:

<pre>
zendesk-connected
zendesk-on-show
zendesk-on-hide
zendesk-chat-started
zendesk-unread-msg
zendesk-chat-ended
</pre>

*note there is no way to track offline form submits (when no one is there to chat)

Tawk

2025-01-21T14:49:28Z

Aaron.trevellick:

== Tracking In Tag Manager ==

Tawk has an API for tracking.<br />
https://developer.tawk.to/jsapi/

<pre>
<script>
(function() {
function tawkDataLayerEvent( eventName ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'tawk-' + eventName});
}
window.Tawk_API = window.Tawk_API || {};
if( window.Tawk_API ) {
window.Tawk_API.onLoad = function(){ tawkDataLayerEvent('loaded'); };
window.Tawk_API.onStatusChange = function(){ tawkDataLayerEvent('status-changed'); };
window.Tawk_API.onBeforeLoad = function(){ tawkDataLayerEvent('before-load'); };
window.Tawk_API.onChatMaximized = function(){ tawkDataLayerEvent('chat-maximised'); };
window.Tawk_API.onChatMinimized = function(){ tawkDataLayerEvent('chat-minimised'); };
window.Tawk_API.onChatHidden = function(){ tawkDataLayerEvent('chat-hidden'); };
window.Tawk_API.onChatStarted = function(){ tawkDataLayerEvent('chat-started'); };
window.Tawk_API.onChatEnded = function(){ tawkDataLayerEvent('chat-ended'); };
window.Tawk_API.onPrechatSubmit = function(){ tawkDataLayerEvent('prechat-submitted'); };
window.Tawk_API.onOfflineSubmit = function(){ tawkDataLayerEvent('offline-submitted'); };
}
})();
</script>
</pre>

This creates the following events to be fired:
<pre>
tawk-loaded
tawk-status-changed
tawk-before-load
tawk-chat-maximised
tawk-chat-minimised
tawk-chat-hidden
tawk-chat-started
tawk-chat-ended
tawk-prechat-submitted
tawk-offline-submitted
</pre>

Roman Cart

2024-12-09T11:44:50Z

Aaron.trevellick: /* Installing GTM / Value Tracking */

= Installing GTM / Value Tracking =

Once signed into Roman Cart, go to
<pre>
Marketing > External Sales Tracking > Sales Tracking Scripts
</pre>
Add the below code here, swapping the GTM ID for the relevant one, make sure not to exceed the character limit.
<pre>

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>



<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>


<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({'order_value' : '<totalpricenocurr>', 'order_id' : '<orderid>', 'event' : 'order-submitted'});
</script>
</pre>

LetsEncrypt

2024-11-28T16:40:52Z

Aaron.trevellick:

== Let's Encrypt on Ubuntu server ==

First update the server
<pre>
sudo apt update
sudo apt upgrade
sudo apt autoremove
</pre>

=== Apache ===

Then run these command to install and config certbot
<pre>
sudo apt install certbot python3-certbot-apache
sudo apache2ctl configtest
sudo systemctl reload apache2
sudo ufw allow 'Apache Full'

sudo certbot --apache
</pre>

Check auto renewal status
<pre>
sudo systemctl status certbot.timer
</pre>

=== nginx ===

Then run these command to install and config certbot
<pre>
sudo apt install certbot python3-certbot-nginx
sudo systemctl reload nginx

sudo certbot --nginx
</pre>

Check auto renewal status
<pre>
sudo systemctl status certbot.timer
</pre>

LetsEncrypt

2024-11-28T16:15:10Z

Aaron.trevellick:

== Let's Encrypt on Ubuntu server with apache ==

First update the server
<pre>
sudo apt update
sudo apt upgrade
sudo apt autoremove
</pre>

Then run these command to install and config certbot
<pre>
sudo apt install certbot python3-certbot-apache
sudo apache2ctl configtest
sudo systemctl reload apache2
sudo ufw allow 'Apache Full'

sudo certbot --apache
</pre>

Check auto renewal status
<pre>
sudo systemctl status certbot.timer
</pre>

== Let's Encrypt on Ubuntu server with nginx ==

First update the server
<pre>
sudo apt update
sudo apt upgrade
sudo apt autoremove
</pre>

Then run these command to install and config certbot
<pre>
sudo apt install certbot python3-certbot-nginx
sudo systemctl reload nginx

sudo certbot --nginx
</pre>

Check auto renewal status
<pre>
sudo systemctl status certbot.timer
</pre>

Google Call Tracking

2024-09-16T09:52:52Z

Aaron.trevellick: Created page with "= Debug Mode = At the end of the URL add either: <pre> #google-wcc-debug #google-wcc-force </pre>"

= Debug Mode =
At the end of the URL add either:

<pre>
#google-wcc-debug
#google-wcc-force
</pre>

Main Page

2024-09-16T09:51:41Z

Aaron.trevellick: /* Main Subjects */

== Login to make changes ==
You can login using firstname.surname as the username.<br />
The password is the same as the tools login.

== Main Subjects ==

Google Tag Manager Installation: [[Google Tag Manager]]<br />
Google Call Tracking: [[Google Call Tracking]]<br />
Getting Feeds: [[Feeds]]<br /><br />

Let's Encrypt: [[LetsEncrypt]]

SuiteCRM 8.x: [[SuiteCRM_8.x]]

Prestashop

2024-09-10T09:07:14Z

Aaron.trevellick: /* Check Module Install Permissions */

= Tag Manager =

Tag Manager can be installed in the theme's header &/or head template file.

<pre>
\themes\<<theme>>\header.tpl
\themes\<<theme>>\head.tpl
</pre>

This needs to be wrapped around with {literal}{/literal} tags

== Conversion Tracking ==

This can be done but using a plugin that hooks onto the order page:
<pre>
http://git.loki.co.uk/attachments/9bea9480-d6c0-4de8-8f56-e61998531794
</pre>

For Prestashop 1.7+ the plugin has been modified to use the new hooks:
<pre>
http://git.loki.co.uk/attachments/b7d808fd-9b94-4656-a807-096984300c2b
</pre>

Download the files and make sure it is in the modules folder.
the folder structure should be:
<pre>
\modules\datalayer\
</pre>

Then the module will need to be installed (this can be done by searching in the "manage modules" tab).
If the module does not show up, you may not have permissions even if you are set up as admin & can see the modules.

=== Check Module Install Permissions ===

To check if the account has the install permissions, use adminer and access the database.<br />
This will require some method to access the files e.g. FTP

Go to the employee table in the database and get the "id_profile" field from the relevant employee row.<br />
Go to the tab table and get the "id_tab" field from the row that has a module called "AdminModules".<br />
Then go to the access tab and match up the "id_profile" & "id_tab" with what was retrieved before to see the file permissions.<br />
Change or add to "1" to enable installation.

= Clear Cache =

== Admin Panel ==

To Clear cache via admin go to:
<pre>
Advanced Parameters > performance
</pre>
Then Click the "clear cache" button

== FTP ==

To clear the cache via FTP go to:
<pre>
\cache\smarty\
</pre>

then inside both "cache" & "compile" folders, delete all folders except the index.php and the flush file.

refresh page and cache should rebuild

OpenCart

2024-09-05T08:50:03Z

Aaron.trevellick: /* Feeds */

= Google Tag Manager =

Install Tag Manager.
*Note, the OCmod & VQmod scripts below insert the Tag Manager.

Main Template file:
<pre>
/catalog/view/theme/<<Theme Folder>>/template/common/header.tpl
</pre>

== Conversion URLS ==
Contact Thank-you URL:
<pre>
index.php?route=information/contact/success
</pre>

Sale Thank-you URL:
<pre>
index.php?route=checkout/success
</pre>

Account Creation URL:
<pre>
index.php?route=account/success
</pre>

== Conversion Value ==

The easiest and most reliable way to install the Conversion value tracking is via extensions that inject the code directly into core files.<br />
These are upgrade safe! (The worst that can happen is that a reference can change and the code is not injected)<br />
Before using these, it is best to check that the references are the same.<br />
<b>Change the GTM ID's in the scripts!</b>.<br />
<br /><br />
OpenCart 2.x uses .tpl files<br />
OpenCart 3.x uses .twig files<br />

=== VQmod ===
An OpenCart extension called VQmod is required to insert it into the code.
<pre>
vqmod/xml/get_total_to_success.xml
</pre>

[[Media:Get total to success.xml|Get_total_to_success.xml]]

=== OCmod ===

An OpenCart extension called OCmod is required to insert it into the code.

Opencart v3.0 Onwards:
[[Media:Gtm.ocmod.zip|Gtm.ocmod.zip]]

Opencart v2.0:
[[Media:Gtm-2x.ocmod.zip|Gtm-2x.ocmod.zip]]

= Feeds =

The Google Base extension will need to be installed and activated.

<pre>
http://docs.opencart.com/en-gb/extension/feed/
</pre>
<br />
The URL for the generated Feed:
<pre>
/index.php?route=feed/google_base
/googlebase.xml
</pre>

SuiteCRM 8.x

2024-08-07T10:07:01Z

Aaron.trevellick:

= Cron Jobs =
<pre>
sudo crontab -e -u www-data
</pre>

= Update =

Download and put file in:
<pre>
/tmp/package/upgrade/
</pre>

then run commands:
<pre>
./bin/console suitecrm:app:upgrade -t "SuiteCRM-<version>"
./bin/console suitecrm:app:upgrade-finalize -t "SuiteCRM-<version>"
</pre>

Then reset permissions

= Reset Permissions =
<pre>
find . -type d -not -perm 2755 -exec chmod 2755 {} \;
find . -type f -not -perm 0644 -exec chmod 0644 {} \;
find . ! -user www-data -exec chown www-data:www-data {} \;
chmod +x bin/console
</pre>

= development =
https://docs.suitecrm.com/8.x/developer/installation-guide/front-end-installation-guide/
<pre>
sudo apt install npm
sudo npm install --global yarn
sudo npm install @angular/cli@16.2.13
</pre>
Commands:
<pre>
yarn run build:common
yarn run build:core
yarn run build:shell
</pre>

Jivo

2024-08-01T14:31:55Z

Aaron.trevellick:

== Tracking In Tag Manager ==

Jivohas an API for tracking.

https://www.jivochat.co.uk/docs/widget/

To use this, create a custom HTML tag In tag manager and trigger it on any pages the Jivochat runs on.

Add this script to the custom HTML:

<pre>
<script>
function jivoDataLayerEvent( eventName ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'jivo-' + eventName});
}
function jivo_onOpen() { jivoDataLayerEvent( 'chat-opened' ); }
function jivo_onMessageSent() { jivoDataLayerEvent( 'message-sent' ); }
function jivo_onIntroduction() { jivoDataLayerEvent( 'contact-sent' ); }
</script>
</pre>

Google Tag Manager

2024-08-01T08:34:19Z

Aaron.trevellick:

= GTM =
<pre>
https://tagmanager.google.com/
</pre>
Google Tag Manager is a site container used for storing and triggering scripts.<br />
These then can be used for tracking.<br />

= Systems =

Below are links to pages for different systems.
These pages will include the methods used for installing the Tag Manager and the Conversion Value tracking.<br />

{| class="wikitable sortable" style="width:100%"
|-
! Self-Host System !! On-site Builder Systems !! Chat Systems
|-
| [[CS-Cart]] || [[Bigcommerce]] || [[CollectChat]]
|-
| [[Joomla]] || [[Ecwid]] || [[HubSpot Chat]]
|-
| [[Magento 1.x]] || [[EKMPowershop]] || [[Jivo]]
|-
| [[Magento 2.x]] || [[MyshopBlocks]] || [[LiveChat]]
|-
| [[OpenCart]] || [[Roman Cart]] || [[PureChat]]
|-
| [[Prestashop]] || [[Shopify]] || [[Tawk]]
|-
| [[Tag Manager Installation (Wordpress)|Wordpress]] || [[Squarespace]] || [[Tidio]]
|-
| [[X-Cart]] || [[Trill]] || [[ZenDesk]]
|-
| [[Zen Cart]] || [[Wix]] || [[Zoho]]
|-
||| [[Yell]] ||
|}

= Useful Info =

== Generic jQuery Form Listener ==

If there is no instructions in the wiki for a particular system and/or plugin and the form uses Ajax to submit,
It may be worth trying this generic form listener.<br />

depending on what the jQuery is called when initialized you may need to change "jQuery" to "$" in the code below.<br />

create a custom HTML tag and change the index URL to what the URL is submitting to in the Ajax form.<br />

<pre>
<script>
jQuery(document).ready(function() {
jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {
if (~settings.url.indexOf("/contact/form/process/")) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
}
});
});
</script>
</pre>
<br />
note: the form must be using the actual jQuery's Ajax method to perform the request for this to work

== Unique Page Views ==

You can track unique page views by storing a value in the sessionStorage variable.
This can be useful for tracking forms where only a thank you page is available track.

Create a tag that only fires on the page you want to track
<pre>
<script>
var gtm_fs_count = 1;
var page_path = "{{Page Path}}".replace(/\//g, 'F_SLASH');
if (sessionStorage[page_path]) {

gtm_fs_count = gtm_fs_count+1;
sessionStorage.setItem(page_path, gtm_fs_count);

} else if(!sessionStorage[page_path]) {

sessionStorage.setItem(page_path, gtm_fs_count) ;

}
</script>
</pre>

Create a custom JS variable to retrieve the value:
<pre>
function() {
var page_path = "{{Page Path}}".replace(/\//g,"F_SLASH");
return parseInt(window.sessionStorage[page_path]);
}
</pre>

Then update the trigger to the variable is less than 2 as well as its existing conditions

== Cookie Consent Banner & Consent Mode V2 ==

For clients that don't have this setup & functioning already, its possible to setup a consent mode friendly cookie banner using the below JS:
Within the .zip, the file is /build/cookieconsent.js
[[Media:Cookieconsent-master.zip|Cookieconsent-master.zip]]

This file will need to be hosted somewhere that is accessible for the client site.
Once this has been done the below script will need to be added to the site, before GTM is loaded.
Make sure to swap cookieconsent.js with the location of the js file.

<pre>
<script src="cookieconsent.js"></script>
<script>
// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
window.CookieConsent.init({
categories: {
// Unique name.
necessary: {
needed: true,
wanted: true,
checked: true,
// Language settings for categories.
language: {
locale: {
en: {
name: 'Strictly Necessary Cookies',
description: 'Cookies Required for the site to function as intended.',
},
}
}
},
analytics: {
needed: false,
wanted: false,
checked: false,
language: {
locale: {
en: {
name: 'Analytics',
description: 'Cookies used by Google & other 3rd party analytics services.',
},
}
}
}
},
consentModeControls: {
ad_storage: 'analytics',
ad_user_data: 'analytics',
ad_personalization: 'analytics',
analytics_storage: 'analytics'
},
});
</script>
<script>
if (localStorage.getItem('consentMode') === null) {
gtag('consent', 'default', {
'ad_storage': 'denied',
'ad_user_data': 'denied',
'ad_personalization': 'denied',
'analytics_storage': 'denied'
});
} else {
gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')));
}
</script>
</pre>

Optional, but to make it look slightly better you could reduce the opacity:
<pre>
<style>
#cconsent-bar {
opacity: 0.9;
}
</style>
</pre>

Tag Manager Installation (Wordpress)

2024-06-28T09:07:46Z

Aaron.trevellick: /* Tracking Other Wordpress Contact Plugins */

To install on google tag manager it is advised to use the Duracell Tomi Plugin:
[[Google Tag Manager for WordPress (Plugin)]]

= Tracking Other Wordpress Contact Plugins =

== Caldera Forms ==

Create tag as Custom HTML:

<pre>
<script>
jQuery( function() {
jQuery( document ).on( 'cf.form.submit', function (event, data ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
});
});
</script>
</pre>

*note, the JS bind will not fire if the form is not set to AJAX submission.

== Contact Form 7 ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

Note: CF7 developers love changing their hook names, if this doesn't work try the below instead:<br />
<pre>
jQuery('.wpcf7').on('wpcf7:mailsent', function(e) {
</pre>

== Conversion Plus ==

For the poppup form, create tag as Custom HTML and use the ajaxSuccess hook below:

<pre>
<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>
</pre>

== 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.

<pre>
<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>
</pre>
<br />
It is also possible to use the field names that are being submitted:

<pre>
<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>
</pre>

== Elementor Form Builder ==

Create tag as Custom HTML:

<pre>
<script>
jQuery( document ).ready(function( $ ){
$( document ).on('submit_success', function( event, response ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
});
});
</script>
</pre>

== 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.

== Gravity Form ==

Create tag as custom HTML:

<pre>
<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>
</pre>

For this to work, AJAX is required to be enabled on the form.
This can be enabled in the short-code[https://codex.wordpress.org/Shortcode_API] when the form is called on the wordpress page:
<pre>
[gravityform id="1" ajax="true"]
</pre>

*note, the JS bind will not fire if the form is set to redirect after success.

== Ninja Forms ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

== Pojo Forms ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

== Siteorigin form ==
this strips out script tags so will need to add custom JS:

<pre>
function () {
var success = document.getElementsByClassName("sow-contact-form-success");
return (typeof success[0] != "undefined");
}
</pre>

== WP Forms ==
Using a slightly altered version of the JQuery form listener should work for this:

<pre>
<script>
jQuery(document).ready(function() {
jQuery( document ).on('wpformsAjaxSubmitSuccess', (function( event, json ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'form-submitted'});
}));
});
</script>
</pre>

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:
<pre>
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
</script>
</pre>

<b>Or if using GTM4WP</b><br />
Add a datalayer variable in GTM with:<br />
eventModel.form_id for Form ID<br />

Setup a custom event Trigger:
<pre>
Event: form_submit
Some Custom Events:
Form ID contains wpforms-form-
</pre>

= Tracking Other Wordpress Newsletter Plugins =

== Mailchimp Forms (mc4wp) ==

if is not AJAX and stays on page when the form submits, add a JS variable:

<pre>
function () {
var success = document.getElementsByClassName("mc4wp-success");
return (typeof success[0] != "undefined");
}
</pre>

if not, custom HTML will need to be added as a listener:

<pre>
jQuery(document).ready(function() {
mc4wp.forms.on('submitted', function() {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'newsletter-form-submitted'});
});
});
</pre>

== Pop-up Builder - Mailchimp ==

Add Custom HTML:

<pre>
<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>
</pre>

== Avia Form Builder ==
Add Custom HTML:

<pre>
<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>
</pre>

Note: (Still not 100% on this)

= Tracking Other Wordpress Ecommerce Plugins =

== WooCommerce ==

See Article: [[WooCommerce]]

== Foxy Shop ==

<pre>
https://wiki.foxycart.com/v/2.0/receipt#using_custom_tracking_code
</pre>

copy template from:
<pre>
/wp-content/plugins/foxyshop/themefiles/foxyshop-receipt.php
</pre>

to theme / child theme root

Code:

<pre>
{% if first_receipt_display %}

<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({
'order_id' : '{{ order_id }}',
'order_value' : '{{ total_order }}',
'event' : 'order-submitted'
});
</script>

{% endif %}
</pre>

<pre>
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({
'order_id' : '<?php echo $transaction_id; ?>',
'order_value' : '<?php echo $order_total; ?>',
'event' : 'order-submitted'
});
</script>
</pre>

== 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.<br />
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:

<pre>
<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>
</pre>

Tag Manager Installation (Wordpress)

2024-06-28T09:05:43Z

Aaron.trevellick: /* Tracking Other Wordpress Contact Plugins */

To install on google tag manager it is advised to use the Duracell Tomi Plugin:
[[Google Tag Manager for WordPress (Plugin)]]

= Tracking Other Wordpress Contact Plugins =

== Caldera Forms ==

Create tag as Custom HTML:

<pre>
<script>
jQuery( function() {
jQuery( document ).on( 'cf.form.submit', function (event, data ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
});
});
</script>
</pre>

*note, the JS bind will not fire if the form is not set to AJAX submission.

== Contact Form 7 ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

Note: CF7 developers love changing their hook names, if this doesn't work try the below instead:<br />
<pre>
jQuery('.wpcf7').on('wpcf7:mailsent', function(e) {
</pre>

== Conversion Plus ==

For the poppup form, create tag as Custom HTML and use the ajaxSuccess hook below:

<pre>
<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>
</pre>

== 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.

<pre>
<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>
</pre>
<br />
It is also possible to use the field names that are being submitted:

<pre>
<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>
</pre>

== Elementor Form Builder ==

Create tag as Custom HTML:

<pre>
<script>
jQuery( document ).ready(function( $ ){
$( document ).on('submit_success', function( event, response ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
});
});
</script>
</pre>

== 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.

== Gravity Form ==

Create tag as custom HTML:

<pre>
<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>
</pre>

For this to work, AJAX is required to be enabled on the form.
This can be enabled in the short-code[https://codex.wordpress.org/Shortcode_API] when the form is called on the wordpress page:
<pre>
[gravityform id="1" ajax="true"]
</pre>

*note, the JS bind will not fire if the form is set to redirect after success.

== Pojo Forms ==

Create tag as Custom HTML:

<pre>
<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>
</pre>

== Siteorigin form ==
this strips out script tags so will need to add custom JS:

<pre>
function () {
var success = document.getElementsByClassName("sow-contact-form-success");
return (typeof success[0] != "undefined");
}
</pre>

== WP Forms ==
Using a slightly altered version of the JQuery form listener should work for this:

<pre>
<script>
jQuery(document).ready(function() {
jQuery( document ).on('wpformsAjaxSubmitSuccess', (function( event, json ) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'form-submitted'});
}));
});
</script>
</pre>

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:
<pre>
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
</script>
</pre>

<b>Or if using GTM4WP</b><br />
Add a datalayer variable in GTM with:<br />
eventModel.form_id for Form ID<br />

Setup a custom event Trigger:
<pre>
Event: form_submit
Some Custom Events:
Form ID contains wpforms-form-
</pre>

= Tracking Other Wordpress Newsletter Plugins =

== Mailchimp Forms (mc4wp) ==

if is not AJAX and stays on page when the form submits, add a JS variable:

<pre>
function () {
var success = document.getElementsByClassName("mc4wp-success");
return (typeof success[0] != "undefined");
}
</pre>

if not, custom HTML will need to be added as a listener:

<pre>
jQuery(document).ready(function() {
mc4wp.forms.on('submitted', function() {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'newsletter-form-submitted'});
});
});
</pre>

== Pop-up Builder - Mailchimp ==

Add Custom HTML:

<pre>
<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>
</pre>

== Avia Form Builder ==
Add Custom HTML:

<pre>
<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>
</pre>

Note: (Still not 100% on this)

= Tracking Other Wordpress Ecommerce Plugins =

== WooCommerce ==

See Article: [[WooCommerce]]

== Foxy Shop ==

<pre>
https://wiki.foxycart.com/v/2.0/receipt#using_custom_tracking_code
</pre>

copy template from:
<pre>
/wp-content/plugins/foxyshop/themefiles/foxyshop-receipt.php
</pre>

to theme / child theme root

Code:

<pre>
{% if first_receipt_display %}

<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({
'order_id' : '{{ order_id }}',
'order_value' : '{{ total_order }}',
'event' : 'order-submitted'
});
</script>

{% endif %}
</pre>

<pre>
<script>
var dataLayer = window.dataLayer || [];
dataLayer.push({
'order_id' : '<?php echo $transaction_id; ?>',
'order_value' : '<?php echo $order_total; ?>',
'event' : 'order-submitted'
});
</script>
</pre>

== 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.<br />
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:

<pre>
<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>
</pre>

Google Tag Manager

2024-06-25T13:22:26Z

Aaron.trevellick:

= GTM =
<pre>
https://tagmanager.google.com/
</pre>
Google Tag Manager is a site container used for storing and triggering scripts.<br />
These then can be used for tracking.<br />

= Systems =

Below are links to pages for different systems.
These pages will include the methods used for installing the Tag Manager and the Conversion Value tracking.<br />

{| class="wikitable sortable" style="width:100%"
|-
! Self-Host System !! On-site Builder Systems !! Chat Systems
|-
| [[CS-Cart]] || [[Bigcommerce]] || [[CollectChat]]
|-
| [[Joomla]] || [[Ecwid]] || [[HubSpot Chat]]
|-
| [[Magento 1.x]] || [[EKMPowershop]] || [[Jivo]]
|-
| [[Magento 2.x]] || [[MyshopBlocks]] || [[LiveChat]]
|-
| [[OpenCart]] || [[Shopify]] || [[PureChat]]
|-
| [[Prestashop]] || [[Squarespace]] || [[Tawk]]
|-
| [[Tag Manager Installation (Wordpress)|Wordpress]] || [[Trill]] || [[Tidio]]
|-
| [[X-Cart]] || [[Wix]] || [[ZenDesk]]
|-
| [[Zen Cart]] || [[Yell]] || [[Zoho]]
|}

= Useful Info =

== Generic jQuery Form Listener ==

If there is no instructions in the wiki for a particular system and/or plugin and the form uses Ajax to submit,
It may be worth trying this generic form listener.<br />

depending on what the jQuery is called when initialized you may need to change "jQuery" to "$" in the code below.<br />

create a custom HTML tag and change the index URL to what the URL is submitting to in the Ajax form.<br />

<pre>
<script>
jQuery(document).ready(function() {
jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {
if (~settings.url.indexOf("/contact/form/process/")) {
var dataLayer = window.dataLayer || [];
dataLayer.push({'event' : 'contact-form-submitted'});
}
});
});
</script>
</pre>
<br />
note: the form must be using the actual jQuery's Ajax method to perform the request for this to work

== Unique Page Views ==

You can track unique page views by storing a value in the sessionStorage variable.
This can be useful for tracking forms where only a thank you page is available track.

Create a tag that only fires on the page you want to track
<pre>
<script>
var gtm_fs_count = 1;
var page_path = "{{Page Path}}".replace(/\//g, 'F_SLASH');
if (sessionStorage[page_path]) {

gtm_fs_count = gtm_fs_count+1;
sessionStorage.setItem(page_path, gtm_fs_count);

} else if(!sessionStorage[page_path]) {

sessionStorage.setItem(page_path, gtm_fs_count) ;

}
</script>
</pre>

Create a custom JS variable to retrieve the value:
<pre>
function() {
var page_path = "{{Page Path}}".replace(/\//g,"F_SLASH");
return parseInt(window.sessionStorage[page_path]);
}
</pre>

Then update the trigger to the variable is less than 2 as well as its existing conditions

== Cookie Consent Banner & Consent Mode V2 ==

For clients that don't have this setup & functioning already, its possible to setup a consent mode friendly cookie banner using the below JS:
Within the .zip, the file is /build/cookieconsent.js
[[Media:Cookieconsent-master.zip|Cookieconsent-master.zip]]

This file will need to be hosted somewhere that is accessible for the client site.
Once this has been done the below script will need to be added to the site, before GTM is loaded.
Make sure to swap cookieconsent.js with the location of the js file.

<pre>
<script src="cookieconsent.js"></script>
<script>
// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
window.CookieConsent.init({
categories: {
// Unique name.
necessary: {
needed: true,
wanted: true,
checked: true,
// Language settings for categories.
language: {
locale: {
en: {
name: 'Strictly Necessary Cookies',
description: 'Cookies Required for the site to function as intended.',
},
}
}
},
analytics: {
needed: false,
wanted: false,
checked: false,
language: {
locale: {
en: {
name: 'Analytics',
description: 'Cookies used by Google & other 3rd party analytics services.',
},
}
}
}
},
consentModeControls: {
ad_storage: 'analytics',
ad_user_data: 'analytics',
ad_personalization: 'analytics',
analytics_storage: 'analytics'
},
});
</script>
<script>
if (localStorage.getItem('consentMode') === null) {
gtag('consent', 'default', {
'ad_storage': 'denied',
'ad_user_data': 'denied',
'ad_personalization': 'denied',
'analytics_storage': 'denied'
});
} else {
gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')));
}
</script>
</pre>

Optional, but to make it look slightly better you could reduce the opacity:
<pre>
<style>
#cconsent-bar {
opacity: 0.9;
}
</style>
</pre>

Trill

2024-06-25T13:21:46Z

Aaron.trevellick: Created page with "Sign in from https://editor.trillwebsites.com/login<br /> Click on edit for the site to edit.</br> = Adding GTM to the Site = Click on SEO & Settings.<br /> Click on Head HTML.<br /> Add Tag Manager to the head section and the noscript to the body section & save it.<br />"

Sign in from https://editor.trillwebsites.com/login<br />
Click on edit for the site to edit.</br>

= Adding GTM to the Site =

Click on SEO & Settings.<br />
Click on Head HTML.<br />
Add Tag Manager to the head section and the noscript to the body section & save it.<br />

SuiteCRM 8.x

2024-04-04T11:26:35Z

Aaron.trevellick: /* development */

= Cron Jobs =
<pre>
sudo crontab -e -u www-data
</pre>

= Update =

Download and put file in:
<pre>
/tmp/package/upgrade/
</pre>

then run commands:
<pre>
./bin/console suitecrm:app:upgrade -t "SuiteCRM-<version>"
./bin/console suitecrm:app:upgrade-finalize -t "SuiteCRM-<version>"
</pre>

Then reset permissions

= Reset Permissions =
<pre>
find . -type d -not -perm 2755 -exec chmod 2755 {} \;
find . -type f -not -perm 0644 -exec chmod 0644 {} \;
find . ! -user www-data -exec chown www-data:www-data {} \;
chmod +x bin/console
</pre>

= development =
<pre>
sudo apt install npm
sudo npm install --global yarn
sudo npm install @angular/cli@16.2.13
</pre>

SuiteCRM 8.x

2024-04-04T11:26:27Z

Aaron.trevellick:

= Cron Jobs =
<pre>
sudo crontab -e -u www-data
</pre>

= Update =

Download and put file in:
<pre>
/tmp/package/upgrade/
</pre>

then run commands:
<pre>
./bin/console suitecrm:app:upgrade -t "SuiteCRM-<version>"
./bin/console suitecrm:app:upgrade-finalize -t "SuiteCRM-<version>"
</pre>

Then reset permissions

= Reset Permissions =
<pre>
find . -type d -not -perm 2755 -exec chmod 2755 {} \;
find . -type f -not -perm 0644 -exec chmod 0644 {} \;
find . ! -user www-data -exec chown www-data:www-data {} \;
chmod +x bin/console
</pre>

= development =
<pre>
sudo apt install npm
sudo npm install --global yarn
sudo npm install @angular/cli@16.2.13

OpenCart

2024-02-09T14:41:01Z

Aaron.trevellick: /* Conversion Value */

= Google Tag Manager =

Install Tag Manager.
*Note, the OCmod & VQmod scripts below insert the Tag Manager.

Main Template file:
<pre>
/catalog/view/theme/<<Theme Folder>>/template/common/header.tpl
</pre>

== Conversion URLS ==
Contact Thank-you URL:
<pre>
index.php?route=information/contact/success
</pre>

Sale Thank-you URL:
<pre>
index.php?route=checkout/success
</pre>

Account Creation URL:
<pre>
index.php?route=account/success
</pre>

== Conversion Value ==

The easiest and most reliable way to install the Conversion value tracking is via extensions that inject the code directly into core files.<br />
These are upgrade safe! (The worst that can happen is that a reference can change and the code is not injected)<br />
Before using these, it is best to check that the references are the same.<br />
<b>Change the GTM ID's in the scripts!</b>.<br />
<br /><br />
OpenCart 2.x uses .tpl files<br />
OpenCart 3.x uses .twig files<br />

=== VQmod ===
An OpenCart extension called VQmod is required to insert it into the code.
<pre>
vqmod/xml/get_total_to_success.xml
</pre>

[[Media:Get total to success.xml|Get_total_to_success.xml]]

=== OCmod ===

An OpenCart extension called OCmod is required to insert it into the code.

[[Media:Gtm.ocmod.zip|Gtm.ocmod.zip]]

= Feeds =

The Google Base extension will need to be installed and activated.

<pre>
http://docs.opencart.com/en-gb/extension/feed/
</pre>
<br />
The URL for the generated Feed:
<pre>
/index.php?route=feed/google_base
</pre>

SuiteCRM 8.x

2024-01-19T12:19:45Z

Aaron.trevellick:

SuiteCRM 8.x

2024-01-19T10:30:55Z

Aaron.trevellick:

SuiteCRM 8.x

2024-01-19T10:29:00Z

Aaron.trevellick:

Main Page

2024-01-19T10:26:09Z

Aaron.trevellick: /* Main Subjects */

== Login to make changes ==
You can login using firstname.surname as the username.<br />
The password is the same as the tools login.

== Main Subjects ==

Google Tag Manager Installation: [[Google Tag Manager]]<br />
Getting Feeds: [[Feeds]]<br /><br />

Let's Encrypt: [[LetsEncrypt]]

SuiteCRM 8.x: [[SuiteCRM_8.x]]

SuiteCRM 8.x

2024-01-19T10:25:41Z

Aaron.trevellick: /* Cron Jobs */

= Cron Jobs =
<pre>
sudo crontab -e -u www-data
</pre>

SuiteCRM 8.x

2024-01-19T10:25:36Z

Aaron.trevellick: Created page with "= Cron Jobs = <pre> sudo crontab -e -u www-data </pr>"

= Cron Jobs =
<pre>
sudo crontab -e -u www-data
</pr>

Magento 2.x

2024-01-09T10:04:25Z

Aaron.trevellick: /* Tag Installation */

= Tag Installation =
add it to:
<pre>
Content > Design > Configuration > Edit the Store View > Other Settings > HTML Head
</pre>
and
<pre>
Content > Design > Configuration > Edit the Store View > Other Settings > Footer > Miscellaneous HTML
</pre>

== Conversion Tracking ==

== Add to Head ==

Go to:

<pre>
Admin Panel > Content > Configuration
</pre>

= Clearing Cache =

Go to:

<pre>
Admin Panel > System > Cache Management
</pre>

Then Click "Clear Cache".

== Varnish Cache ==
Magento 2 May have Varnish Cache enabled.
This is a HTML Page Cache and caches on a page basis.
If this is enabled this needs to be cleared as well.

This will be located underneath the other cache options.

= Feeds =
All Major feed plugins for Magento 2.x are paid for plugins.

== WyoMind Data Feed Manager plugin ==

Go to:

<pre>
Admin Panel > WyoMind > Data Feed Manager > Data Feeds
</pre>

XML to Use:

<pre>
<item>

<g:id>{{product.sku}}</g:id>
<title>{{product.name}}</title>
<link>{{parent.url | product.url}}</link>
<description>{{parent.description output="strip_tags($self)" | product.description output="strip_tags($self)"}}</description>
<g:google_product_category>{{product.google_product_category | parent.google_product_category}}</g:google_product_category>

<g:product_type>{{parent.categories nth=0 | product.categories nth=0 }}</g:product_type>
<g:product_type>{{parent.categories nth=1 | product.categories nth=1 }}</g:product_type>
<g:product_type>{{parent.categories nth=2 | product.categories nth=2 }}</g:product_type>
<g:product_type>{{parent.categories nth=3 | product.categories nth=3 }}</g:product_type>
<g:product_type>{{parent.categories nth=4 | product.categories nth=4 }}</g:product_type>
<g:product_type>{{parent.categories nth=5 | product.categories nth=5 }}</g:product_type>
<g:product_type>{{parent.categories nth=6 | product.categories nth=6 }}</g:product_type>
<g:product_type>{{parent.categories nth=7 | product.categories nth=7 }}</g:product_type>
<g:product_type>{{parent.categories nth=8 | product.categories nth=8 }}</g:product_type>
<g:product_type>{{parent.categories nth=9 | product.categories nth=9 }}</g:product_type>

<g:image_link>{{product.image_link index="0" | parent.image_link index="0"}}</g:image_link>
<g:additional_image_link>{{product.image_link index="1" | parent.image_link index="1"}}</g:additional_image_link>
<g:additional_image_link>{{product.image_link index="2" | parent.image_link index="2"}}</g:additional_image_link>
<g:additional_image_link>{{product.image_link index="3" | parent.image_link index="3"}}</g:additional_image_link>
<g:additional_image_link>{{product.image_link index="4" | parent.image_link index="4"}}</g:additional_image_link>
<g:additional_image_link>{{product.image_link index="5" | parent.image_link index="5"}}</g:additional_image_link>


<g:availability>{{product.availability}}</g:availability>

<g:price>{{product.price currency=GBP vat_rate=0 suffix=" GBP"}}</g:price>
<g:sale_price>{{product.sale_price currency=GBP vat_rate=0 suffix=" GBP"}}</g:sale_price>
<g:sale_price_effective_date>{{product.sale_price_effective_date}}</g:sale_price_effective_date>

<g:condition>{{product.condition}}</g:condition>

<g:brand>{{product.brand}}</g:brand>
<g:gtin>{{product.upc}}</g:gtin>
<g:mpn>{{product.mpn}}</g:mpn>
<g:identifier_exists>TRUE</g:identifier_exists>


<g:gender>{{product.gender}}</g:gender>
<g:age_group>{{product.age_group}}</g:age_group>
<g:color>{{product.color}}</g:color>
<g:size>{{product.size}}</g:size>


<g:item_group_id>{{parent.sku}}</g:item_group_id>
<g:material>{{product.material}}</g:material>
<g:pattern>{{product.pattern}}</g:pattern>


<g:shipping_weight>{{product.weight output="float($self,2)" suffix="kg"}}</g:shipping_weight>


<g:custom_label_0>{{product.custom_label_0}}</g:custom_label_0>
<g:custom_label_1>{{product.custom_label_1}}</g:custom_label_1>
<g:custom_label_2>{{product.custom_label_2}}</g:custom_label_2>
<g:custom_label_3>{{product.custom_label_3}}</g:custom_label_3>
<g:custom_label_4>{{product.custom_label_4}}</g:custom_label_4>
</item>
</pre>

Magento 2.x

2024-01-09T10:04:04Z

Aaron.trevellick: /* Tag Installation */

= Tag Installation =
add it to:
Content > Design > Configuration > Edit the Store View > Other Settings > HTML Head
and
Content > Design > Configuration > Edit the Store View > Other Settings > Footer > Miscellaneous HTML

== Conversion Tracking ==

== Add to Head ==

Go to:

<pre>
Admin Panel > Content > Configuration
</pre>

= Clearing Cache =

Go to:

<pre>
Admin Panel > System > Cache Management
</pre>

Then Click "Clear Cache".

== Varnish Cache ==
Magento 2 May have Varnish Cache enabled.
This is a HTML Page Cache and caches on a page basis.
If this is enabled this needs to be cleared as well.

This will be located underneath the other cache options.

= Feeds =
All Major feed plugins for Magento 2.x are paid for plugins.

== WyoMind Data Feed Manager plugin ==

Go to:

<pre>
Admin Panel > WyoMind > Data Feed Manager > Data Feeds
</pre>

XML to Use:

<pre>
<item>

<g:id>{{product.sku}}</g:id>
<title>{{product.name}}</title>
<link>{{parent.url | product.url}}</link>
<description>{{parent.description output="strip_tags($self)" | product.description output="strip_tags($self)"}}</description>
<g:google_product_category>{{product.google_product_category | parent.google_product_category}}</g:google_product_category>

<g:product_type>{{parent.categories nth=0 | product.categories nth=0 }}</g:product_type>
<g:product_type>{{parent.categories nth=1 | product.categories nth=1 }}</g:product_type>
<g:product_type>{{parent.categories nth=2 | product.categories nth=2 }}</g:product_type>
<g:product_type>{{parent.categories nth=3 | product.categories nth=3 }}</g:product_type>
<g:product_type>{{parent.categories nth=4 | product.categories nth=4 }}</g:product_type>
<g:product_type>{{parent.categories nth=5 | product.categories nth=5 }}</g:product_type>
<g:product_type>{{parent.categories nth=6 | product.categories nth=6 }}</g:product_type>
<g:product_type>{{parent.categories nth=7 | product.categories nth=7 }}</g:product_type>
<g:product_type>{{parent.categories nth=8 | product.categories nth=8 }}</g:product_type>
<g:product_type>{{parent.categories nth=9 | product.categories nth=9 }}</g:product_type>

<g:image_link>{{product.image_link index="0" | parent.image_link index="0"}}</g:image_link>
<g:additional_image_link>{{product.image_link index="1" | parent.image_link index="1"}}</g:additional_image_link>
<g:additional_image_link>{{product.image_link index="2" | parent.image_link index="2"}}</g:additional_image_link>
<g:additional_image_link>{{product.image_link index="3" | parent.image_link index="3"}}</g:additional_image_link>
<g:additional_image_link>{{product.image_link index="4" | parent.image_link index="4"}}</g:additional_image_link>
<g:additional_image_link>{{product.image_link index="5" | parent.image_link index="5"}}</g:additional_image_link>


<g:availability>{{product.availability}}</g:availability>

<g:price>{{product.price currency=GBP vat_rate=0 suffix=" GBP"}}</g:price>
<g:sale_price>{{product.sale_price currency=GBP vat_rate=0 suffix=" GBP"}}</g:sale_price>
<g:sale_price_effective_date>{{product.sale_price_effective_date}}</g:sale_price_effective_date>

<g:condition>{{product.condition}}</g:condition>

<g:brand>{{product.brand}}</g:brand>
<g:gtin>{{product.upc}}</g:gtin>
<g:mpn>{{product.mpn}}</g:mpn>
<g:identifier_exists>TRUE</g:identifier_exists>


<g:gender>{{product.gender}}</g:gender>
<g:age_group>{{product.age_group}}</g:age_group>
<g:color>{{product.color}}</g:color>
<g:size>{{product.size}}</g:size>


<g:item_group_id>{{parent.sku}}</g:item_group_id>
<g:material>{{product.material}}</g:material>
<g:pattern>{{product.pattern}}</g:pattern>


<g:shipping_weight>{{product.weight output="float($self,2)" suffix="kg"}}</g:shipping_weight>


<g:custom_label_0>{{product.custom_label_0}}</g:custom_label_0>
<g:custom_label_1>{{product.custom_label_1}}</g:custom_label_1>
<g:custom_label_2>{{product.custom_label_2}}</g:custom_label_2>
<g:custom_label_3>{{product.custom_label_3}}</g:custom_label_3>
<g:custom_label_4>{{product.custom_label_4}}</g:custom_label_4>
</item>
</pre>

Main Page

2023-10-25T09:09:30Z

Aaron.trevellick: /* Main Subjects */

== Login to make changes ==
You can login using firstname.surname as the username.<br />
The password is the same as the tools login.

== Main Subjects ==

Google Tag Manager Installation: [[Google Tag Manager]]<br />
Getting Feeds: [[Feeds]]<br /><br />

Let's Encrypt: [[LetsEncrypt]]

LetsEncrypt

2023-10-25T09:08:46Z

Aaron.trevellick: