https://wiki.growth.agency/api.php?action=feedcontributions&feedformat=atom&user=Ben.robson 2026-04-14T04:28:11Z User contributions MediaWiki 1.43.5 https://wiki.growth.agency/index.php?title=Google_Tag_Manager&diff=440 2026-04-09T10:30:36Z

<p>Ben.robson: </p> <hr /> <div><br /> = GTM =<br /> &lt;pre&gt;<br /> https://tagmanager.google.com/<br /> &lt;/pre&gt;<br /> Google Tag Manager is a site container used for storing and triggering scripts.&lt;br /&gt;<br /> These then can be used for tracking.&lt;br /&gt;<br /> <br /> = Systems =<br /> <br /> Below are links to pages for different systems.<br /> These pages will include the methods used for installing the Tag Manager and the Conversion Value tracking.&lt;br /&gt; <br /> <br /> {| class=&quot;wikitable sortable&quot; style=&quot;width:100%&quot;<br /> |-<br /> ! Self-Host System !! On-site Builder Systems !! Chat Systems !! Other<br /> |-<br /> | [[CS-Cart]] || [[Bigcommerce]] || [[CollectChat]] || [[Arlo]]<br /> |-<br /> | [[Joomla]] || [[Ecwid]] || [[HubSpot Chat]] || [[Calendly]]<br /> |-<br /> | [[Magento 1.x]] || [[EKMPowershop]] || [[Jivo]] ||<br /> |-<br /> | [[Magento 2.x]] || [[MyshopBlocks]] || [[LiveChat]] ||<br /> |-<br /> | [[OpenCart]] || [[Roman Cart]] || [[PureChat]] ||<br /> |-<br /> | [[Prestashop]] || [[Shopify]] || [[Tawk]] ||<br /> |-<br /> | [[Tag Manager Installation (Wordpress)|Wordpress]] || [[Squarespace]] || [[Tidio]] || <br /> |-<br /> | [[X-Cart]] || [[Trill]] || [[ZenDesk]] || <br /> |-<br /> | [[Zen Cart]] || [[Wix]] || [[Zoho]] || <br /> |-<br /> ||| [[Yell]] || ||<br /> |}<br /> <br /> = Useful Info =<br /> <br /> == Generic jQuery Form Listener ==<br /> <br /> If there is no instructions in the wiki for a particular system and/or plugin and the form uses Ajax to submit,<br /> It may be worth trying this generic form listener.&lt;br /&gt;<br /> <br /> depending on what the jQuery is called when initialized you may need to change &quot;jQuery&quot; to &quot;$&quot; in the code below.&lt;br /&gt;<br /> <br /> create a custom HTML tag and change the index URL to what the URL is submitting to in the Ajax form.&lt;br /&gt;<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {<br /> if (~settings.url.indexOf(&quot;/contact/form/process/&quot;)) {<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> &lt;br /&gt;<br /> note: the form must be using the actual jQuery's Ajax method to perform the request for this to work<br /> <br /> == XML HTTP Form Listener ==<br /> <br /> If there is no instructions in the wiki for a particular system and/or plugin and the form submits using an XML HTTP request,<br /> It may be worth trying this generic form listener.&lt;br /&gt;<br /> <br /> Depending on the response content of the network request, the logic within addEventListener will need to be swapped to correctly validate the form submission&lt;br /&gt;<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> (function() {<br /> var origOpen = XMLHttpRequest.prototype.open;<br /> XMLHttpRequest.prototype.open = function() {<br /> this.addEventListener('load', function() {<br /> var response = JSON.parse(this.responseText);<br /> if ( typeof response.data != 'undefined' &amp;&amp; typeof response.data.submitForm != 'undefined' &amp;&amp; typeof response.data.submitForm != 'undefined' &amp;&amp; typeof response.data.submitForm.success != 'undefined' &amp;&amp; response.data.submitForm.success) {<br /> window.dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event':'contact-form-submitted'})<br /> }<br /> });<br /> origOpen.apply(this, arguments);<br /> };<br /> })();<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> &lt;br /&gt;<br /> <br /> == Generic Fetch Request Listener ==<br /> <br /> Gets the response for a fetch request, which can be used to validate form submissions.<br /> GTM doesn't allow the JS features that this requires to work, but changing the script type tricks GTM into thinking this isn't JS &amp; allows it to run anyway.<br /> <br /> &lt;pre&gt;<br /> &lt;script type=&quot;text/gtmscript&quot;&gt;<br /> if (typeof window.fetch != 'undefined') {<br /> const { fetch: originalFetch } = window;<br /> window.fetch = async (...args) =&gt; {<br /> let [resource, config ] = args;<br /> <br /> var response = await originalFetch(resource, config);<br /> <br /> if(resource.includes('/CHANGE-ME')) {<br /> let clone = response.clone();<br /> window.dataLayer=window.dataLayer||[];<br /> dataLayer.push({'event':'contact-form-submitted'});<br /> }<br /> <br /> return response;<br /> <br /> }<br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> &lt;/br&gt;<br /> <br /> == Unique Page Views ==<br /> <br /> You can track unique page views by storing a value in the sessionStorage variable.<br /> This can be useful for tracking forms where only a thank you page is available track.<br /> <br /> Create a tag that only fires on the page you want to track<br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var gtm_fs_count = 1;<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g, 'F_SLASH');<br /> if (sessionStorage[page_path]) {<br /> <br /> gtm_fs_count = gtm_fs_count+1;<br /> sessionStorage.setItem(page_path, gtm_fs_count);<br /> <br /> } else if(!sessionStorage[page_path]) {<br /> <br /> sessionStorage.setItem(page_path, gtm_fs_count) ;<br /> <br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Create a custom JS variable to retrieve the value:<br /> &lt;pre&gt;<br /> function() {<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g,&quot;F_SLASH&quot;);<br /> return parseInt(window.sessionStorage[page_path]); <br /> }<br /> &lt;/pre&gt;<br /> <br /> Then update the trigger to the variable is less than 2 as well as its existing conditions<br /> <br /> <br /> == Cookie Consent Banner &amp; Consent Mode V2 ==<br /> <br /> For clients that don't have this setup &amp; functioning already, its possible to setup a consent mode friendly cookie banner using the below JS:<br /> Within the .zip, the file is /build/cookieconsent.js<br /> [[Media:Cookieconsent-master.zip|Cookieconsent-master.zip]]<br /> <br /> This file will need to be hosted somewhere that is accessible for the client site.<br /> Once this has been done the below script will need to be added to the site, before GTM is loaded.<br /> Make sure to swap cookieconsent.js with the location of the js file.<br /> <br /> &lt;pre&gt;<br /> &lt;script src=&quot;cookieconsent.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // Define dataLayer and the gtag function.<br /> window.dataLayer = window.dataLayer || [];<br /> function gtag() { dataLayer.push(arguments); }<br /> window.CookieConsent.init({<br /> categories: {<br /> // Unique name.<br /> necessary: {<br /> needed: true,<br /> wanted: true,<br /> checked: true,<br /> // Language settings for categories.<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Strictly Necessary Cookies',<br /> description: 'Cookies Required for the site to function as intended.',<br /> },<br /> }<br /> }<br /> },<br /> analytics: {<br /> needed: false,<br /> wanted: false,<br /> checked: false,<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Analytics',<br /> description: 'Cookies used by Google &amp; other 3rd party analytics services.',<br /> },<br /> }<br /> }<br /> }<br /> },<br /> consentModeControls: {<br /> ad_storage: 'analytics',<br /> ad_user_data: 'analytics',<br /> ad_personalization: 'analytics',<br /> analytics_storage: 'analytics'<br /> },<br /> });<br /> &lt;/script&gt;<br /> &lt;script&gt;<br /> if (localStorage.getItem('consentMode') === null) {<br /> gtag('consent', 'default', {<br /> 'ad_storage': 'denied',<br /> 'ad_user_data': 'denied',<br /> 'ad_personalization': 'denied',<br /> 'analytics_storage': 'denied'<br /> });<br /> } else {<br /> gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')));<br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Optional, but to make it look slightly better you could reduce the opacity:<br /> &lt;pre&gt;<br /> &lt;style&gt;<br /> #cconsent-bar {<br /> opacity: 0.9;<br /> }<br /> &lt;/style&gt;<br /> &lt;/pre&gt;</div>

Ben.robson https://wiki.growth.agency/index.php?title=Google_Tag_Manager&diff=439 2026-04-09T10:29:37Z

<p>Ben.robson: </p> <hr /> <div><br /> = GTM =<br /> &lt;pre&gt;<br /> https://tagmanager.google.com/<br /> &lt;/pre&gt;<br /> Google Tag Manager is a site container used for storing and triggering scripts.&lt;br /&gt;<br /> These then can be used for tracking.&lt;br /&gt;<br /> <br /> = Systems =<br /> <br /> Below are links to pages for different systems.<br /> These pages will include the methods used for installing the Tag Manager and the Conversion Value tracking.&lt;br /&gt; <br /> <br /> {| class=&quot;wikitable sortable&quot; style=&quot;width:100%&quot;<br /> |-<br /> ! Self-Host System !! On-site Builder Systems !! Chat Systems !! Other<br /> |-<br /> | [[CS-Cart]] || [[Bigcommerce]] || [[CollectChat]] || [[Arlo]]<br /> |-<br /> | [[Joomla]] || [[Ecwid]] || [[HubSpot Chat]] || [[Calendly]]<br /> |-<br /> | [[Magento 1.x]] || [[EKMPowershop]] || [[Jivo]] ||<br /> |-<br /> | [[Magento 2.x]] || [[MyshopBlocks]] || [[LiveChat]] ||<br /> |-<br /> | [[OpenCart]] || [[Roman Cart]] || [[PureChat]] ||<br /> |-<br /> | [[Prestashop]] || [[Shopify]] || [[Tawk]] ||<br /> |-<br /> | [[Tag Manager Installation (Wordpress)|Wordpress]] || [[Squarespace]] || [[Tidio]] || <br /> |-<br /> | [[X-Cart]] || [[Trill]] || [[ZenDesk]] || <br /> |-<br /> | [[Zen Cart]] || [[Wix]] || [[Zoho]] || <br /> |-<br /> ||| [[Yell]] || ||<br /> |}<br /> <br /> = Useful Info =<br /> <br /> == Generic jQuery Form Listener ==<br /> <br /> If there is no instructions in the wiki for a particular system and/or plugin and the form uses Ajax to submit,<br /> It may be worth trying this generic form listener.&lt;br /&gt;<br /> <br /> depending on what the jQuery is called when initialized you may need to change &quot;jQuery&quot; to &quot;$&quot; in the code below.&lt;br /&gt;<br /> <br /> create a custom HTML tag and change the index URL to what the URL is submitting to in the Ajax form.&lt;br /&gt;<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {<br /> if (~settings.url.indexOf(&quot;/contact/form/process/&quot;)) {<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> &lt;br /&gt;<br /> note: the form must be using the actual jQuery's Ajax method to perform the request for this to work<br /> <br /> == XML HTTP Form Listener ==<br /> <br /> If there is no instructions in the wiki for a particular system and/or plugin and the form submits using an XML HTTP request,<br /> It may be worth trying this generic form listener.&lt;br /&gt;<br /> <br /> Depending on the response content of the network request, the logic within addEventListener will need to be swapped to correctly validate the form submission&lt;br /&gt;<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> (function() {<br /> var origOpen = XMLHttpRequest.prototype.open;<br /> XMLHttpRequest.prototype.open = function() {<br /> this.addEventListener('load', function() {<br /> var response = JSON.parse(this.responseText);<br /> if ( typeof response.data != 'undefined' &amp;&amp; typeof response.data.submitForm != 'undefined' &amp;&amp; typeof response.data.submitForm != 'undefined' &amp;&amp; typeof response.data.submitForm.success != 'undefined' &amp;&amp; response.data.submitForm.success) {<br /> window.dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event':'contact-form-submitted'})<br /> }<br /> });<br /> origOpen.apply(this, arguments);<br /> };<br /> })();<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> &lt;br /&gt;<br /> <br /> == Unique Page Views ==<br /> <br /> You can track unique page views by storing a value in the sessionStorage variable.<br /> This can be useful for tracking forms where only a thank you page is available track.<br /> <br /> Create a tag that only fires on the page you want to track<br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var gtm_fs_count = 1;<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g, 'F_SLASH');<br /> if (sessionStorage[page_path]) {<br /> <br /> gtm_fs_count = gtm_fs_count+1;<br /> sessionStorage.setItem(page_path, gtm_fs_count);<br /> <br /> } else if(!sessionStorage[page_path]) {<br /> <br /> sessionStorage.setItem(page_path, gtm_fs_count) ;<br /> <br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Create a custom JS variable to retrieve the value:<br /> &lt;pre&gt;<br /> function() {<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g,&quot;F_SLASH&quot;);<br /> return parseInt(window.sessionStorage[page_path]); <br /> }<br /> &lt;/pre&gt;<br /> <br /> Then update the trigger to the variable is less than 2 as well as its existing conditions<br /> <br /> <br /> == Cookie Consent Banner &amp; Consent Mode V2 ==<br /> <br /> For clients that don't have this setup &amp; functioning already, its possible to setup a consent mode friendly cookie banner using the below JS:<br /> Within the .zip, the file is /build/cookieconsent.js<br /> [[Media:Cookieconsent-master.zip|Cookieconsent-master.zip]]<br /> <br /> This file will need to be hosted somewhere that is accessible for the client site.<br /> Once this has been done the below script will need to be added to the site, before GTM is loaded.<br /> Make sure to swap cookieconsent.js with the location of the js file.<br /> <br /> &lt;pre&gt;<br /> &lt;script src=&quot;cookieconsent.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // Define dataLayer and the gtag function.<br /> window.dataLayer = window.dataLayer || [];<br /> function gtag() { dataLayer.push(arguments); }<br /> window.CookieConsent.init({<br /> categories: {<br /> // Unique name.<br /> necessary: {<br /> needed: true,<br /> wanted: true,<br /> checked: true,<br /> // Language settings for categories.<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Strictly Necessary Cookies',<br /> description: 'Cookies Required for the site to function as intended.',<br /> },<br /> }<br /> }<br /> },<br /> analytics: {<br /> needed: false,<br /> wanted: false,<br /> checked: false,<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Analytics',<br /> description: 'Cookies used by Google &amp; other 3rd party analytics services.',<br /> },<br /> }<br /> }<br /> }<br /> },<br /> consentModeControls: {<br /> ad_storage: 'analytics',<br /> ad_user_data: 'analytics',<br /> ad_personalization: 'analytics',<br /> analytics_storage: 'analytics'<br /> },<br /> });<br /> &lt;/script&gt;<br /> &lt;script&gt;<br /> if (localStorage.getItem('consentMode') === null) {<br /> gtag('consent', 'default', {<br /> 'ad_storage': 'denied',<br /> 'ad_user_data': 'denied',<br /> 'ad_personalization': 'denied',<br /> 'analytics_storage': 'denied'<br /> });<br /> } else {<br /> gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')));<br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Optional, but to make it look slightly better you could reduce the opacity:<br /> &lt;pre&gt;<br /> &lt;style&gt;<br /> #cconsent-bar {<br /> opacity: 0.9;<br /> }<br /> &lt;/style&gt;<br /> &lt;/pre&gt;<br /> <br /> == Generic Fetch Request Listener ==<br /> <br /> Gets the response for a fetch request, which can be used to validate form submissions.<br /> GTM doesn't allow the JS features that this requires to work, but changing the script type tricks GTM into thinking this isn't JS &amp; allows it to run anyway.<br /> <br /> &lt;pre&gt;<br /> &lt;script type=&quot;text/gtmscript&quot;&gt;<br /> if (typeof window.fetch != 'undefined') {<br /> const { fetch: originalFetch } = window;<br /> window.fetch = async (...args) =&gt; {<br /> let [resource, config ] = args;<br /> <br /> var response = await originalFetch(resource, config);<br /> <br /> if(resource.includes('/CHANGE-ME')) {<br /> let clone = response.clone();<br /> window.dataLayer=window.dataLayer||[];<br /> dataLayer.push({'event':'contact-form-submitted'});<br /> }<br /> <br /> return response;<br /> <br /> }<br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;</div>

Ben.robson https://wiki.growth.agency/index.php?title=Tag_Manager_Installation_(Wordpress)&diff=438 2025-12-16T14:06:23Z

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

Ben.robson https://wiki.growth.agency/index.php?title=Shopify&diff=437 2025-12-12T11:13:24Z

<p>Ben.robson: /* Shopify Pixel */</p> <hr /> <div>= Shopify Pixel =<br /> <br /> The old method is due to be deprecated in Dec-24, so this will only be available until then. &lt;/br&gt;<br /> New Shopify sites also appear to have checkout scripts disabled by default. &lt;/br&gt;<br /> The new method for adding tracking to Shopify sites is through a Custom Pixel. &lt;/br&gt;<br /> <br /> Based on Shopifys documentation:&lt;/br&gt;<br /> [https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial Creating a GTM pixel]&lt;/br&gt;<br /> [https://shopify.dev/docs/api/web-pixels-api/pixel-privacy Pixel privacy documentation]&lt;/br&gt;<br /> <br /> - Go to Settings &gt; Customer Events &gt; Add Custom Pixel.<br /> - Set the Customer Privacy settings to Not required.<br /> - Set Data Sale to Data collected does not qualify as data sale.<br /> - Add the below code.<br /> <br /> &lt;pre&gt;<br /> // Define dataLayer and the gtag function.<br /> window.dataLayer = window.dataLayer || [];<br /> function gtag(){dataLayer.push(arguments);}<br /> <br /> //Initialize GTM tag<br /> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':<br /> new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],<br /> j=d.createElement(s),dl=l!='dataLayer'?'&amp;l='+l:'';j.async=true;j.src=<br /> 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);<br /> })(window,document,'script','dataLayer', 'GTM-XXXXXX');<br /> <br /> let customerPrivacyStatus = init.customerPrivacy;<br /> let ad_permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );<br /> let analytics_permission = ( customerPrivacyStatus.analyticsProcessingAllowed ? 'granted' : 'denied' );<br /> <br /> //Google Consent Mode v2<br /> gtag('consent', 'default', {<br /> 'ad_storage': ad_permission,<br /> 'analytics_storage': analytics_permission,<br /> 'ad_user_data': ad_permission,<br /> 'ad_personalization': ad_permission,<br /> });<br /> <br /> // Use the customerPrivacy Standard API to subscribe to consent collected events and update the status<br /> api.customerPrivacy.subscribe('visitorConsentCollected', (event) =&gt; {<br /> window.dataLayer = window.dataLayer || [];<br /> let customerPrivacyStatus = event.customerPrivacy;<br /> let ad_permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );<br /> let analytics_permission = ( customerPrivacyStatus.analyticsProcessingAllowed ? 'granted' : 'denied' );<br /> <br /> gtag('consent', 'update', {<br /> 'ad_storage': ad_permission,<br /> 'analytics_storage': analytics_permission ,<br /> 'ad_user_data': ad_permission,<br /> 'ad_personalization': ad_permission,<br /> }); <br /> });<br /> <br /> //subscribe to events<br /> analytics.subscribe(&quot;checkout_completed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_completed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> &lt;/pre&gt;<br /> <br /> Other Ecommerce events that could be useful:<br /> <br /> &lt;pre&gt;<br /> <br /> analytics.subscribe(&quot;payment_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;payment_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_shipping_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_shipping_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_address_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_address_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_contact_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_contact_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_started&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_started&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;product_added_to_cart&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;product_added_to_cart&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> price: event.data?.cartLine?.merchandise?.price?.amount,<br /> currency: event.data?.cartLine?.cost?.totalAmount?.currencyCode,<br /> product_id: event.data?.cartLine?.merchandise?.product?.id + '_' + event.data?.cartLine?.merchandise?.id,<br /> product_title: event.data?.cartLine?.merchandise?.product?.title,<br /> quantity: event.data?.cartLine?.quantity,<br /> total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;cart_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;cart_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> total_cost: event.data?.cart?.cost?.totalAmount?.amount,<br /> quantity: event.data?.cart?.totalQuantity,<br /> cart_id: event.data?.cart?.id,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;page_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;page_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> page_title: event.context.document.title,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;product_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;product_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> product_id: event.data?.productVariant?.product?.id + '_' + event.data?.productVariant?.id,<br /> product_title: event.data?.productVariant?.title,<br /> product_sku: event.data?.productVariant?.sku,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;search_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;search_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> query: event.data?.searchResult?.query,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;collection_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;collection_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> collection_id: event.data?.collection?.id,<br /> collection_title: event.data?.collection?.title,<br /> });<br /> });<br /> &lt;/pre&gt;<br /> <br /> Custom events (for example contact form submissions) have to be sent by adding an event to the liquid files:<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> document.addEventListener(&quot;DOMContentLoaded&quot;, function (event) {<br /> Shopify.analytics.publish('EVENT_NAME_HERE');<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Which can then be accessed within the pixel with the same logic as the standard events:<br /> <br /> &lt;pre&gt;<br /> analytics.subscribe(&quot;EVENT_NAME_HERE&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> 'event': 'EVENT_NAME'<br /> }); <br /> });<br /> <br /> &lt;/pre&gt;<br /> <br /> The below can also be added to have access to the dataLayer in console, which should be useful for debugging/testing:<br /> <br /> &lt;pre&gt;<br /> analytics.subscribe(&quot;check_datalayer&quot;, (event) =&gt; {<br /> console.log(dataLayer);<br /> })<br /> &lt;/pre&gt;<br /> <br /> This can then be called from console with the following:<br /> &lt;pre&gt;<br /> Shopify.analytics.publish('check_datalayer');<br /> &lt;/pre&gt;<br /> <br /> == File Location ==<br /> <br /> The Shopify pixel loads the JS into a JS file which is loaded by the browser.&lt;br /&gt;<br /> The location of this can be built by using data from the home web page.&lt;br /&gt;&lt;br /&gt;<br /> <br /> &lt;pre&gt;<br /> <br /> https://&lt;&lt;domain&gt;&gt;/wpm@&lt;&lt;wpm_id&gt;&gt;/custom/web-pixel-&lt;&lt;pixel_id&gt;&gt;@&lt;&lt;script_version&gt;&gt;/sandbox/modern/<br /> <br /> 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.<br /> pixel_id - this is found via the JSON below that is on the site<br /> script_version - this is found via the JSON below that is on the site<br /> <br /> {&quot;id&quot;:&quot;&lt;&lt;pixel_id &gt;&gt;&quot;,&quot;eventPayloadVersion&quot;:&quot;1&quot;,&quot;runtimeContext&quot;:&quot;LAX&quot;,&quot;scriptVersion&quot;:&quot;&lt;&lt;script_version&gt;&gt;&quot;,&quot;type&quot;:&quot;CUSTOM&quot;,&quot;privacyPurposes&quot;:[],&quot;name&quot;:&quot;GTM + Value Tracking&quot;}<br /> <br /> &lt;/pre&gt;<br /> <br /> = Tag Manager =<br /> <br /> Add Tag Manager to theme:<br /> Modify Theme<br /> &lt;pre&gt;<br /> &quot;online store&quot; -&gt; &quot;...&quot; or &quot;Actions&quot; -&gt; &quot;edit HTML / CSS&quot;<br /> &lt;/pre&gt;<br /> <br /> Modify theme.liquid<br /> <br /> Google Tag Manager will also need to be added to Checkout's additional settings to track conversions<br /> <br /> == Conversion Tracking Code ==<br /> <br /> Google Tag Manager will also need to be added to Checkout's additional settings to track conversions<br /> <br /> In &quot;settings&quot; -&gt; &quot;checkout&quot; -&gt; &quot;additional settings&quot;<br /> <br /> &lt;pre&gt;<br /> {% if first_time_accessed %}<br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'order_id' : '{{ order_number }}', 'order_value' : '{{ total_price | money_without_currency }}', 'event' : 'order-submitted'});<br /> &lt;/script&gt;<br /> {% endif %}<br /> &lt;/pre&gt;<br /> <br /> <br /> *Note: if testing without &quot;{% if first_time_accessed %}&quot; on a order that has already converted, the order ID will not show<br /> <br /> to add product ids add within the code above:<br /> <br /> &lt;pre&gt;<br /> dataLayer.push({ 'product_ids' : [{% for line_item in line_items %}{{ line_item.product_id }}{% unless forloop.last == true %}, {% endunless %}{% endfor %}] });<br /> &lt;/pre&gt;<br /> <br /> <br /> *Note: This was made for dynamic re-marketing, for analytics 4 go to the section below<br /> <br /> === Tracking Contact Page ===<br /> <br /> In the snippets section, go to &quot;form-status.liquid&quot; or &quot;contact.liquid&quot;.<br /> <br /> Find the snippet that shows the success text ( in-between {%- if form.posted_successfully? -%}{%- endif -%} ),<br /> Then add:<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> = Product Feed =<br /> <br /> The below App is free to use &amp; should do most of the setup for you:&lt;br /&gt;<br /> https://apps.shopify.com/google&lt;br /&gt;<br /> <br /> After installing the App a Google account with access to the Merchant Centre needs to sign in.&lt;br /&gt;<br /> DO NOT sign in using one of our Master email addresses, instead you can either:&lt;br /&gt;<br /> - Ask the client to do this, if they don't have access to Merchant Center we can try to add them.<br /> - Create a new email address that only has access to this Merchant Center &amp; sign in with this instead.<br /> <br /> Then the below needs to be done, in this order otherwise it won't send the products through &amp; you'll have to start from scratch:&lt;br /&gt;<br /> - Make sure the Store requirements are met &amp; confirm these, if they aren't then send this back to the client so they can add whats necessary.<br /> - Under Product Feed, start the setup process.<br /> - Connect the Merchant Centre on the settings tab.<br /> - Specify the Target Market &amp; set the Shipping settings to Manual (These will need to be added to Merchant Center by someone afterwards).<br /> If this has been done correctly then the products should now be available within the Merchant Center account.&lt;br /&gt;&lt;br /&gt;<br /> <br /> Below is for Reference, Do not use!&lt;br /&gt;<br /> Alternatively, Shopify does provide you with the Product feed URL for your store.&lt;br /&gt;<br /> To access this, you will need to append .atom to either all of your collections or to a specific collection URL.&lt;br /&gt;<br /> &lt;br /&gt;<br /> For example:<br /> &lt;br /&gt;<br /> &lt;pre&gt;<br /> &quot;yourstorename.com/collections/all.atom&quot;<br /> &quot;yourstorename.com/collections/collectionname.atom&quot;<br /> &lt;/pre&gt;<br /> <br /> = Events for Analytics 4 =<br /> <br /> View Item: &lt;br /&gt;<br /> Add this to product-template.liquid<br /> <br /> &lt;pre&gt;<br /> <br /> &lt;script&gt;<br /> window.dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: &quot;view_item&quot;,<br /> ecommerce: {<br /> currency: &quot;GBP&quot;,<br /> items: [<br /> {<br /> item_id: {{ product.id }},<br /> item_name: &quot;{{ product.title }}&quot;,<br /> {% if product.vendor %} item_brand: &quot;{{ product.vendor }}&quot;, {% endif %}<br /> price: {{ product.price | money_without_currency }},<br /> {% if product.type %} item_category: &quot;{{ product.type }}&quot;, {% endif %}<br /> google_business_vertical: &quot;retail&quot;,<br /> id: &quot;{{ product.id }}&quot;<br /> }<br /> ]<br /> },<br /> });<br /> &lt;/script&gt;<br /> <br /> &lt;/pre&gt;<br /> <br /> Add To Cart:&lt;br /&gt;<br /> The below listener can be added to GTM, this should send add_to_cart events to GTM for you.<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings, data ) {<br /> if (~settings.url.indexOf(&quot;/cart/add&quot;)) { <br /> <br /> var items = [];<br /> items.push({<br /> item_id: data.product_id,<br /> item_name: data.title,<br /> item_category: data.product_type,<br /> price: ( data.price / 100 ),<br /> google_business_vertical: &quot;retail&quot;,<br /> id: data.product_id<br /> });<br /> <br /> if (typeof data.brand != &quot;undefined&quot;) items[0]['item_brand'] = data.brand;<br /> <br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: 'add_to_cart',<br /> ecommerce: {<br /> currency: &quot;GBP&quot;, <br /> items: items<br /> }<br /> });<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Purchases:&lt;br /&gt;<br /> Add this to the Settings &gt; Checkout &gt; Additional Scripts section.<br /> <br /> &lt;pre&gt;<br /> {% if first_time_accessed %}<br /> &lt;script&gt;<br /> var items = [];<br /> var temp = {};<br /> <br /> {% for line_item in line_items %}<br /> temp = {<br /> item_id: {{ line_item.product.id }},<br /> item_name: &quot;{{ line_item.title }}&quot;,<br /> price: {{ line_item.final_line_price | money_without_currency }},<br /> google_business_vertical: &quot;retail&quot;,<br /> id: {{ line_item.product.id }},<br /> quantity: {{ line_item.quantity }}<br /> <br /> };<br /> <br /> {% if line_item.product.type %} <br /> temp['item_category'] = &quot;{{ line_item.product.type }}&quot;;<br /> {% endif %}<br /> <br /> {% if line_item.product.vendor %} <br /> temp['item_brand'] = &quot;{{ line_item.product.vendor }}&quot;;<br /> {% endif %}<br /> <br /> items.push(temp);<br /> <br /> {% endfor %}<br /> <br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: 'purchase',<br /> ecommerce: {<br /> affiliation: 'Online Store',<br /> transaction_id: '{{ order_number }}',<br /> value: '{{ total_price | money_without_currency }}',<br /> tax: '{{ tax_price | money_without_currency }}',<br /> shipping: '{{ shipping_price | money_without_currency}}',<br /> currency: &quot;GBP&quot;, <br /> items: items<br /> }<br /> });<br /> <br /> <br /> &lt;/script&gt;<br /> {% endif %}<br /> &lt;/pre&gt;<br /> <br /> The Event Tag &amp; Variables can be setup with the below template:&lt;br /&gt;<br /> [[File:Shopify-ga4-container-elements.json]]<br /> <br /> = Shopify Links =<br /> Cheat sheet for Variables: &lt;br /&gt;<br /> https://www.shopify.co.uk/partners/shopify-cheat-sheet</div>

Ben.robson https://wiki.growth.agency/index.php?title=Shopify&diff=436 2025-12-10T15:44:07Z

<p>Ben.robson: </p> <hr /> <div>= Shopify Pixel =<br /> <br /> The old method is due to be deprecated in Dec-24, so this will only be available until then. &lt;/br&gt;<br /> New Shopify sites also appear to have checkout scripts disabled by default. &lt;/br&gt;<br /> The new method for adding tracking to Shopify sites is through a Custom Pixel. &lt;/br&gt;<br /> <br /> Based on Shopifys documentation:&lt;/br&gt;<br /> [https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial Creating a GTM pixel]&lt;/br&gt;<br /> [https://shopify.dev/docs/api/web-pixels-api/pixel-privacy Pixel privacy documentation]&lt;/br&gt;<br /> <br /> The &lt;noscript&gt; section needs to be added to the &lt;body&gt; through theme.liquid via Online Store &gt; Edit.&lt;/br&gt;&lt;/br&gt;<br /> <br /> - Go to Settings &gt; Customer Events &gt; Add Custom Pixel.<br /> - Set the Customer Privacy settings to Not required.<br /> - Set Data Sale to Data collected does not qualify as data sale.<br /> - Add the below code.<br /> <br /> &lt;pre&gt;<br /> // Define dataLayer and the gtag function.<br /> window.dataLayer = window.dataLayer || [];<br /> function gtag(){dataLayer.push(arguments);}<br /> <br /> //Initialize GTM tag<br /> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':<br /> new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],<br /> j=d.createElement(s),dl=l!='dataLayer'?'&amp;l='+l:'';j.async=true;j.src=<br /> 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);<br /> })(window,document,'script','dataLayer', 'GTM-XXXXXX');<br /> <br /> let customerPrivacyStatus = init.customerPrivacy;<br /> let ad_permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );<br /> let analytics_permission = ( customerPrivacyStatus.analyticsProcessingAllowed ? 'granted' : 'denied' );<br /> <br /> //Google Consent Mode v2<br /> gtag('consent', 'default', {<br /> 'ad_storage': ad_permission,<br /> 'analytics_storage': analytics_permission,<br /> 'ad_user_data': ad_permission,<br /> 'ad_personalization': ad_permission,<br /> });<br /> <br /> // Use the customerPrivacy Standard API to subscribe to consent collected events and update the status<br /> api.customerPrivacy.subscribe('visitorConsentCollected', (event) =&gt; {<br /> window.dataLayer = window.dataLayer || [];<br /> let customerPrivacyStatus = event.customerPrivacy;<br /> let ad_permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );<br /> let analytics_permission = ( customerPrivacyStatus.analyticsProcessingAllowed ? 'granted' : 'denied' );<br /> <br /> gtag('consent', 'update', {<br /> 'ad_storage': ad_permission,<br /> 'analytics_storage': analytics_permission ,<br /> 'ad_user_data': ad_permission,<br /> 'ad_personalization': ad_permission,<br /> }); <br /> });<br /> <br /> //subscribe to events<br /> analytics.subscribe(&quot;checkout_completed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_completed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> &lt;/pre&gt;<br /> <br /> Other Ecommerce events that could be useful:<br /> <br /> &lt;pre&gt;<br /> <br /> analytics.subscribe(&quot;payment_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;payment_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_shipping_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_shipping_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_address_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_address_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_contact_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_contact_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_started&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_started&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;product_added_to_cart&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;product_added_to_cart&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> price: event.data?.cartLine?.merchandise?.price?.amount,<br /> currency: event.data?.cartLine?.cost?.totalAmount?.currencyCode,<br /> product_id: event.data?.cartLine?.merchandise?.product?.id + '_' + event.data?.cartLine?.merchandise?.id,<br /> product_title: event.data?.cartLine?.merchandise?.product?.title,<br /> quantity: event.data?.cartLine?.quantity,<br /> total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;cart_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;cart_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> total_cost: event.data?.cart?.cost?.totalAmount?.amount,<br /> quantity: event.data?.cart?.totalQuantity,<br /> cart_id: event.data?.cart?.id,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;page_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;page_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> page_title: event.context.document.title,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;product_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;product_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> product_id: event.data?.productVariant?.product?.id + '_' + event.data?.productVariant?.id,<br /> product_title: event.data?.productVariant?.title,<br /> product_sku: event.data?.productVariant?.sku,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;search_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;search_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> query: event.data?.searchResult?.query,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;collection_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;collection_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> collection_id: event.data?.collection?.id,<br /> collection_title: event.data?.collection?.title,<br /> });<br /> });<br /> &lt;/pre&gt;<br /> <br /> Custom events (for example contact form submissions) have to be sent by adding an event to the liquid files:<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> document.addEventListener(&quot;DOMContentLoaded&quot;, function (event) {<br /> Shopify.analytics.publish('EVENT_NAME_HERE');<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Which can then be accessed within the pixel with the same logic as the standard events:<br /> <br /> &lt;pre&gt;<br /> analytics.subscribe(&quot;EVENT_NAME_HERE&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> 'event': 'EVENT_NAME'<br /> }); <br /> });<br /> <br /> &lt;/pre&gt;<br /> <br /> The below can also be added to have access to the dataLayer in console, which should be useful for debugging/testing:<br /> <br /> &lt;pre&gt;<br /> analytics.subscribe(&quot;check_datalayer&quot;, (event) =&gt; {<br /> console.log(dataLayer);<br /> })<br /> &lt;/pre&gt;<br /> <br /> This can then be called from console with the following:<br /> &lt;pre&gt;<br /> Shopify.analytics.publish('check_datalayer');<br /> &lt;/pre&gt;<br /> <br /> == File Location ==<br /> <br /> The Shopify pixel loads the JS into a JS file which is loaded by the browser.&lt;br /&gt;<br /> The location of this can be built by using data from the home web page.&lt;br /&gt;&lt;br /&gt;<br /> <br /> &lt;pre&gt;<br /> <br /> https://&lt;&lt;domain&gt;&gt;/wpm@&lt;&lt;wpm_id&gt;&gt;/custom/web-pixel-&lt;&lt;pixel_id&gt;&gt;@&lt;&lt;script_version&gt;&gt;/sandbox/modern/<br /> <br /> 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.<br /> pixel_id - this is found via the JSON below that is on the site<br /> script_version - this is found via the JSON below that is on the site<br /> <br /> {&quot;id&quot;:&quot;&lt;&lt;pixel_id &gt;&gt;&quot;,&quot;eventPayloadVersion&quot;:&quot;1&quot;,&quot;runtimeContext&quot;:&quot;LAX&quot;,&quot;scriptVersion&quot;:&quot;&lt;&lt;script_version&gt;&gt;&quot;,&quot;type&quot;:&quot;CUSTOM&quot;,&quot;privacyPurposes&quot;:[],&quot;name&quot;:&quot;GTM + Value Tracking&quot;}<br /> <br /> &lt;/pre&gt;<br /> <br /> = Tag Manager =<br /> <br /> Add Tag Manager to theme:<br /> Modify Theme<br /> &lt;pre&gt;<br /> &quot;online store&quot; -&gt; &quot;...&quot; or &quot;Actions&quot; -&gt; &quot;edit HTML / CSS&quot;<br /> &lt;/pre&gt;<br /> <br /> Modify theme.liquid<br /> <br /> Google Tag Manager will also need to be added to Checkout's additional settings to track conversions<br /> <br /> == Conversion Tracking Code ==<br /> <br /> Google Tag Manager will also need to be added to Checkout's additional settings to track conversions<br /> <br /> In &quot;settings&quot; -&gt; &quot;checkout&quot; -&gt; &quot;additional settings&quot;<br /> <br /> &lt;pre&gt;<br /> {% if first_time_accessed %}<br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'order_id' : '{{ order_number }}', 'order_value' : '{{ total_price | money_without_currency }}', 'event' : 'order-submitted'});<br /> &lt;/script&gt;<br /> {% endif %}<br /> &lt;/pre&gt;<br /> <br /> <br /> *Note: if testing without &quot;{% if first_time_accessed %}&quot; on a order that has already converted, the order ID will not show<br /> <br /> to add product ids add within the code above:<br /> <br /> &lt;pre&gt;<br /> dataLayer.push({ 'product_ids' : [{% for line_item in line_items %}{{ line_item.product_id }}{% unless forloop.last == true %}, {% endunless %}{% endfor %}] });<br /> &lt;/pre&gt;<br /> <br /> <br /> *Note: This was made for dynamic re-marketing, for analytics 4 go to the section below<br /> <br /> === Tracking Contact Page ===<br /> <br /> In the snippets section, go to &quot;form-status.liquid&quot; or &quot;contact.liquid&quot;.<br /> <br /> Find the snippet that shows the success text ( in-between {%- if form.posted_successfully? -%}{%- endif -%} ),<br /> Then add:<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> = Product Feed =<br /> <br /> The below App is free to use &amp; should do most of the setup for you:&lt;br /&gt;<br /> https://apps.shopify.com/google&lt;br /&gt;<br /> <br /> After installing the App a Google account with access to the Merchant Centre needs to sign in.&lt;br /&gt;<br /> DO NOT sign in using one of our Master email addresses, instead you can either:&lt;br /&gt;<br /> - Ask the client to do this, if they don't have access to Merchant Center we can try to add them.<br /> - Create a new email address that only has access to this Merchant Center &amp; sign in with this instead.<br /> <br /> Then the below needs to be done, in this order otherwise it won't send the products through &amp; you'll have to start from scratch:&lt;br /&gt;<br /> - Make sure the Store requirements are met &amp; confirm these, if they aren't then send this back to the client so they can add whats necessary.<br /> - Under Product Feed, start the setup process.<br /> - Connect the Merchant Centre on the settings tab.<br /> - Specify the Target Market &amp; set the Shipping settings to Manual (These will need to be added to Merchant Center by someone afterwards).<br /> If this has been done correctly then the products should now be available within the Merchant Center account.&lt;br /&gt;&lt;br /&gt;<br /> <br /> Below is for Reference, Do not use!&lt;br /&gt;<br /> Alternatively, Shopify does provide you with the Product feed URL for your store.&lt;br /&gt;<br /> To access this, you will need to append .atom to either all of your collections or to a specific collection URL.&lt;br /&gt;<br /> &lt;br /&gt;<br /> For example:<br /> &lt;br /&gt;<br /> &lt;pre&gt;<br /> &quot;yourstorename.com/collections/all.atom&quot;<br /> &quot;yourstorename.com/collections/collectionname.atom&quot;<br /> &lt;/pre&gt;<br /> <br /> = Events for Analytics 4 =<br /> <br /> View Item: &lt;br /&gt;<br /> Add this to product-template.liquid<br /> <br /> &lt;pre&gt;<br /> <br /> &lt;script&gt;<br /> window.dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: &quot;view_item&quot;,<br /> ecommerce: {<br /> currency: &quot;GBP&quot;,<br /> items: [<br /> {<br /> item_id: {{ product.id }},<br /> item_name: &quot;{{ product.title }}&quot;,<br /> {% if product.vendor %} item_brand: &quot;{{ product.vendor }}&quot;, {% endif %}<br /> price: {{ product.price | money_without_currency }},<br /> {% if product.type %} item_category: &quot;{{ product.type }}&quot;, {% endif %}<br /> google_business_vertical: &quot;retail&quot;,<br /> id: &quot;{{ product.id }}&quot;<br /> }<br /> ]<br /> },<br /> });<br /> &lt;/script&gt;<br /> <br /> &lt;/pre&gt;<br /> <br /> Add To Cart:&lt;br /&gt;<br /> The below listener can be added to GTM, this should send add_to_cart events to GTM for you.<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings, data ) {<br /> if (~settings.url.indexOf(&quot;/cart/add&quot;)) { <br /> <br /> var items = [];<br /> items.push({<br /> item_id: data.product_id,<br /> item_name: data.title,<br /> item_category: data.product_type,<br /> price: ( data.price / 100 ),<br /> google_business_vertical: &quot;retail&quot;,<br /> id: data.product_id<br /> });<br /> <br /> if (typeof data.brand != &quot;undefined&quot;) items[0]['item_brand'] = data.brand;<br /> <br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: 'add_to_cart',<br /> ecommerce: {<br /> currency: &quot;GBP&quot;, <br /> items: items<br /> }<br /> });<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Purchases:&lt;br /&gt;<br /> Add this to the Settings &gt; Checkout &gt; Additional Scripts section.<br /> <br /> &lt;pre&gt;<br /> {% if first_time_accessed %}<br /> &lt;script&gt;<br /> var items = [];<br /> var temp = {};<br /> <br /> {% for line_item in line_items %}<br /> temp = {<br /> item_id: {{ line_item.product.id }},<br /> item_name: &quot;{{ line_item.title }}&quot;,<br /> price: {{ line_item.final_line_price | money_without_currency }},<br /> google_business_vertical: &quot;retail&quot;,<br /> id: {{ line_item.product.id }},<br /> quantity: {{ line_item.quantity }}<br /> <br /> };<br /> <br /> {% if line_item.product.type %} <br /> temp['item_category'] = &quot;{{ line_item.product.type }}&quot;;<br /> {% endif %}<br /> <br /> {% if line_item.product.vendor %} <br /> temp['item_brand'] = &quot;{{ line_item.product.vendor }}&quot;;<br /> {% endif %}<br /> <br /> items.push(temp);<br /> <br /> {% endfor %}<br /> <br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: 'purchase',<br /> ecommerce: {<br /> affiliation: 'Online Store',<br /> transaction_id: '{{ order_number }}',<br /> value: '{{ total_price | money_without_currency }}',<br /> tax: '{{ tax_price | money_without_currency }}',<br /> shipping: '{{ shipping_price | money_without_currency}}',<br /> currency: &quot;GBP&quot;, <br /> items: items<br /> }<br /> });<br /> <br /> <br /> &lt;/script&gt;<br /> {% endif %}<br /> &lt;/pre&gt;<br /> <br /> The Event Tag &amp; Variables can be setup with the below template:&lt;br /&gt;<br /> [[File:Shopify-ga4-container-elements.json]]<br /> <br /> = Shopify Links =<br /> Cheat sheet for Variables: &lt;br /&gt;<br /> https://www.shopify.co.uk/partners/shopify-cheat-sheet</div>

Ben.robson https://wiki.growth.agency/index.php?title=Tag_Manager_Installation_(Wordpress)&diff=435 2025-12-10T14:16:02Z

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

Ben.robson https://wiki.growth.agency/index.php?title=Google_Tag_Manager&diff=432 2025-07-29T08:46:16Z

<p>Ben.robson: /* XML HTTP Form Listener */</p> <hr /> <div><br /> = GTM =<br /> &lt;pre&gt;<br /> https://tagmanager.google.com/<br /> &lt;/pre&gt;<br /> Google Tag Manager is a site container used for storing and triggering scripts.&lt;br /&gt;<br /> These then can be used for tracking.&lt;br /&gt;<br /> <br /> = Systems =<br /> <br /> Below are links to pages for different systems.<br /> These pages will include the methods used for installing the Tag Manager and the Conversion Value tracking.&lt;br /&gt; <br /> <br /> {| class=&quot;wikitable sortable&quot; style=&quot;width:100%&quot;<br /> |-<br /> ! Self-Host System !! On-site Builder Systems !! Chat Systems !! Other<br /> |-<br /> | [[CS-Cart]] || [[Bigcommerce]] || [[CollectChat]] || [[Arlo]]<br /> |-<br /> | [[Joomla]] || [[Ecwid]] || [[HubSpot Chat]] || [[Calendly]]<br /> |-<br /> | [[Magento 1.x]] || [[EKMPowershop]] || [[Jivo]] ||<br /> |-<br /> | [[Magento 2.x]] || [[MyshopBlocks]] || [[LiveChat]] ||<br /> |-<br /> | [[OpenCart]] || [[Roman Cart]] || [[PureChat]] ||<br /> |-<br /> | [[Prestashop]] || [[Shopify]] || [[Tawk]] ||<br /> |-<br /> | [[Tag Manager Installation (Wordpress)|Wordpress]] || [[Squarespace]] || [[Tidio]] || <br /> |-<br /> | [[X-Cart]] || [[Trill]] || [[ZenDesk]] || <br /> |-<br /> | [[Zen Cart]] || [[Wix]] || [[Zoho]] || <br /> |-<br /> ||| [[Yell]] || ||<br /> |}<br /> <br /> = Useful Info =<br /> <br /> == Generic jQuery Form Listener ==<br /> <br /> If there is no instructions in the wiki for a particular system and/or plugin and the form uses Ajax to submit,<br /> It may be worth trying this generic form listener.&lt;br /&gt;<br /> <br /> depending on what the jQuery is called when initialized you may need to change &quot;jQuery&quot; to &quot;$&quot; in the code below.&lt;br /&gt;<br /> <br /> create a custom HTML tag and change the index URL to what the URL is submitting to in the Ajax form.&lt;br /&gt;<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {<br /> if (~settings.url.indexOf(&quot;/contact/form/process/&quot;)) {<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> &lt;br /&gt;<br /> note: the form must be using the actual jQuery's Ajax method to perform the request for this to work<br /> <br /> == XML HTTP Form Listener ==<br /> <br /> If there is no instructions in the wiki for a particular system and/or plugin and the form submits using an XML HTTP request,<br /> It may be worth trying this generic form listener.&lt;br /&gt;<br /> <br /> Depending on the response content of the network request, the logic within addEventListener will need to be swapped to correctly validate the form submission&lt;br /&gt;<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> (function() {<br /> var origOpen = XMLHttpRequest.prototype.open;<br /> XMLHttpRequest.prototype.open = function() {<br /> this.addEventListener('load', function() {<br /> var response = JSON.parse(this.responseText);<br /> if ( typeof response.data != 'undefined' &amp;&amp; typeof response.data.submitForm != 'undefined' &amp;&amp; typeof response.data.submitForm != 'undefined' &amp;&amp; typeof response.data.submitForm.success != 'undefined' &amp;&amp; response.data.submitForm.success) {<br /> window.dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event':'contact-form-submitted'})<br /> }<br /> });<br /> origOpen.apply(this, arguments);<br /> };<br /> })();<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> &lt;br /&gt;<br /> <br /> == Unique Page Views ==<br /> <br /> You can track unique page views by storing a value in the sessionStorage variable.<br /> This can be useful for tracking forms where only a thank you page is available track.<br /> <br /> Create a tag that only fires on the page you want to track<br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var gtm_fs_count = 1;<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g, 'F_SLASH');<br /> if (sessionStorage[page_path]) {<br /> <br /> gtm_fs_count = gtm_fs_count+1;<br /> sessionStorage.setItem(page_path, gtm_fs_count);<br /> <br /> } else if(!sessionStorage[page_path]) {<br /> <br /> sessionStorage.setItem(page_path, gtm_fs_count) ;<br /> <br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Create a custom JS variable to retrieve the value:<br /> &lt;pre&gt;<br /> function() {<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g,&quot;F_SLASH&quot;);<br /> return parseInt(window.sessionStorage[page_path]); <br /> }<br /> &lt;/pre&gt;<br /> <br /> Then update the trigger to the variable is less than 2 as well as its existing conditions<br /> <br /> <br /> == Cookie Consent Banner &amp; Consent Mode V2 ==<br /> <br /> For clients that don't have this setup &amp; functioning already, its possible to setup a consent mode friendly cookie banner using the below JS:<br /> Within the .zip, the file is /build/cookieconsent.js<br /> [[Media:Cookieconsent-master.zip|Cookieconsent-master.zip]]<br /> <br /> This file will need to be hosted somewhere that is accessible for the client site.<br /> Once this has been done the below script will need to be added to the site, before GTM is loaded.<br /> Make sure to swap cookieconsent.js with the location of the js file.<br /> <br /> &lt;pre&gt;<br /> &lt;script src=&quot;cookieconsent.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // Define dataLayer and the gtag function.<br /> window.dataLayer = window.dataLayer || [];<br /> function gtag() { dataLayer.push(arguments); }<br /> window.CookieConsent.init({<br /> categories: {<br /> // Unique name.<br /> necessary: {<br /> needed: true,<br /> wanted: true,<br /> checked: true,<br /> // Language settings for categories.<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Strictly Necessary Cookies',<br /> description: 'Cookies Required for the site to function as intended.',<br /> },<br /> }<br /> }<br /> },<br /> analytics: {<br /> needed: false,<br /> wanted: false,<br /> checked: false,<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Analytics',<br /> description: 'Cookies used by Google &amp; other 3rd party analytics services.',<br /> },<br /> }<br /> }<br /> }<br /> },<br /> consentModeControls: {<br /> ad_storage: 'analytics',<br /> ad_user_data: 'analytics',<br /> ad_personalization: 'analytics',<br /> analytics_storage: 'analytics'<br /> },<br /> });<br /> &lt;/script&gt;<br /> &lt;script&gt;<br /> if (localStorage.getItem('consentMode') === null) {<br /> gtag('consent', 'default', {<br /> 'ad_storage': 'denied',<br /> 'ad_user_data': 'denied',<br /> 'ad_personalization': 'denied',<br /> 'analytics_storage': 'denied'<br /> });<br /> } else {<br /> gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')));<br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Optional, but to make it look slightly better you could reduce the opacity:<br /> &lt;pre&gt;<br /> &lt;style&gt;<br /> #cconsent-bar {<br /> opacity: 0.9;<br /> }<br /> &lt;/style&gt;<br /> &lt;/pre&gt;</div>

Ben.robson https://wiki.growth.agency/index.php?title=Google_Tag_Manager&diff=431 2025-07-29T08:45:39Z

<p>Ben.robson: /* Useful Info */</p> <hr /> <div><br /> = GTM =<br /> &lt;pre&gt;<br /> https://tagmanager.google.com/<br /> &lt;/pre&gt;<br /> Google Tag Manager is a site container used for storing and triggering scripts.&lt;br /&gt;<br /> These then can be used for tracking.&lt;br /&gt;<br /> <br /> = Systems =<br /> <br /> Below are links to pages for different systems.<br /> These pages will include the methods used for installing the Tag Manager and the Conversion Value tracking.&lt;br /&gt; <br /> <br /> {| class=&quot;wikitable sortable&quot; style=&quot;width:100%&quot;<br /> |-<br /> ! Self-Host System !! On-site Builder Systems !! Chat Systems !! Other<br /> |-<br /> | [[CS-Cart]] || [[Bigcommerce]] || [[CollectChat]] || [[Arlo]]<br /> |-<br /> | [[Joomla]] || [[Ecwid]] || [[HubSpot Chat]] || [[Calendly]]<br /> |-<br /> | [[Magento 1.x]] || [[EKMPowershop]] || [[Jivo]] ||<br /> |-<br /> | [[Magento 2.x]] || [[MyshopBlocks]] || [[LiveChat]] ||<br /> |-<br /> | [[OpenCart]] || [[Roman Cart]] || [[PureChat]] ||<br /> |-<br /> | [[Prestashop]] || [[Shopify]] || [[Tawk]] ||<br /> |-<br /> | [[Tag Manager Installation (Wordpress)|Wordpress]] || [[Squarespace]] || [[Tidio]] || <br /> |-<br /> | [[X-Cart]] || [[Trill]] || [[ZenDesk]] || <br /> |-<br /> | [[Zen Cart]] || [[Wix]] || [[Zoho]] || <br /> |-<br /> ||| [[Yell]] || ||<br /> |}<br /> <br /> = Useful Info =<br /> <br /> == Generic jQuery Form Listener ==<br /> <br /> If there is no instructions in the wiki for a particular system and/or plugin and the form uses Ajax to submit,<br /> It may be worth trying this generic form listener.&lt;br /&gt;<br /> <br /> depending on what the jQuery is called when initialized you may need to change &quot;jQuery&quot; to &quot;$&quot; in the code below.&lt;br /&gt;<br /> <br /> create a custom HTML tag and change the index URL to what the URL is submitting to in the Ajax form.&lt;br /&gt;<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {<br /> if (~settings.url.indexOf(&quot;/contact/form/process/&quot;)) {<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> &lt;br /&gt;<br /> note: the form must be using the actual jQuery's Ajax method to perform the request for this to work<br /> <br /> == XML HTTP Form Listener ==<br /> <br /> If there is no instructions in the wiki for a particular system and/or plugin and the form submits using an XML HTTP request,<br /> It may be worth trying this generic form listener.&lt;br /&gt;<br /> <br /> Depending on the response content of the network request, the logic within addEventListener will need to be swapped to correctly validate the form submission&lt;br /&gt;<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> (function() {<br /> var origOpen = XMLHttpRequest.prototype.open;<br /> XMLHttpRequest.prototype.open = function() {<br /> this.addEventListener('load', function() {<br /> var response = JSON.parse(this.responseText);<br /> if ( typeof response.data != 'undefined' &amp;&amp; typeof response.data.submitForm != 'undefined' &amp;&amp; typeof response.data.submitForm != 'undefined' &amp;&amp; typeof response.data.submitForm.success != 'undefined' &amp;&amp; response.data.submitForm.success) {<br /> window.dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event':'contact-form-submitted'})<br /> }<br /> });<br /> origOpen.apply(this, arguments);<br /> };<br /> })();<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> &lt;br /&gt;<br /> note: the form must be using the actual jQuery's Ajax method to perform the request for this to work<br /> <br /> == Unique Page Views ==<br /> <br /> You can track unique page views by storing a value in the sessionStorage variable.<br /> This can be useful for tracking forms where only a thank you page is available track.<br /> <br /> Create a tag that only fires on the page you want to track<br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var gtm_fs_count = 1;<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g, 'F_SLASH');<br /> if (sessionStorage[page_path]) {<br /> <br /> gtm_fs_count = gtm_fs_count+1;<br /> sessionStorage.setItem(page_path, gtm_fs_count);<br /> <br /> } else if(!sessionStorage[page_path]) {<br /> <br /> sessionStorage.setItem(page_path, gtm_fs_count) ;<br /> <br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Create a custom JS variable to retrieve the value:<br /> &lt;pre&gt;<br /> function() {<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g,&quot;F_SLASH&quot;);<br /> return parseInt(window.sessionStorage[page_path]); <br /> }<br /> &lt;/pre&gt;<br /> <br /> Then update the trigger to the variable is less than 2 as well as its existing conditions<br /> <br /> <br /> == Cookie Consent Banner &amp; Consent Mode V2 ==<br /> <br /> For clients that don't have this setup &amp; functioning already, its possible to setup a consent mode friendly cookie banner using the below JS:<br /> Within the .zip, the file is /build/cookieconsent.js<br /> [[Media:Cookieconsent-master.zip|Cookieconsent-master.zip]]<br /> <br /> This file will need to be hosted somewhere that is accessible for the client site.<br /> Once this has been done the below script will need to be added to the site, before GTM is loaded.<br /> Make sure to swap cookieconsent.js with the location of the js file.<br /> <br /> &lt;pre&gt;<br /> &lt;script src=&quot;cookieconsent.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // Define dataLayer and the gtag function.<br /> window.dataLayer = window.dataLayer || [];<br /> function gtag() { dataLayer.push(arguments); }<br /> window.CookieConsent.init({<br /> categories: {<br /> // Unique name.<br /> necessary: {<br /> needed: true,<br /> wanted: true,<br /> checked: true,<br /> // Language settings for categories.<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Strictly Necessary Cookies',<br /> description: 'Cookies Required for the site to function as intended.',<br /> },<br /> }<br /> }<br /> },<br /> analytics: {<br /> needed: false,<br /> wanted: false,<br /> checked: false,<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Analytics',<br /> description: 'Cookies used by Google &amp; other 3rd party analytics services.',<br /> },<br /> }<br /> }<br /> }<br /> },<br /> consentModeControls: {<br /> ad_storage: 'analytics',<br /> ad_user_data: 'analytics',<br /> ad_personalization: 'analytics',<br /> analytics_storage: 'analytics'<br /> },<br /> });<br /> &lt;/script&gt;<br /> &lt;script&gt;<br /> if (localStorage.getItem('consentMode') === null) {<br /> gtag('consent', 'default', {<br /> 'ad_storage': 'denied',<br /> 'ad_user_data': 'denied',<br /> 'ad_personalization': 'denied',<br /> 'analytics_storage': 'denied'<br /> });<br /> } else {<br /> gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')));<br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Optional, but to make it look slightly better you could reduce the opacity:<br /> &lt;pre&gt;<br /> &lt;style&gt;<br /> #cconsent-bar {<br /> opacity: 0.9;<br /> }<br /> &lt;/style&gt;<br /> &lt;/pre&gt;</div>

Ben.robson https://wiki.growth.agency/index.php?title=Shopify&diff=423 2025-04-24T11:22:52Z

<p>Ben.robson: /* Shopify Pixel */</p> <hr /> <div>= Shopify Pixel =<br /> <br /> The old method is due to be deprecated in Dec-24, so this will only be available until then. &lt;/br&gt;<br /> New Shopify sites also appear to have checkout scripts disabled by default. &lt;/br&gt;<br /> The new method for adding tracking to Shopify sites is through a Custom Pixel. &lt;/br&gt;<br /> <br /> Based on Shopifys documentation:&lt;/br&gt;<br /> [https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial Creating a GTM pixel]&lt;/br&gt;<br /> [https://shopify.dev/docs/api/web-pixels-api/pixel-privacy Pixel privacy documentation]&lt;/br&gt;<br /> <br /> The &lt;noscript&gt; section needs to be added to the &lt;body&gt; through theme.liquid via Online Store &gt; Edit.&lt;/br&gt;&lt;/br&gt;<br /> <br /> - Go to Settings &gt; Customer Events &gt; Add Custom Pixel.<br /> - Set the Customer Privacy settings to Not required.<br /> - Set Data Sale to Data collected does not qualify as data sale.<br /> - Add the below code.<br /> <br /> &lt;pre&gt;<br /> // Define dataLayer and the gtag function.<br /> window.dataLayer = window.dataLayer || [];<br /> function gtag(){dataLayer.push(arguments);}<br /> <br /> //Initialize GTM tag<br /> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':<br /> new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],<br /> j=d.createElement(s),dl=l!='dataLayer'?'&amp;l='+l:'';j.async=true;j.src=<br /> 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);<br /> })(window,document,'script','dataLayer', 'GTM-XXXXXX');<br /> <br /> let customerPrivacyStatus = init.customerPrivacy;<br /> let ad_permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );<br /> let analytics_permission = ( customerPrivacyStatus.analyticsProcessingAllowed ? 'granted' : 'denied' );<br /> <br /> //Google Consent Mode v2<br /> gtag('consent', 'default', {<br /> 'ad_storage': ad_permission,<br /> 'analytics_storage': analytics_permission,<br /> 'ad_user_data': ad_permission,<br /> 'ad_personalization': ad_permission,<br /> });<br /> <br /> // Use the customerPrivacy Standard API to subscribe to consent collected events and update the status<br /> api.customerPrivacy.subscribe('visitorConsentCollected', (event) =&gt; {<br /> window.dataLayer = window.dataLayer || [];<br /> let customerPrivacyStatus = event.customerPrivacy;<br /> let ad_permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );<br /> let analytics_permission = ( customerPrivacyStatus.analyticsProcessingAllowed ? 'granted' : 'denied' );<br /> <br /> gtag('consent', 'update', {<br /> 'ad_storage': ad_permission,<br /> 'analytics_storage': analytics_permission ,<br /> 'ad_user_data': ad_permission,<br /> 'ad_personalization': ad_permission,<br /> }); <br /> });<br /> <br /> //subscribe to events<br /> analytics.subscribe(&quot;checkout_completed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_completed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> &lt;/pre&gt;<br /> <br /> Other Ecommerce events that could be useful:<br /> <br /> &lt;pre&gt;<br /> <br /> analytics.subscribe(&quot;payment_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;payment_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_shipping_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_shipping_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_address_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_address_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_contact_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_contact_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_started&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_started&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;product_added_to_cart&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;product_added_to_cart&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> price: event.data?.cartLine?.merchandise?.price?.amount,<br /> currency: event.data?.cartLine?.cost?.totalAmount?.currencyCode,<br /> product_id: event.data?.cartLine?.merchandise?.product?.id + '_' + event.data?.cartLine?.merchandise?.id,<br /> product_title: event.data?.cartLine?.merchandise?.product?.title,<br /> quantity: event.data?.cartLine?.quantity,<br /> total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,<br /> test: event.data,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;cart_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;cart_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> total_cost: event.data?.cart?.cost?.totalAmount?.amount,<br /> quantity: event.data?.cart?.totalQuantity,<br /> cart_id: event.data?.cart?.id,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;page_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;page_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> page_title: event.context.document.title,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;product_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;product_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> product_id: event.data?.productVariant?.product?.id + '_' + event.data?.productVariant?.id,<br /> product_title: event.data?.productVariant?.title,<br /> product_sku: event.data?.productVariant?.sku,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;search_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;search_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> query: event.data?.searchResult?.query,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;collection_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;collection_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> collection_id: event.data?.collection?.id,<br /> collection_title: event.data?.collection?.title,<br /> });<br /> });<br /> &lt;/pre&gt;<br /> <br /> Custom events (for example contact form submissions) have to be sent by adding an event to the liquid files:<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> document.addEventListener(&quot;DOMContentLoaded&quot;, function (event) {<br /> Shopify.analytics.publish('EVENT_NAME_HERE');<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Which can then be accessed within the pixel with the same logic as the standard events:<br /> <br /> &lt;pre&gt;<br /> analytics.subscribe(&quot;EVENT_NAME_HERE&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> 'event': 'EVENT_NAME'<br /> }); <br /> });<br /> <br /> &lt;/pre&gt;<br /> <br /> The below can also be added to have access to the dataLayer in console, which should be useful for debugging/testing:<br /> <br /> &lt;pre&gt;<br /> analytics.subscribe(&quot;check_datalayer&quot;, (event) =&gt; {<br /> console.log(dataLayer);<br /> })<br /> &lt;/pre&gt;<br /> <br /> This can then be called from console with the following:<br /> &lt;pre&gt;<br /> Shopify.analytics.publish('check_datalayer');<br /> &lt;/pre&gt;<br /> <br /> == File Location ==<br /> <br /> The Shopify pixel loads the JS into a JS file which is loaded by the browser.&lt;br /&gt;<br /> The location of this can be built by using data from the home web page.&lt;br /&gt;&lt;br /&gt;<br /> <br /> &lt;pre&gt;<br /> <br /> https://&lt;&lt;domain&gt;&gt;/wpm@&lt;&lt;wpm_id&gt;&gt;/custom/web-pixel-&lt;&lt;pixel_id&gt;&gt;@&lt;&lt;script_version&gt;&gt;/sandbox/modern/<br /> <br /> 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.<br /> pixel_id - this is found via the JSON below that is on the site<br /> script_version - this is found via the JSON below that is on the site<br /> <br /> {&quot;id&quot;:&quot;&lt;&lt;pixel_id &gt;&gt;&quot;,&quot;eventPayloadVersion&quot;:&quot;1&quot;,&quot;runtimeContext&quot;:&quot;LAX&quot;,&quot;scriptVersion&quot;:&quot;&lt;&lt;script_version&gt;&gt;&quot;,&quot;type&quot;:&quot;CUSTOM&quot;,&quot;privacyPurposes&quot;:[],&quot;name&quot;:&quot;GTM + Value Tracking&quot;}<br /> <br /> &lt;/pre&gt;<br /> <br /> = Tag Manager =<br /> <br /> Add Tag Manager to theme:<br /> Modify Theme<br /> &lt;pre&gt;<br /> &quot;online store&quot; -&gt; &quot;...&quot; or &quot;Actions&quot; -&gt; &quot;edit HTML / CSS&quot;<br /> &lt;/pre&gt;<br /> <br /> Modify theme.liquid<br /> <br /> Google Tag Manager will also need to be added to Checkout's additional settings to track conversions<br /> <br /> == Conversion Tracking Code ==<br /> <br /> Google Tag Manager will also need to be added to Checkout's additional settings to track conversions<br /> <br /> In &quot;settings&quot; -&gt; &quot;checkout&quot; -&gt; &quot;additional settings&quot;<br /> <br /> &lt;pre&gt;<br /> {% if first_time_accessed %}<br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'order_id' : '{{ order_number }}', 'order_value' : '{{ total_price | money_without_currency }}', 'event' : 'order-submitted'});<br /> &lt;/script&gt;<br /> {% endif %}<br /> &lt;/pre&gt;<br /> <br /> <br /> *Note: if testing without &quot;{% if first_time_accessed %}&quot; on a order that has already converted, the order ID will not show<br /> <br /> to add product ids add within the code above:<br /> <br /> &lt;pre&gt;<br /> dataLayer.push({ 'product_ids' : [{% for line_item in line_items %}{{ line_item.product_id }}{% unless forloop.last == true %}, {% endunless %}{% endfor %}] });<br /> &lt;/pre&gt;<br /> <br /> <br /> *Note: This was made for dynamic re-marketing, for analytics 4 go to the section below<br /> <br /> === Tracking Contact Page ===<br /> <br /> In the snippets section, go to &quot;form-status.liquid&quot; or &quot;contact.liquid&quot;.<br /> <br /> Find the snippet that shows the success text ( in-between {%- if form.posted_successfully? -%}{%- endif -%} ),<br /> Then add:<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> = Product Feed =<br /> <br /> The below App is free to use &amp; should do most of the setup for you:&lt;br /&gt;<br /> https://apps.shopify.com/google&lt;br /&gt;<br /> <br /> After installing the App a Google account with access to the Merchant Centre needs to sign in.&lt;br /&gt;<br /> DO NOT sign in using one of our Master email addresses, instead you can either:&lt;br /&gt;<br /> - Ask the client to do this, if they don't have access to Merchant Center we can try to add them.<br /> - Create a new email address that only has access to this Merchant Center &amp; sign in with this instead.<br /> <br /> Then the below needs to be done, in this order otherwise it won't send the products through &amp; you'll have to start from scratch:&lt;br /&gt;<br /> - Make sure the Store requirements are met &amp; confirm these, if they aren't then send this back to the client so they can add whats necessary.<br /> - Under Product Feed, start the setup process.<br /> - Connect the Merchant Centre on the settings tab.<br /> - Specify the Target Market &amp; set the Shipping settings to Manual (These will need to be added to Merchant Center by someone afterwards).<br /> If this has been done correctly then the products should now be available within the Merchant Center account.&lt;br /&gt;&lt;br /&gt;<br /> <br /> Below is for Reference, Do not use!&lt;br /&gt;<br /> Alternatively, Shopify does provide you with the Product feed URL for your store.&lt;br /&gt;<br /> To access this, you will need to append .atom to either all of your collections or to a specific collection URL.&lt;br /&gt;<br /> &lt;br /&gt;<br /> For example:<br /> &lt;br /&gt;<br /> &lt;pre&gt;<br /> &quot;yourstorename.com/collections/all.atom&quot;<br /> &quot;yourstorename.com/collections/collectionname.atom&quot;<br /> &lt;/pre&gt;<br /> <br /> = Events for Analytics 4 =<br /> <br /> View Item: &lt;br /&gt;<br /> Add this to product-template.liquid<br /> <br /> &lt;pre&gt;<br /> <br /> &lt;script&gt;<br /> window.dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: &quot;view_item&quot;,<br /> ecommerce: {<br /> currency: &quot;GBP&quot;,<br /> items: [<br /> {<br /> item_id: {{ product.id }},<br /> item_name: &quot;{{ product.title }}&quot;,<br /> {% if product.vendor %} item_brand: &quot;{{ product.vendor }}&quot;, {% endif %}<br /> price: {{ product.price | money_without_currency }},<br /> {% if product.type %} item_category: &quot;{{ product.type }}&quot;, {% endif %}<br /> google_business_vertical: &quot;retail&quot;,<br /> id: &quot;{{ product.id }}&quot;<br /> }<br /> ]<br /> },<br /> });<br /> &lt;/script&gt;<br /> <br /> &lt;/pre&gt;<br /> <br /> Add To Cart:&lt;br /&gt;<br /> The below listener can be added to GTM, this should send add_to_cart events to GTM for you.<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings, data ) {<br /> if (~settings.url.indexOf(&quot;/cart/add&quot;)) { <br /> <br /> var items = [];<br /> items.push({<br /> item_id: data.product_id,<br /> item_name: data.title,<br /> item_category: data.product_type,<br /> price: ( data.price / 100 ),<br /> google_business_vertical: &quot;retail&quot;,<br /> id: data.product_id<br /> });<br /> <br /> if (typeof data.brand != &quot;undefined&quot;) items[0]['item_brand'] = data.brand;<br /> <br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: 'add_to_cart',<br /> ecommerce: {<br /> currency: &quot;GBP&quot;, <br /> items: items<br /> }<br /> });<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Purchases:&lt;br /&gt;<br /> Add this to the Settings &gt; Checkout &gt; Additional Scripts section.<br /> <br /> &lt;pre&gt;<br /> {% if first_time_accessed %}<br /> &lt;script&gt;<br /> var items = [];<br /> var temp = {};<br /> <br /> {% for line_item in line_items %}<br /> temp = {<br /> item_id: {{ line_item.product.id }},<br /> item_name: &quot;{{ line_item.title }}&quot;,<br /> price: {{ line_item.final_line_price | money_without_currency }},<br /> google_business_vertical: &quot;retail&quot;,<br /> id: {{ line_item.product.id }},<br /> quantity: {{ line_item.quantity }}<br /> <br /> };<br /> <br /> {% if line_item.product.type %} <br /> temp['item_category'] = &quot;{{ line_item.product.type }}&quot;;<br /> {% endif %}<br /> <br /> {% if line_item.product.vendor %} <br /> temp['item_brand'] = &quot;{{ line_item.product.vendor }}&quot;;<br /> {% endif %}<br /> <br /> items.push(temp);<br /> <br /> {% endfor %}<br /> <br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: 'purchase',<br /> ecommerce: {<br /> affiliation: 'Online Store',<br /> transaction_id: '{{ order_number }}',<br /> value: '{{ total_price | money_without_currency }}',<br /> tax: '{{ tax_price | money_without_currency }}',<br /> shipping: '{{ shipping_price | money_without_currency}}',<br /> currency: &quot;GBP&quot;, <br /> items: items<br /> }<br /> });<br /> <br /> <br /> &lt;/script&gt;<br /> {% endif %}<br /> &lt;/pre&gt;<br /> <br /> The Event Tag &amp; Variables can be setup with the below template:&lt;br /&gt;<br /> [[File:Shopify-ga4-container-elements.json]]<br /> <br /> = Shopify Links =<br /> Cheat sheet for Variables: &lt;br /&gt;<br /> https://www.shopify.co.uk/partners/shopify-cheat-sheet</div>

Ben.robson https://wiki.growth.agency/index.php?title=Google_Tag_Manager_for_WordPress_(Plugin)&diff=404 2024-10-04T12:56:27Z

<p>Ben.robson: /* New Tracking */</p> <hr /> <div>Google Tag Manager for WordPress is a plugin that allows easy installation and tracking for the GTM.<br /> <br /> https://wordpress.org/plugins/duracelltomi-google-tag-manager/<br /> <br /> == Events ==<br /> <br /> === New Tracking ===<br /> event:&lt;br /&gt;<br /> purchase<br /> <br /> Variables:&lt;br /&gt;<br /> ecommerce.value&lt;br /&gt;<br /> ecommerce.transaction_id<br /> <br /> === Classic tracking ===<br /> event:&lt;br /&gt;<br /> gtm4wp.orderCompleted<br /> <br /> transactionProducts.sku<br /> <br /> Example Data From GTM4WP Plugin:<br /> &lt;pre&gt;<br /> dataLayer = [{<br /> &quot;event&quot;:&quot;transaction&quot;,<br /> &quot;transactionId&quot;:&quot;100002486&quot;,<br /> &quot;transactionDate&quot;:&quot;2015-09-03&quot;,<br /> &quot;transactionTotal&quot;:295,<br /> &quot;transactionShipping&quot;:0,<br /> &quot;transactionTax&quot;:26.82,<br /> &quot;transactionPaymentType&quot;:&quot;Rechnung&quot;,<br /> &quot;transactionCurrency&quot;:&quot;EUR&quot;,<br /> &quot;transactionShippingMethod&quot;:&quot;tablerate&quot;,<br /> &quot;transactionProducts&quot;:[<br /> {<br /> &quot;name&quot;:&quot;Handelsvertretergesetz&quot;,<br /> &quot;sku&quot;:&quot;9783700760344&quot;,<br /> &quot;category&quot;:&quot;Buch&quot;,<br /> &quot;price&quot;:113.64,<br /> &quot;quantity&quot;:1<br /> },<br /> {<br /> &quot;name&quot;:&quot;Steuerrecht&quot;,<br /> &quot;sku&quot;:&quot;9783700759294&quot;,<br /> &quot;category&quot;:&quot;Kodex&quot;,<br /> &quot;price&quot;:77.27,<br /> &quot;quantity&quot;:2<br /> }<br /> ]<br /> }];<br /> &lt;/pre&gt;<br /> <br /> === Enhanced tracking ===<br /> &lt;pre&gt;<br /> https://gtm4wp.com/how-to-articles/how-to-setup-enhanced-ecommerce-tracking<br /> &lt;/pre&gt;<br /> <br /> events:<br /> &lt;pre&gt;<br /> gtm4wp.orderCompletedEEC<br /> <br /> ecommerce.purchase.actionField.id<br /> ecommerce.purchase.actionField.revenue<br /> &lt;/pre&gt;<br /> <br /> Example<br /> &lt;pre&gt;<br /> dataLayer.push({<br /> 'ecommerce': {<br /> 'purchase': {<br /> 'actionField': {<br /> 'id': '3546321',<br /> 'affiliation': 'test',<br /> 'transactionTotal': '540.00',<br /> 'transactionTax': '93.72',<br /> 'revenue': '446.28',<br /> 'currency': 'EUR'<br /> },<br /> 'products': [{<br /> 'name': 'test',<br /> 'sku': '4',<br /> 'price': '446.28',<br /> 'category': 'test',<br /> 'quantity': 1<br /> }]<br /> }<br /> }<br /> });<br /> &lt;/pre&gt;<br /> <br /> === CF7 tracking ===<br /> event:&lt;br /&gt;<br /> gtm4wp.contactForm7Submitted<br /> <br /> === Analytics 4: Ecommerce Tracking ===<br /> If Enhanced Ecommerce is enabled, then you can use the below Tag Manager template to setup Analytics 4 Ecommerce tracking for you.&lt;br /&gt;<br /> Just make sure to test it in case it becomes outdated!&lt;br /&gt;<br /> <br /> [[File:Gtm4wp-ga4-container-elements.json]]<br /> <br /> Source: https://gtm4wp.com/how-to-articles/how-to-setup-enhanced-ecommerce-tracking-google-analytics-4-ga4-version&lt;br /&gt;<br /> <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.</div>

Ben.robson https://wiki.growth.agency/index.php?title=Google_Tag_Manager_for_WordPress_(Plugin)&diff=403 2024-10-04T12:56:08Z

<p>Ben.robson: /* Events */</p> <hr /> <div>Google Tag Manager for WordPress is a plugin that allows easy installation and tracking for the GTM.<br /> <br /> https://wordpress.org/plugins/duracelltomi-google-tag-manager/<br /> <br /> == Events ==<br /> <br /> === New Tracking ===<br /> event:&lt;br /&gt;<br /> purchase<br /> <br /> Variables:&lt;br /&gt;<br /> ecommerce.value<br /> ecommerce.transaction_id<br /> <br /> === Classic tracking ===<br /> event:&lt;br /&gt;<br /> gtm4wp.orderCompleted<br /> <br /> transactionProducts.sku<br /> <br /> Example Data From GTM4WP Plugin:<br /> &lt;pre&gt;<br /> dataLayer = [{<br /> &quot;event&quot;:&quot;transaction&quot;,<br /> &quot;transactionId&quot;:&quot;100002486&quot;,<br /> &quot;transactionDate&quot;:&quot;2015-09-03&quot;,<br /> &quot;transactionTotal&quot;:295,<br /> &quot;transactionShipping&quot;:0,<br /> &quot;transactionTax&quot;:26.82,<br /> &quot;transactionPaymentType&quot;:&quot;Rechnung&quot;,<br /> &quot;transactionCurrency&quot;:&quot;EUR&quot;,<br /> &quot;transactionShippingMethod&quot;:&quot;tablerate&quot;,<br /> &quot;transactionProducts&quot;:[<br /> {<br /> &quot;name&quot;:&quot;Handelsvertretergesetz&quot;,<br /> &quot;sku&quot;:&quot;9783700760344&quot;,<br /> &quot;category&quot;:&quot;Buch&quot;,<br /> &quot;price&quot;:113.64,<br /> &quot;quantity&quot;:1<br /> },<br /> {<br /> &quot;name&quot;:&quot;Steuerrecht&quot;,<br /> &quot;sku&quot;:&quot;9783700759294&quot;,<br /> &quot;category&quot;:&quot;Kodex&quot;,<br /> &quot;price&quot;:77.27,<br /> &quot;quantity&quot;:2<br /> }<br /> ]<br /> }];<br /> &lt;/pre&gt;<br /> <br /> === Enhanced tracking ===<br /> &lt;pre&gt;<br /> https://gtm4wp.com/how-to-articles/how-to-setup-enhanced-ecommerce-tracking<br /> &lt;/pre&gt;<br /> <br /> events:<br /> &lt;pre&gt;<br /> gtm4wp.orderCompletedEEC<br /> <br /> ecommerce.purchase.actionField.id<br /> ecommerce.purchase.actionField.revenue<br /> &lt;/pre&gt;<br /> <br /> Example<br /> &lt;pre&gt;<br /> dataLayer.push({<br /> 'ecommerce': {<br /> 'purchase': {<br /> 'actionField': {<br /> 'id': '3546321',<br /> 'affiliation': 'test',<br /> 'transactionTotal': '540.00',<br /> 'transactionTax': '93.72',<br /> 'revenue': '446.28',<br /> 'currency': 'EUR'<br /> },<br /> 'products': [{<br /> 'name': 'test',<br /> 'sku': '4',<br /> 'price': '446.28',<br /> 'category': 'test',<br /> 'quantity': 1<br /> }]<br /> }<br /> }<br /> });<br /> &lt;/pre&gt;<br /> <br /> === CF7 tracking ===<br /> event:&lt;br /&gt;<br /> gtm4wp.contactForm7Submitted<br /> <br /> === Analytics 4: Ecommerce Tracking ===<br /> If Enhanced Ecommerce is enabled, then you can use the below Tag Manager template to setup Analytics 4 Ecommerce tracking for you.&lt;br /&gt;<br /> Just make sure to test it in case it becomes outdated!&lt;br /&gt;<br /> <br /> [[File:Gtm4wp-ga4-container-elements.json]]<br /> <br /> Source: https://gtm4wp.com/how-to-articles/how-to-setup-enhanced-ecommerce-tracking-google-analytics-4-ga4-version&lt;br /&gt;<br /> <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.</div>

Ben.robson https://wiki.growth.agency/index.php?title=Roman_Cart&diff=395 2024-07-31T15:59:36Z

<p>Ben.robson: Created page with &quot;= Installing GTM / Value Tracking = Once signed into Roman Cart, go to Marketing &gt; External Sales Tracking &gt; Sales Tracking Scripts Add the below code here, swapping the GTM ID for the relevant one, make sure not to exceed the character limit. &lt;pre&gt; &lt;!-- Google Tag Manager --&gt; &lt;script&gt;(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({&#039;gtm.start&#039;: new Date().getTime(),event:&#039;gtm.js&#039;});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!=&#039;dataLayer&#039;?&#039;&amp;l=&#039;+l:&#039;&#039;;j.asy...&quot;</p> <hr /> <div>= Installing GTM / Value Tracking =<br /> <br /> Once signed into Roman Cart, go to Marketing &gt; External Sales Tracking &gt; Sales Tracking Scripts<br /> Add the below code here, swapping the GTM ID for the relevant one, make sure not to exceed the character limit.<br /> &lt;pre&gt;<br /> &lt;!-- Google Tag Manager --&gt;<br /> &lt;script&gt;(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':<br /> new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],<br /> j=d.createElement(s),dl=l!='dataLayer'?'&amp;l='+l:'';j.async=true;j.src=<br /> 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);<br /> })(window,document,'script','dataLayer','GTM-XXXXXX');&lt;/script&gt;<br /> &lt;!-- End Google Tag Manager --&gt;<br /> <br /> &lt;!-- Google Tag Manager (noscript) --&gt;<br /> &lt;noscript&gt;&lt;iframe src=&quot;https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX&quot;<br /> height=&quot;0&quot; width=&quot;0&quot; style=&quot;display:none;visibility:hidden&quot;&gt;&lt;/iframe&gt;&lt;/noscript&gt;<br /> &lt;!-- End Google Tag Manager (noscript) --&gt;<br /> <br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'order_value' : '&lt;totalpricenocurr&gt;', 'order_id' : '&lt;orderid&gt;', 'event' : 'order-submitted'});<br /> &lt;/script&gt;<br /> &lt;/pre&gt;</div>

Ben.robson https://wiki.growth.agency/index.php?title=Google_Tag_Manager&diff=394 2024-07-31T15:56:28Z

<p>Ben.robson: /* Systems */</p> <hr /> <div><br /> = GTM =<br /> &lt;pre&gt;<br /> https://tagmanager.google.com/<br /> &lt;/pre&gt;<br /> Google Tag Manager is a site container used for storing and triggering scripts.&lt;br /&gt;<br /> These then can be used for tracking.&lt;br /&gt;<br /> <br /> = Systems =<br /> <br /> Below are links to pages for different systems.<br /> These pages will include the methods used for installing the Tag Manager and the Conversion Value tracking.&lt;br /&gt; <br /> <br /> {| class=&quot;wikitable sortable&quot; style=&quot;width:100%&quot;<br /> |-<br /> ! Self-Host System !! On-site Builder Systems !! Chat Systems<br /> |-<br /> | [[CS-Cart]] || [[Bigcommerce]] || [[CollectChat]]<br /> |-<br /> | [[Joomla]] || [[Ecwid]] || [[HubSpot Chat]]<br /> |-<br /> | [[Magento 1.x]] || [[EKMPowershop]] || [[Jivo]]<br /> |-<br /> | [[Magento 2.x]] || [[MyshopBlocks]] || [[LiveChat]]<br /> |-<br /> | [[OpenCart]] || [[Shopify]] || [[PureChat]]<br /> |-<br /> | [[Prestashop]] || [[Squarespace]] || [[Tawk]]<br /> |-<br /> | [[Tag Manager Installation (Wordpress)|Wordpress]] || [[Trill]] || [[Tidio]]<br /> |-<br /> | [[X-Cart]] || [[Wix]] || [[ZenDesk]]<br /> |-<br /> | [[Zen Cart]] || [[Yell]] || [[Zoho]]<br /> |-<br /> ||| [[Roman Cart]]<br /> |}<br /> <br /> = Useful Info =<br /> <br /> == Generic jQuery Form Listener ==<br /> <br /> If there is no instructions in the wiki for a particular system and/or plugin and the form uses Ajax to submit,<br /> It may be worth trying this generic form listener.&lt;br /&gt;<br /> <br /> depending on what the jQuery is called when initialized you may need to change &quot;jQuery&quot; to &quot;$&quot; in the code below.&lt;br /&gt;<br /> <br /> create a custom HTML tag and change the index URL to what the URL is submitting to in the Ajax form.&lt;br /&gt;<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {<br /> if (~settings.url.indexOf(&quot;/contact/form/process/&quot;)) {<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> &lt;br /&gt;<br /> note: the form must be using the actual jQuery's Ajax method to perform the request for this to work<br /> <br /> == Unique Page Views ==<br /> <br /> You can track unique page views by storing a value in the sessionStorage variable.<br /> This can be useful for tracking forms where only a thank you page is available track.<br /> <br /> Create a tag that only fires on the page you want to track<br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var gtm_fs_count = 1;<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g, 'F_SLASH');<br /> if (sessionStorage[page_path]) {<br /> <br /> gtm_fs_count = gtm_fs_count+1;<br /> sessionStorage.setItem(page_path, gtm_fs_count);<br /> <br /> } else if(!sessionStorage[page_path]) {<br /> <br /> sessionStorage.setItem(page_path, gtm_fs_count) ;<br /> <br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Create a custom JS variable to retrieve the value:<br /> &lt;pre&gt;<br /> function() {<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g,&quot;F_SLASH&quot;);<br /> return parseInt(window.sessionStorage[page_path]); <br /> }<br /> &lt;/pre&gt;<br /> <br /> Then update the trigger to the variable is less than 2 as well as its existing conditions<br /> <br /> <br /> == Cookie Consent Banner &amp; Consent Mode V2 ==<br /> <br /> For clients that don't have this setup &amp; functioning already, its possible to setup a consent mode friendly cookie banner using the below JS:<br /> Within the .zip, the file is /build/cookieconsent.js<br /> [[Media:Cookieconsent-master.zip|Cookieconsent-master.zip]]<br /> <br /> This file will need to be hosted somewhere that is accessible for the client site.<br /> Once this has been done the below script will need to be added to the site, before GTM is loaded.<br /> Make sure to swap cookieconsent.js with the location of the js file.<br /> <br /> &lt;pre&gt;<br /> &lt;script src=&quot;cookieconsent.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // Define dataLayer and the gtag function.<br /> window.dataLayer = window.dataLayer || [];<br /> function gtag() { dataLayer.push(arguments); }<br /> window.CookieConsent.init({<br /> categories: {<br /> // Unique name.<br /> necessary: {<br /> needed: true,<br /> wanted: true,<br /> checked: true,<br /> // Language settings for categories.<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Strictly Necessary Cookies',<br /> description: 'Cookies Required for the site to function as intended.',<br /> },<br /> }<br /> }<br /> },<br /> analytics: {<br /> needed: false,<br /> wanted: false,<br /> checked: false,<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Analytics',<br /> description: 'Cookies used by Google &amp; other 3rd party analytics services.',<br /> },<br /> }<br /> }<br /> }<br /> },<br /> consentModeControls: {<br /> ad_storage: 'analytics',<br /> ad_user_data: 'analytics',<br /> ad_personalization: 'analytics',<br /> analytics_storage: 'analytics'<br /> },<br /> });<br /> &lt;/script&gt;<br /> &lt;script&gt;<br /> if (localStorage.getItem('consentMode') === null) {<br /> gtag('consent', 'default', {<br /> 'ad_storage': 'denied',<br /> 'ad_user_data': 'denied',<br /> 'ad_personalization': 'denied',<br /> 'analytics_storage': 'denied'<br /> });<br /> } else {<br /> gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')));<br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Optional, but to make it look slightly better you could reduce the opacity:<br /> &lt;pre&gt;<br /> &lt;style&gt;<br /> #cconsent-bar {<br /> opacity: 0.9;<br /> }<br /> &lt;/style&gt;<br /> &lt;/pre&gt;</div>

Ben.robson https://wiki.growth.agency/index.php?title=Shopify&diff=389 2024-06-10T14:19:01Z

<p>Ben.robson: /* Shopify Pixel */</p> <hr /> <div>= Shopify Pixel =<br /> <br /> The old method is due to be deprecated in Dec-24, so this will only be available until then. &lt;/br&gt;<br /> New Shopify sites also appear to have checkout scripts disabled by default. &lt;/br&gt;<br /> The new method for adding tracking to Shopify sites is through a Custom Pixel. &lt;/br&gt;<br /> <br /> Based on Shopifys documentation:&lt;/br&gt;<br /> [https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial Creating a GTM pixel]&lt;/br&gt;<br /> [https://shopify.dev/docs/api/web-pixels-api/pixel-privacy Pixel privacy documentation]&lt;/br&gt;<br /> <br /> The &lt;noscript&gt; section needs to be added to the &lt;body&gt; through theme.liquid via Online Store &gt; Edit.&lt;/br&gt;&lt;/br&gt;<br /> <br /> - Go to Settings &gt; Customer Events &gt; Add Custom Pixel.<br /> - Set the Customer Privacy settings to Not required.<br /> - Set Data Sale to Data collected does not qualify as data sale.<br /> - Add the below code.<br /> <br /> &lt;pre&gt;<br /> // Define dataLayer and the gtag function.<br /> window.dataLayer = window.dataLayer || [];<br /> function gtag(){dataLayer.push(arguments);}<br /> <br /> //Initialize GTM tag<br /> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':<br /> new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],<br /> j=d.createElement(s),dl=l!='dataLayer'?'&amp;l='+l:'';j.async=true;j.src=<br /> 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);<br /> })(window,document,'script','dataLayer', 'GTM-XXXXXX');<br /> <br /> let customerPrivacyStatus = init.customerPrivacy;<br /> let ad_permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );<br /> let analytics_permission = ( customerPrivacyStatus.analyticsProcessingAllowed ? 'granted' : 'denied' );<br /> <br /> //Google Consent Mode v2<br /> gtag('consent', 'default', {<br /> 'ad_storage': ad_permission,<br /> 'analytics_storage': analytics_permission,<br /> 'ad_user_data': ad_permission,<br /> 'ad_personalization': ad_permission,<br /> });<br /> <br /> // Use the customerPrivacy Standard API to subscribe to consent collected events and update the status<br /> api.customerPrivacy.subscribe('visitorConsentCollected', (event) =&gt; {<br /> window.dataLayer = window.dataLayer || [];<br /> let customerPrivacyStatus = event.customerPrivacy;<br /> let ad_permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );<br /> let analytics_permission = ( customerPrivacyStatus.analyticsProcessingAllowed ? 'granted' : 'denied' );<br /> <br /> gtag('consent', 'update', {<br /> 'ad_storage': ad_permission,<br /> 'analytics_storage': analytics_permission ,<br /> 'ad_user_data': ad_permission,<br /> 'ad_personalization': ad_permission,<br /> }); <br /> });<br /> <br /> //subscribe to events<br /> analytics.subscribe(&quot;checkout_completed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_completed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> &lt;/pre&gt;<br /> <br /> Other Ecommerce events that could be useful:<br /> <br /> &lt;pre&gt;<br /> <br /> analytics.subscribe(&quot;payment_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;payment_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_shipping_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_shipping_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_address_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_address_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_contact_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_contact_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_started&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_started&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;product_added_to_cart&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;product_added_to_cart&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> price: event.data?.cartLine?.merchandise?.price?.amount,<br /> currency: event.data?.cartLine?.cost?.totalAmount?.currencyCode,<br /> product_id: event.data?.cartLine?.merchandise?.product?.id + '_' + event.data?.cartLine?.merchandise?.id,<br /> product_title: event.data?.cartLine?.merchandise?.product?.title,<br /> quantity: event.data?.cartLine?.quantity,<br /> total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,<br /> test: event.data,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;cart_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;cart_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> total_cost: event.data?.cart?.cost?.totalAmount?.amount,<br /> quantity: event.data?.cart?.totalQuantity,<br /> cart_id: event.data?.cart?.id,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;page_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;page_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> page_title: event.context.document.title,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;product_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;product_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> product_id: event.data?.productVariant?.product?.id + '_' + event.data?.productVariant?.id,<br /> product_title: event.data?.productVariant?.title,<br /> product_sku: event.data?.productVariant?.sku,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;search_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;search_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> query: event.data?.searchResult?.query,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;collection_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;collection_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> collection_id: event.data?.collection?.id,<br /> collection_title: event.data?.collection?.title,<br /> });<br /> });<br /> &lt;/pre&gt;<br /> <br /> = Tag Manager =<br /> <br /> Add Tag Manager to theme:<br /> Modify Theme<br /> &lt;pre&gt;<br /> &quot;online store&quot; -&gt; &quot;...&quot; or &quot;Actions&quot; -&gt; &quot;edit HTML / CSS&quot;<br /> &lt;/pre&gt;<br /> <br /> Modify theme.liquid<br /> <br /> Google Tag Manager will also need to be added to Checkout's additional settings to track conversions<br /> <br /> == Conversion Tracking Code ==<br /> <br /> Google Tag Manager will also need to be added to Checkout's additional settings to track conversions<br /> <br /> In &quot;settings&quot; -&gt; &quot;checkout&quot; -&gt; &quot;additional settings&quot;<br /> <br /> &lt;pre&gt;<br /> {% if first_time_accessed %}<br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'order_id' : '{{ order_number }}', 'order_value' : '{{ total_price | money_without_currency }}', 'event' : 'order-submitted'});<br /> &lt;/script&gt;<br /> {% endif %}<br /> &lt;/pre&gt;<br /> <br /> <br /> *Note: if testing without &quot;{% if first_time_accessed %}&quot; on a order that has already converted, the order ID will not show<br /> <br /> to add product ids add within the code above:<br /> <br /> &lt;pre&gt;<br /> dataLayer.push({ 'product_ids' : [{% for line_item in line_items %}{{ line_item.product_id }}{% unless forloop.last == true %}, {% endunless %}{% endfor %}] });<br /> &lt;/pre&gt;<br /> <br /> <br /> *Note: This was made for dynamic re-marketing, for analytics 4 go to the section below<br /> <br /> === Tracking Contact Page ===<br /> <br /> In the snippets section, go to &quot;form-status.liquid&quot; or &quot;contact.liquid&quot;.<br /> <br /> Find the snippet that shows the success text ( in-between {%- if form.posted_successfully? -%}{%- endif -%} ),<br /> Then add:<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> = Product Feed =<br /> <br /> The below App is free to use &amp; should do most of the setup for you:&lt;br /&gt;<br /> https://apps.shopify.com/google&lt;br /&gt;<br /> <br /> After installing the App a Google account with access to the Merchant Centre needs to sign in.&lt;br /&gt;<br /> DO NOT sign in using one of our Master email addresses, instead you can either:&lt;br /&gt;<br /> - Ask the client to do this, if they don't have access to Merchant Center we can try to add them.<br /> - Create a new email address that only has access to this Merchant Center &amp; sign in with this instead.<br /> <br /> Then the below needs to be done, in this order otherwise it won't send the products through &amp; you'll have to start from scratch:&lt;br /&gt;<br /> - Make sure the Store requirements are met &amp; confirm these, if they aren't then send this back to the client so they can add whats necessary.<br /> - Under Product Feed, start the setup process.<br /> - Connect the Merchant Centre on the settings tab.<br /> - Specify the Target Market &amp; set the Shipping settings to Manual (These will need to be added to Merchant Center by someone afterwards).<br /> If this has been done correctly then the products should now be available within the Merchant Center account.&lt;br /&gt;&lt;br /&gt;<br /> <br /> Below is for Reference, Do not use!&lt;br /&gt;<br /> Alternatively, Shopify does provide you with the Product feed URL for your store.&lt;br /&gt;<br /> To access this, you will need to append .atom to either all of your collections or to a specific collection URL.&lt;br /&gt;<br /> &lt;br /&gt;<br /> For example:<br /> &lt;br /&gt;<br /> &lt;pre&gt;<br /> &quot;yourstorename.com/collections/all.atom&quot;<br /> &quot;yourstorename.com/collections/collectionname.atom&quot;<br /> &lt;/pre&gt;<br /> <br /> = Events for Analytics 4 =<br /> <br /> View Item: &lt;br /&gt;<br /> Add this to product-template.liquid<br /> <br /> &lt;pre&gt;<br /> <br /> &lt;script&gt;<br /> window.dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: &quot;view_item&quot;,<br /> ecommerce: {<br /> currency: &quot;GBP&quot;,<br /> items: [<br /> {<br /> item_id: {{ product.id }},<br /> item_name: &quot;{{ product.title }}&quot;,<br /> {% if product.vendor %} item_brand: &quot;{{ product.vendor }}&quot;, {% endif %}<br /> price: {{ product.price | money_without_currency }},<br /> {% if product.type %} item_category: &quot;{{ product.type }}&quot;, {% endif %}<br /> google_business_vertical: &quot;retail&quot;,<br /> id: &quot;{{ product.id }}&quot;<br /> }<br /> ]<br /> },<br /> });<br /> &lt;/script&gt;<br /> <br /> &lt;/pre&gt;<br /> <br /> Add To Cart:&lt;br /&gt;<br /> The below listener can be added to GTM, this should send add_to_cart events to GTM for you.<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings, data ) {<br /> if (~settings.url.indexOf(&quot;/cart/add&quot;)) { <br /> <br /> var items = [];<br /> items.push({<br /> item_id: data.product_id,<br /> item_name: data.title,<br /> item_category: data.product_type,<br /> price: ( data.price / 100 ),<br /> google_business_vertical: &quot;retail&quot;,<br /> id: data.product_id<br /> });<br /> <br /> if (typeof data.brand != &quot;undefined&quot;) items[0]['item_brand'] = data.brand;<br /> <br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: 'add_to_cart',<br /> ecommerce: {<br /> currency: &quot;GBP&quot;, <br /> items: items<br /> }<br /> });<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Purchases:&lt;br /&gt;<br /> Add this to the Settings &gt; Checkout &gt; Additional Scripts section.<br /> <br /> &lt;pre&gt;<br /> {% if first_time_accessed %}<br /> &lt;script&gt;<br /> var items = [];<br /> var temp = {};<br /> <br /> {% for line_item in line_items %}<br /> temp = {<br /> item_id: {{ line_item.product.id }},<br /> item_name: &quot;{{ line_item.title }}&quot;,<br /> price: {{ line_item.final_line_price | money_without_currency }},<br /> google_business_vertical: &quot;retail&quot;,<br /> id: {{ line_item.product.id }},<br /> quantity: {{ line_item.quantity }}<br /> <br /> };<br /> <br /> {% if line_item.product.type %} <br /> temp['item_category'] = &quot;{{ line_item.product.type }}&quot;;<br /> {% endif %}<br /> <br /> {% if line_item.product.vendor %} <br /> temp['item_brand'] = &quot;{{ line_item.product.vendor }}&quot;;<br /> {% endif %}<br /> <br /> items.push(temp);<br /> <br /> {% endfor %}<br /> <br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: 'purchase',<br /> ecommerce: {<br /> affiliation: 'Online Store',<br /> transaction_id: '{{ order_number }}',<br /> value: '{{ total_price | money_without_currency }}',<br /> tax: '{{ tax_price | money_without_currency }}',<br /> shipping: '{{ shipping_price | money_without_currency}}',<br /> currency: &quot;GBP&quot;, <br /> items: items<br /> }<br /> });<br /> <br /> <br /> &lt;/script&gt;<br /> {% endif %}<br /> &lt;/pre&gt;<br /> <br /> The Event Tag &amp; Variables can be setup with the below template:&lt;br /&gt;<br /> [[File:Shopify-ga4-container-elements.json]]<br /> <br /> = Shopify Links =<br /> Cheat sheet for Variables: &lt;br /&gt;<br /> https://www.shopify.co.uk/partners/shopify-cheat-sheet</div>

Ben.robson https://wiki.growth.agency/index.php?title=Shopify&diff=388 2024-06-10T14:18:09Z

<p>Ben.robson: /* Shopify Pixel */</p> <hr /> <div>= Shopify Pixel =<br /> <br /> The old method is due to be deprecated in Dec-24, so this will only be available until then. &lt;/br&gt;<br /> New Shopify sites also appear to have checkout scripts disabled by default. &lt;/br&gt;<br /> The new method for adding tracking to Shopify sites is through a Custom Pixel. &lt;/br&gt;<br /> <br /> Based on Shopifys documentation:&lt;/br&gt;<br /> [https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial Creating a GTM pixel]&lt;/br&gt;<br /> [https://shopify.dev/docs/api/web-pixels-api/pixel-privacy Pixel privacy documentation]&lt;/br&gt;<br /> <br /> The &lt;noscript&gt; section needs to be added to the &lt;body&gt; through theme.liquid via Online Store &gt; Edit.&lt;/br&gt;&lt;/br&gt;<br /> <br /> - Go to Settings &gt; Customer Events &gt; Add Custom Pixel.&lt;/br&gt;<br /> - Set the Customer Privacy settings to Not required.&lt;/br&gt;<br /> - Set Data Sale to Data collected does not qualify as data sale.&lt;/br&gt;<br /> - Add the below code.&lt;/br&gt;<br /> <br /> &lt;pre&gt;<br /> // Define dataLayer and the gtag function.<br /> window.dataLayer = window.dataLayer || [];<br /> function gtag(){dataLayer.push(arguments);}<br /> <br /> //Initialize GTM tag<br /> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':<br /> new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],<br /> j=d.createElement(s),dl=l!='dataLayer'?'&amp;l='+l:'';j.async=true;j.src=<br /> 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);<br /> })(window,document,'script','dataLayer', 'GTM-XXXXXX');<br /> <br /> let customerPrivacyStatus = init.customerPrivacy;<br /> let ad_permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );<br /> let analytics_permission = ( customerPrivacyStatus.analyticsProcessingAllowed ? 'granted' : 'denied' );<br /> <br /> //Google Consent Mode v2<br /> gtag('consent', 'default', {<br /> 'ad_storage': ad_permission,<br /> 'analytics_storage': analytics_permission,<br /> 'ad_user_data': ad_permission,<br /> 'ad_personalization': ad_permission,<br /> });<br /> <br /> // Use the customerPrivacy Standard API to subscribe to consent collected events and update the status<br /> api.customerPrivacy.subscribe('visitorConsentCollected', (event) =&gt; {<br /> window.dataLayer = window.dataLayer || [];<br /> let customerPrivacyStatus = event.customerPrivacy;<br /> let ad_permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );<br /> let analytics_permission = ( customerPrivacyStatus.analyticsProcessingAllowed ? 'granted' : 'denied' );<br /> <br /> gtag('consent', 'update', {<br /> 'ad_storage': ad_permission,<br /> 'analytics_storage': analytics_permission ,<br /> 'ad_user_data': ad_permission,<br /> 'ad_personalization': ad_permission,<br /> }); <br /> });<br /> <br /> //subscribe to events<br /> analytics.subscribe(&quot;checkout_completed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_completed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> &lt;/pre&gt;<br /> <br /> Other Ecommerce events that could be useful:<br /> <br /> &lt;pre&gt;<br /> <br /> analytics.subscribe(&quot;payment_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;payment_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_shipping_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_shipping_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_address_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_address_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_contact_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_contact_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_started&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_started&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;product_added_to_cart&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;product_added_to_cart&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> price: event.data?.cartLine?.merchandise?.price?.amount,<br /> currency: event.data?.cartLine?.cost?.totalAmount?.currencyCode,<br /> product_id: event.data?.cartLine?.merchandise?.product?.id + '_' + event.data?.cartLine?.merchandise?.id,<br /> product_title: event.data?.cartLine?.merchandise?.product?.title,<br /> quantity: event.data?.cartLine?.quantity,<br /> total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,<br /> test: event.data,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;cart_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;cart_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> total_cost: event.data?.cart?.cost?.totalAmount?.amount,<br /> quantity: event.data?.cart?.totalQuantity,<br /> cart_id: event.data?.cart?.id,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;page_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;page_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> page_title: event.context.document.title,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;product_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;product_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> product_id: event.data?.productVariant?.product?.id + '_' + event.data?.productVariant?.id,<br /> product_title: event.data?.productVariant?.title,<br /> product_sku: event.data?.productVariant?.sku,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;search_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;search_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> query: event.data?.searchResult?.query,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;collection_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;collection_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> collection_id: event.data?.collection?.id,<br /> collection_title: event.data?.collection?.title,<br /> });<br /> });<br /> &lt;/pre&gt;<br /> <br /> = Tag Manager =<br /> <br /> Add Tag Manager to theme:<br /> Modify Theme<br /> &lt;pre&gt;<br /> &quot;online store&quot; -&gt; &quot;...&quot; or &quot;Actions&quot; -&gt; &quot;edit HTML / CSS&quot;<br /> &lt;/pre&gt;<br /> <br /> Modify theme.liquid<br /> <br /> Google Tag Manager will also need to be added to Checkout's additional settings to track conversions<br /> <br /> == Conversion Tracking Code ==<br /> <br /> Google Tag Manager will also need to be added to Checkout's additional settings to track conversions<br /> <br /> In &quot;settings&quot; -&gt; &quot;checkout&quot; -&gt; &quot;additional settings&quot;<br /> <br /> &lt;pre&gt;<br /> {% if first_time_accessed %}<br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'order_id' : '{{ order_number }}', 'order_value' : '{{ total_price | money_without_currency }}', 'event' : 'order-submitted'});<br /> &lt;/script&gt;<br /> {% endif %}<br /> &lt;/pre&gt;<br /> <br /> <br /> *Note: if testing without &quot;{% if first_time_accessed %}&quot; on a order that has already converted, the order ID will not show<br /> <br /> to add product ids add within the code above:<br /> <br /> &lt;pre&gt;<br /> dataLayer.push({ 'product_ids' : [{% for line_item in line_items %}{{ line_item.product_id }}{% unless forloop.last == true %}, {% endunless %}{% endfor %}] });<br /> &lt;/pre&gt;<br /> <br /> <br /> *Note: This was made for dynamic re-marketing, for analytics 4 go to the section below<br /> <br /> === Tracking Contact Page ===<br /> <br /> In the snippets section, go to &quot;form-status.liquid&quot; or &quot;contact.liquid&quot;.<br /> <br /> Find the snippet that shows the success text ( in-between {%- if form.posted_successfully? -%}{%- endif -%} ),<br /> Then add:<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> = Product Feed =<br /> <br /> The below App is free to use &amp; should do most of the setup for you:&lt;br /&gt;<br /> https://apps.shopify.com/google&lt;br /&gt;<br /> <br /> After installing the App a Google account with access to the Merchant Centre needs to sign in.&lt;br /&gt;<br /> DO NOT sign in using one of our Master email addresses, instead you can either:&lt;br /&gt;<br /> - Ask the client to do this, if they don't have access to Merchant Center we can try to add them.<br /> - Create a new email address that only has access to this Merchant Center &amp; sign in with this instead.<br /> <br /> Then the below needs to be done, in this order otherwise it won't send the products through &amp; you'll have to start from scratch:&lt;br /&gt;<br /> - Make sure the Store requirements are met &amp; confirm these, if they aren't then send this back to the client so they can add whats necessary.<br /> - Under Product Feed, start the setup process.<br /> - Connect the Merchant Centre on the settings tab.<br /> - Specify the Target Market &amp; set the Shipping settings to Manual (These will need to be added to Merchant Center by someone afterwards).<br /> If this has been done correctly then the products should now be available within the Merchant Center account.&lt;br /&gt;&lt;br /&gt;<br /> <br /> Below is for Reference, Do not use!&lt;br /&gt;<br /> Alternatively, Shopify does provide you with the Product feed URL for your store.&lt;br /&gt;<br /> To access this, you will need to append .atom to either all of your collections or to a specific collection URL.&lt;br /&gt;<br /> &lt;br /&gt;<br /> For example:<br /> &lt;br /&gt;<br /> &lt;pre&gt;<br /> &quot;yourstorename.com/collections/all.atom&quot;<br /> &quot;yourstorename.com/collections/collectionname.atom&quot;<br /> &lt;/pre&gt;<br /> <br /> = Events for Analytics 4 =<br /> <br /> View Item: &lt;br /&gt;<br /> Add this to product-template.liquid<br /> <br /> &lt;pre&gt;<br /> <br /> &lt;script&gt;<br /> window.dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: &quot;view_item&quot;,<br /> ecommerce: {<br /> currency: &quot;GBP&quot;,<br /> items: [<br /> {<br /> item_id: {{ product.id }},<br /> item_name: &quot;{{ product.title }}&quot;,<br /> {% if product.vendor %} item_brand: &quot;{{ product.vendor }}&quot;, {% endif %}<br /> price: {{ product.price | money_without_currency }},<br /> {% if product.type %} item_category: &quot;{{ product.type }}&quot;, {% endif %}<br /> google_business_vertical: &quot;retail&quot;,<br /> id: &quot;{{ product.id }}&quot;<br /> }<br /> ]<br /> },<br /> });<br /> &lt;/script&gt;<br /> <br /> &lt;/pre&gt;<br /> <br /> Add To Cart:&lt;br /&gt;<br /> The below listener can be added to GTM, this should send add_to_cart events to GTM for you.<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings, data ) {<br /> if (~settings.url.indexOf(&quot;/cart/add&quot;)) { <br /> <br /> var items = [];<br /> items.push({<br /> item_id: data.product_id,<br /> item_name: data.title,<br /> item_category: data.product_type,<br /> price: ( data.price / 100 ),<br /> google_business_vertical: &quot;retail&quot;,<br /> id: data.product_id<br /> });<br /> <br /> if (typeof data.brand != &quot;undefined&quot;) items[0]['item_brand'] = data.brand;<br /> <br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: 'add_to_cart',<br /> ecommerce: {<br /> currency: &quot;GBP&quot;, <br /> items: items<br /> }<br /> });<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Purchases:&lt;br /&gt;<br /> Add this to the Settings &gt; Checkout &gt; Additional Scripts section.<br /> <br /> &lt;pre&gt;<br /> {% if first_time_accessed %}<br /> &lt;script&gt;<br /> var items = [];<br /> var temp = {};<br /> <br /> {% for line_item in line_items %}<br /> temp = {<br /> item_id: {{ line_item.product.id }},<br /> item_name: &quot;{{ line_item.title }}&quot;,<br /> price: {{ line_item.final_line_price | money_without_currency }},<br /> google_business_vertical: &quot;retail&quot;,<br /> id: {{ line_item.product.id }},<br /> quantity: {{ line_item.quantity }}<br /> <br /> };<br /> <br /> {% if line_item.product.type %} <br /> temp['item_category'] = &quot;{{ line_item.product.type }}&quot;;<br /> {% endif %}<br /> <br /> {% if line_item.product.vendor %} <br /> temp['item_brand'] = &quot;{{ line_item.product.vendor }}&quot;;<br /> {% endif %}<br /> <br /> items.push(temp);<br /> <br /> {% endfor %}<br /> <br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: 'purchase',<br /> ecommerce: {<br /> affiliation: 'Online Store',<br /> transaction_id: '{{ order_number }}',<br /> value: '{{ total_price | money_without_currency }}',<br /> tax: '{{ tax_price | money_without_currency }}',<br /> shipping: '{{ shipping_price | money_without_currency}}',<br /> currency: &quot;GBP&quot;, <br /> items: items<br /> }<br /> });<br /> <br /> <br /> &lt;/script&gt;<br /> {% endif %}<br /> &lt;/pre&gt;<br /> <br /> The Event Tag &amp; Variables can be setup with the below template:&lt;br /&gt;<br /> [[File:Shopify-ga4-container-elements.json]]<br /> <br /> = Shopify Links =<br /> Cheat sheet for Variables: &lt;br /&gt;<br /> https://www.shopify.co.uk/partners/shopify-cheat-sheet</div>

Ben.robson https://wiki.growth.agency/index.php?title=Shopify&diff=387 2024-06-10T14:16:57Z

<p>Ben.robson: /* Shopify Pixel */</p> <hr /> <div>= Shopify Pixel =<br /> <br /> The old method is due to be deprecated in Dec-24, so this will only be available until then. &lt;/br&gt;<br /> New Shopify sites also appear to have checkout scripts disabled by default. &lt;/br&gt;<br /> The new method for adding tracking to Shopify sites is through a Custom Pixel. &lt;/br&gt;<br /> <br /> Based on Shopifys documentation:&lt;/br&gt;<br /> [https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial Creating a GTM pixel]&lt;/br&gt;<br /> [https://shopify.dev/docs/api/web-pixels-api/pixel-privacy Pixel privacy documentation]&lt;/br&gt;<br /> <br /> The &lt;noscript&gt; section needs to be added to the &lt;body&gt; through theme.liquid via Online Store &gt; Edit.&lt;/br&gt;&lt;/br&gt;<br /> <br /> Go to Settings &gt; Customer Events &gt; Add Custom Pixel.&lt;/br&gt;<br /> Set the Customer Privacy settings to Not required.&lt;/br&gt;<br /> Set Data Sale to Data collected does not qualify as data sale.&lt;/br&gt;<br /> <br /> &lt;pre&gt;<br /> // Define dataLayer and the gtag function.<br /> window.dataLayer = window.dataLayer || [];<br /> function gtag(){dataLayer.push(arguments);}<br /> <br /> //Initialize GTM tag<br /> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':<br /> new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],<br /> j=d.createElement(s),dl=l!='dataLayer'?'&amp;l='+l:'';j.async=true;j.src=<br /> 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);<br /> })(window,document,'script','dataLayer', 'GTM-XXXXXX');<br /> <br /> let customerPrivacyStatus = init.customerPrivacy;<br /> let ad_permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );<br /> let analytics_permission = ( customerPrivacyStatus.analyticsProcessingAllowed ? 'granted' : 'denied' );<br /> <br /> //Google Consent Mode v2<br /> gtag('consent', 'default', {<br /> 'ad_storage': ad_permission,<br /> 'analytics_storage': analytics_permission,<br /> 'ad_user_data': ad_permission,<br /> 'ad_personalization': ad_permission,<br /> });<br /> <br /> // Use the customerPrivacy Standard API to subscribe to consent collected events and update the status<br /> api.customerPrivacy.subscribe('visitorConsentCollected', (event) =&gt; {<br /> window.dataLayer = window.dataLayer || [];<br /> let customerPrivacyStatus = event.customerPrivacy;<br /> let ad_permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );<br /> let analytics_permission = ( customerPrivacyStatus.analyticsProcessingAllowed ? 'granted' : 'denied' );<br /> <br /> gtag('consent', 'update', {<br /> 'ad_storage': ad_permission,<br /> 'analytics_storage': analytics_permission ,<br /> 'ad_user_data': ad_permission,<br /> 'ad_personalization': ad_permission,<br /> }); <br /> });<br /> <br /> //subscribe to events<br /> analytics.subscribe(&quot;checkout_completed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_completed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> &lt;/pre&gt;<br /> <br /> Other Ecommerce events that could be useful:<br /> <br /> &lt;pre&gt;<br /> <br /> analytics.subscribe(&quot;payment_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;payment_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_shipping_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_shipping_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_address_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_address_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_contact_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_contact_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_started&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_started&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;product_added_to_cart&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;product_added_to_cart&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> price: event.data?.cartLine?.merchandise?.price?.amount,<br /> currency: event.data?.cartLine?.cost?.totalAmount?.currencyCode,<br /> product_id: event.data?.cartLine?.merchandise?.product?.id + '_' + event.data?.cartLine?.merchandise?.id,<br /> product_title: event.data?.cartLine?.merchandise?.product?.title,<br /> quantity: event.data?.cartLine?.quantity,<br /> total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,<br /> test: event.data,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;cart_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;cart_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> total_cost: event.data?.cart?.cost?.totalAmount?.amount,<br /> quantity: event.data?.cart?.totalQuantity,<br /> cart_id: event.data?.cart?.id,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;page_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;page_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> page_title: event.context.document.title,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;product_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;product_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> product_id: event.data?.productVariant?.product?.id + '_' + event.data?.productVariant?.id,<br /> product_title: event.data?.productVariant?.title,<br /> product_sku: event.data?.productVariant?.sku,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;search_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;search_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> query: event.data?.searchResult?.query,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;collection_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;collection_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> collection_id: event.data?.collection?.id,<br /> collection_title: event.data?.collection?.title,<br /> });<br /> });<br /> &lt;/pre&gt;<br /> <br /> = Tag Manager =<br /> <br /> Add Tag Manager to theme:<br /> Modify Theme<br /> &lt;pre&gt;<br /> &quot;online store&quot; -&gt; &quot;...&quot; or &quot;Actions&quot; -&gt; &quot;edit HTML / CSS&quot;<br /> &lt;/pre&gt;<br /> <br /> Modify theme.liquid<br /> <br /> Google Tag Manager will also need to be added to Checkout's additional settings to track conversions<br /> <br /> == Conversion Tracking Code ==<br /> <br /> Google Tag Manager will also need to be added to Checkout's additional settings to track conversions<br /> <br /> In &quot;settings&quot; -&gt; &quot;checkout&quot; -&gt; &quot;additional settings&quot;<br /> <br /> &lt;pre&gt;<br /> {% if first_time_accessed %}<br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'order_id' : '{{ order_number }}', 'order_value' : '{{ total_price | money_without_currency }}', 'event' : 'order-submitted'});<br /> &lt;/script&gt;<br /> {% endif %}<br /> &lt;/pre&gt;<br /> <br /> <br /> *Note: if testing without &quot;{% if first_time_accessed %}&quot; on a order that has already converted, the order ID will not show<br /> <br /> to add product ids add within the code above:<br /> <br /> &lt;pre&gt;<br /> dataLayer.push({ 'product_ids' : [{% for line_item in line_items %}{{ line_item.product_id }}{% unless forloop.last == true %}, {% endunless %}{% endfor %}] });<br /> &lt;/pre&gt;<br /> <br /> <br /> *Note: This was made for dynamic re-marketing, for analytics 4 go to the section below<br /> <br /> === Tracking Contact Page ===<br /> <br /> In the snippets section, go to &quot;form-status.liquid&quot; or &quot;contact.liquid&quot;.<br /> <br /> Find the snippet that shows the success text ( in-between {%- if form.posted_successfully? -%}{%- endif -%} ),<br /> Then add:<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> = Product Feed =<br /> <br /> The below App is free to use &amp; should do most of the setup for you:&lt;br /&gt;<br /> https://apps.shopify.com/google&lt;br /&gt;<br /> <br /> After installing the App a Google account with access to the Merchant Centre needs to sign in.&lt;br /&gt;<br /> DO NOT sign in using one of our Master email addresses, instead you can either:&lt;br /&gt;<br /> - Ask the client to do this, if they don't have access to Merchant Center we can try to add them.<br /> - Create a new email address that only has access to this Merchant Center &amp; sign in with this instead.<br /> <br /> Then the below needs to be done, in this order otherwise it won't send the products through &amp; you'll have to start from scratch:&lt;br /&gt;<br /> - Make sure the Store requirements are met &amp; confirm these, if they aren't then send this back to the client so they can add whats necessary.<br /> - Under Product Feed, start the setup process.<br /> - Connect the Merchant Centre on the settings tab.<br /> - Specify the Target Market &amp; set the Shipping settings to Manual (These will need to be added to Merchant Center by someone afterwards).<br /> If this has been done correctly then the products should now be available within the Merchant Center account.&lt;br /&gt;&lt;br /&gt;<br /> <br /> Below is for Reference, Do not use!&lt;br /&gt;<br /> Alternatively, Shopify does provide you with the Product feed URL for your store.&lt;br /&gt;<br /> To access this, you will need to append .atom to either all of your collections or to a specific collection URL.&lt;br /&gt;<br /> &lt;br /&gt;<br /> For example:<br /> &lt;br /&gt;<br /> &lt;pre&gt;<br /> &quot;yourstorename.com/collections/all.atom&quot;<br /> &quot;yourstorename.com/collections/collectionname.atom&quot;<br /> &lt;/pre&gt;<br /> <br /> = Events for Analytics 4 =<br /> <br /> View Item: &lt;br /&gt;<br /> Add this to product-template.liquid<br /> <br /> &lt;pre&gt;<br /> <br /> &lt;script&gt;<br /> window.dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: &quot;view_item&quot;,<br /> ecommerce: {<br /> currency: &quot;GBP&quot;,<br /> items: [<br /> {<br /> item_id: {{ product.id }},<br /> item_name: &quot;{{ product.title }}&quot;,<br /> {% if product.vendor %} item_brand: &quot;{{ product.vendor }}&quot;, {% endif %}<br /> price: {{ product.price | money_without_currency }},<br /> {% if product.type %} item_category: &quot;{{ product.type }}&quot;, {% endif %}<br /> google_business_vertical: &quot;retail&quot;,<br /> id: &quot;{{ product.id }}&quot;<br /> }<br /> ]<br /> },<br /> });<br /> &lt;/script&gt;<br /> <br /> &lt;/pre&gt;<br /> <br /> Add To Cart:&lt;br /&gt;<br /> The below listener can be added to GTM, this should send add_to_cart events to GTM for you.<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings, data ) {<br /> if (~settings.url.indexOf(&quot;/cart/add&quot;)) { <br /> <br /> var items = [];<br /> items.push({<br /> item_id: data.product_id,<br /> item_name: data.title,<br /> item_category: data.product_type,<br /> price: ( data.price / 100 ),<br /> google_business_vertical: &quot;retail&quot;,<br /> id: data.product_id<br /> });<br /> <br /> if (typeof data.brand != &quot;undefined&quot;) items[0]['item_brand'] = data.brand;<br /> <br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: 'add_to_cart',<br /> ecommerce: {<br /> currency: &quot;GBP&quot;, <br /> items: items<br /> }<br /> });<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Purchases:&lt;br /&gt;<br /> Add this to the Settings &gt; Checkout &gt; Additional Scripts section.<br /> <br /> &lt;pre&gt;<br /> {% if first_time_accessed %}<br /> &lt;script&gt;<br /> var items = [];<br /> var temp = {};<br /> <br /> {% for line_item in line_items %}<br /> temp = {<br /> item_id: {{ line_item.product.id }},<br /> item_name: &quot;{{ line_item.title }}&quot;,<br /> price: {{ line_item.final_line_price | money_without_currency }},<br /> google_business_vertical: &quot;retail&quot;,<br /> id: {{ line_item.product.id }},<br /> quantity: {{ line_item.quantity }}<br /> <br /> };<br /> <br /> {% if line_item.product.type %} <br /> temp['item_category'] = &quot;{{ line_item.product.type }}&quot;;<br /> {% endif %}<br /> <br /> {% if line_item.product.vendor %} <br /> temp['item_brand'] = &quot;{{ line_item.product.vendor }}&quot;;<br /> {% endif %}<br /> <br /> items.push(temp);<br /> <br /> {% endfor %}<br /> <br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: 'purchase',<br /> ecommerce: {<br /> affiliation: 'Online Store',<br /> transaction_id: '{{ order_number }}',<br /> value: '{{ total_price | money_without_currency }}',<br /> tax: '{{ tax_price | money_without_currency }}',<br /> shipping: '{{ shipping_price | money_without_currency}}',<br /> currency: &quot;GBP&quot;, <br /> items: items<br /> }<br /> });<br /> <br /> <br /> &lt;/script&gt;<br /> {% endif %}<br /> &lt;/pre&gt;<br /> <br /> The Event Tag &amp; Variables can be setup with the below template:&lt;br /&gt;<br /> [[File:Shopify-ga4-container-elements.json]]<br /> <br /> = Shopify Links =<br /> Cheat sheet for Variables: &lt;br /&gt;<br /> https://www.shopify.co.uk/partners/shopify-cheat-sheet</div>

Ben.robson https://wiki.growth.agency/index.php?title=Shopify&diff=386 2024-06-10T13:54:50Z

<p>Ben.robson: /* Shopify Pixel */</p> <hr /> <div>= Shopify Pixel =<br /> <br /> The old method is due to be deprecated in Dec-24, so this will only be available until then. &lt;/br&gt;<br /> New Shopify sites also appear to have checkout scripts disabled by default. &lt;/br&gt;<br /> The new method for adding tracking to Shopify sites is through a Custom Pixel. &lt;/br&gt;<br /> <br /> Based on Shopifys documentation:&lt;/br&gt;<br /> [https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial Creating a GTM pixel]&lt;/br&gt;<br /> [https://shopify.dev/docs/api/web-pixels-api/pixel-privacy Pixel privacy documentation]&lt;/br&gt;<br /> <br /> The &lt;noscript&gt; section needs to be added to the &lt;body&gt; through theme.liquid via Online Store &gt; Edit.<br /> <br /> Go to Settings &gt; Customer Events &gt; Add Custom Pixel<br /> Set the Customer Privacy settings to Not required<br /> Set Data Sale to Data collected does not qualify as data sale<br /> <br /> &lt;pre&gt;<br /> // Define dataLayer and the gtag function.<br /> window.dataLayer = window.dataLayer || [];<br /> function gtag(){dataLayer.push(arguments);}<br /> <br /> //Initialize GTM tag<br /> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':<br /> new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],<br /> j=d.createElement(s),dl=l!='dataLayer'?'&amp;l='+l:'';j.async=true;j.src=<br /> 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);<br /> })(window,document,'script','dataLayer', 'GTM-XXXXXX');<br /> <br /> let customerPrivacyStatus = init.customerPrivacy;<br /> let ad_permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );<br /> let analytics_permission = ( customerPrivacyStatus.analyticsProcessingAllowed ? 'granted' : 'denied' );<br /> <br /> //Google Consent Mode v2<br /> gtag('consent', 'default', {<br /> 'ad_storage': ad_permission,<br /> 'analytics_storage': analytics_permission,<br /> 'ad_user_data': ad_permission,<br /> 'ad_personalization': ad_permission,<br /> });<br /> <br /> // Use the customerPrivacy Standard API to subscribe to consent collected events and update the status<br /> api.customerPrivacy.subscribe('visitorConsentCollected', (event) =&gt; {<br /> window.dataLayer = window.dataLayer || [];<br /> let customerPrivacyStatus = event.customerPrivacy;<br /> let ad_permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );<br /> let analytics_permission = ( customerPrivacyStatus.analyticsProcessingAllowed ? 'granted' : 'denied' );<br /> <br /> gtag('consent', 'update', {<br /> 'ad_storage': ad_permission,<br /> 'analytics_storage': analytics_permission ,<br /> 'ad_user_data': ad_permission,<br /> 'ad_personalization': ad_permission,<br /> }); <br /> });<br /> <br /> //subscribe to events<br /> analytics.subscribe(&quot;checkout_completed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_completed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> &lt;/pre&gt;<br /> <br /> Other Ecommerce events that could be useful:<br /> <br /> &lt;pre&gt;<br /> <br /> analytics.subscribe(&quot;payment_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;payment_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_shipping_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_shipping_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_address_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_address_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_contact_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_contact_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_started&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_started&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;product_added_to_cart&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;product_added_to_cart&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> price: event.data?.cartLine?.merchandise?.price?.amount,<br /> currency: event.data?.cartLine?.cost?.totalAmount?.currencyCode,<br /> product_id: event.data?.cartLine?.merchandise?.product?.id + '_' + event.data?.cartLine?.merchandise?.id,<br /> product_title: event.data?.cartLine?.merchandise?.product?.title,<br /> quantity: event.data?.cartLine?.quantity,<br /> total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,<br /> test: event.data,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;cart_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;cart_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> total_cost: event.data?.cart?.cost?.totalAmount?.amount,<br /> quantity: event.data?.cart?.totalQuantity,<br /> cart_id: event.data?.cart?.id,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;page_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;page_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> page_title: event.context.document.title,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;product_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;product_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> product_id: event.data?.productVariant?.product?.id + '_' + event.data?.productVariant?.id,<br /> product_title: event.data?.productVariant?.title,<br /> product_sku: event.data?.productVariant?.sku,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;search_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;search_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> query: event.data?.searchResult?.query,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;collection_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;collection_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> collection_id: event.data?.collection?.id,<br /> collection_title: event.data?.collection?.title,<br /> });<br /> });<br /> &lt;/pre&gt;<br /> <br /> = Tag Manager =<br /> <br /> Add Tag Manager to theme:<br /> Modify Theme<br /> &lt;pre&gt;<br /> &quot;online store&quot; -&gt; &quot;...&quot; or &quot;Actions&quot; -&gt; &quot;edit HTML / CSS&quot;<br /> &lt;/pre&gt;<br /> <br /> Modify theme.liquid<br /> <br /> Google Tag Manager will also need to be added to Checkout's additional settings to track conversions<br /> <br /> == Conversion Tracking Code ==<br /> <br /> Google Tag Manager will also need to be added to Checkout's additional settings to track conversions<br /> <br /> In &quot;settings&quot; -&gt; &quot;checkout&quot; -&gt; &quot;additional settings&quot;<br /> <br /> &lt;pre&gt;<br /> {% if first_time_accessed %}<br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'order_id' : '{{ order_number }}', 'order_value' : '{{ total_price | money_without_currency }}', 'event' : 'order-submitted'});<br /> &lt;/script&gt;<br /> {% endif %}<br /> &lt;/pre&gt;<br /> <br /> <br /> *Note: if testing without &quot;{% if first_time_accessed %}&quot; on a order that has already converted, the order ID will not show<br /> <br /> to add product ids add within the code above:<br /> <br /> &lt;pre&gt;<br /> dataLayer.push({ 'product_ids' : [{% for line_item in line_items %}{{ line_item.product_id }}{% unless forloop.last == true %}, {% endunless %}{% endfor %}] });<br /> &lt;/pre&gt;<br /> <br /> <br /> *Note: This was made for dynamic re-marketing, for analytics 4 go to the section below<br /> <br /> === Tracking Contact Page ===<br /> <br /> In the snippets section, go to &quot;form-status.liquid&quot; or &quot;contact.liquid&quot;.<br /> <br /> Find the snippet that shows the success text ( in-between {%- if form.posted_successfully? -%}{%- endif -%} ),<br /> Then add:<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> = Product Feed =<br /> <br /> The below App is free to use &amp; should do most of the setup for you:&lt;br /&gt;<br /> https://apps.shopify.com/google&lt;br /&gt;<br /> <br /> After installing the App a Google account with access to the Merchant Centre needs to sign in.&lt;br /&gt;<br /> DO NOT sign in using one of our Master email addresses, instead you can either:&lt;br /&gt;<br /> - Ask the client to do this, if they don't have access to Merchant Center we can try to add them.<br /> - Create a new email address that only has access to this Merchant Center &amp; sign in with this instead.<br /> <br /> Then the below needs to be done, in this order otherwise it won't send the products through &amp; you'll have to start from scratch:&lt;br /&gt;<br /> - Make sure the Store requirements are met &amp; confirm these, if they aren't then send this back to the client so they can add whats necessary.<br /> - Under Product Feed, start the setup process.<br /> - Connect the Merchant Centre on the settings tab.<br /> - Specify the Target Market &amp; set the Shipping settings to Manual (These will need to be added to Merchant Center by someone afterwards).<br /> If this has been done correctly then the products should now be available within the Merchant Center account.&lt;br /&gt;&lt;br /&gt;<br /> <br /> Below is for Reference, Do not use!&lt;br /&gt;<br /> Alternatively, Shopify does provide you with the Product feed URL for your store.&lt;br /&gt;<br /> To access this, you will need to append .atom to either all of your collections or to a specific collection URL.&lt;br /&gt;<br /> &lt;br /&gt;<br /> For example:<br /> &lt;br /&gt;<br /> &lt;pre&gt;<br /> &quot;yourstorename.com/collections/all.atom&quot;<br /> &quot;yourstorename.com/collections/collectionname.atom&quot;<br /> &lt;/pre&gt;<br /> <br /> = Events for Analytics 4 =<br /> <br /> View Item: &lt;br /&gt;<br /> Add this to product-template.liquid<br /> <br /> &lt;pre&gt;<br /> <br /> &lt;script&gt;<br /> window.dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: &quot;view_item&quot;,<br /> ecommerce: {<br /> currency: &quot;GBP&quot;,<br /> items: [<br /> {<br /> item_id: {{ product.id }},<br /> item_name: &quot;{{ product.title }}&quot;,<br /> {% if product.vendor %} item_brand: &quot;{{ product.vendor }}&quot;, {% endif %}<br /> price: {{ product.price | money_without_currency }},<br /> {% if product.type %} item_category: &quot;{{ product.type }}&quot;, {% endif %}<br /> google_business_vertical: &quot;retail&quot;,<br /> id: &quot;{{ product.id }}&quot;<br /> }<br /> ]<br /> },<br /> });<br /> &lt;/script&gt;<br /> <br /> &lt;/pre&gt;<br /> <br /> Add To Cart:&lt;br /&gt;<br /> The below listener can be added to GTM, this should send add_to_cart events to GTM for you.<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings, data ) {<br /> if (~settings.url.indexOf(&quot;/cart/add&quot;)) { <br /> <br /> var items = [];<br /> items.push({<br /> item_id: data.product_id,<br /> item_name: data.title,<br /> item_category: data.product_type,<br /> price: ( data.price / 100 ),<br /> google_business_vertical: &quot;retail&quot;,<br /> id: data.product_id<br /> });<br /> <br /> if (typeof data.brand != &quot;undefined&quot;) items[0]['item_brand'] = data.brand;<br /> <br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: 'add_to_cart',<br /> ecommerce: {<br /> currency: &quot;GBP&quot;, <br /> items: items<br /> }<br /> });<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Purchases:&lt;br /&gt;<br /> Add this to the Settings &gt; Checkout &gt; Additional Scripts section.<br /> <br /> &lt;pre&gt;<br /> {% if first_time_accessed %}<br /> &lt;script&gt;<br /> var items = [];<br /> var temp = {};<br /> <br /> {% for line_item in line_items %}<br /> temp = {<br /> item_id: {{ line_item.product.id }},<br /> item_name: &quot;{{ line_item.title }}&quot;,<br /> price: {{ line_item.final_line_price | money_without_currency }},<br /> google_business_vertical: &quot;retail&quot;,<br /> id: {{ line_item.product.id }},<br /> quantity: {{ line_item.quantity }}<br /> <br /> };<br /> <br /> {% if line_item.product.type %} <br /> temp['item_category'] = &quot;{{ line_item.product.type }}&quot;;<br /> {% endif %}<br /> <br /> {% if line_item.product.vendor %} <br /> temp['item_brand'] = &quot;{{ line_item.product.vendor }}&quot;;<br /> {% endif %}<br /> <br /> items.push(temp);<br /> <br /> {% endfor %}<br /> <br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: 'purchase',<br /> ecommerce: {<br /> affiliation: 'Online Store',<br /> transaction_id: '{{ order_number }}',<br /> value: '{{ total_price | money_without_currency }}',<br /> tax: '{{ tax_price | money_without_currency }}',<br /> shipping: '{{ shipping_price | money_without_currency}}',<br /> currency: &quot;GBP&quot;, <br /> items: items<br /> }<br /> });<br /> <br /> <br /> &lt;/script&gt;<br /> {% endif %}<br /> &lt;/pre&gt;<br /> <br /> The Event Tag &amp; Variables can be setup with the below template:&lt;br /&gt;<br /> [[File:Shopify-ga4-container-elements.json]]<br /> <br /> = Shopify Links =<br /> Cheat sheet for Variables: &lt;br /&gt;<br /> https://www.shopify.co.uk/partners/shopify-cheat-sheet</div>

Ben.robson https://wiki.growth.agency/index.php?title=Shopify&diff=385 2024-06-10T13:51:09Z

<p>Ben.robson: </p> <hr /> <div>= Shopify Pixel =<br /> <br /> The old method is due to be deprecated in Dec-24, so this will only be available until then. &lt;/br&gt;<br /> New Shopify sites also appear to have checkout scripts disabled by default. &lt;/br&gt;<br /> The new method for adding tracking to Shopify sites is through a Custom Pixel. &lt;/br&gt;<br /> <br /> Based on Shopifys documentation:&lt;/br&gt;<br /> [https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial Creating a GTM pixel]&lt;/br&gt;<br /> [https://shopify.dev/docs/api/web-pixels-api/pixel-privacy Pixel privacy documentation]&lt;/br&gt;<br /> <br /> The &lt;noscript&gt; section needs to be added to the &lt;body&gt; through theme.liquid via Online Store &gt; Edit.<br /> <br /> Go to Settings &gt; Customer Events &gt; Add Custom Pixel<br /> Set the Customer Privacy settings to Not required<br /> Set Data Sale to Data collected does not qualify as data sale<br /> <br /> &lt;pre&gt;<br /> // Define dataLayer and the gtag function.<br /> window.dataLayer = window.dataLayer || [];<br /> function gtag(){dataLayer.push(arguments);}<br /> <br /> //Initialize GTM tag<br /> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':<br /> new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],<br /> j=d.createElement(s),dl=l!='dataLayer'?'&amp;l='+l:'';j.async=true;j.src=<br /> 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);<br /> })(window,document,'script','dataLayer', 'GTM-XXXXXX');<br /> <br /> let customerPrivacyStatus = init.customerPrivacy;<br /> let permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );<br /> <br /> //Google Consent Mode v2<br /> gtag('consent', 'default', {<br /> 'ad_storage': permission,<br /> 'analytics_storage': permission,<br /> 'ad_user_data': permission,<br /> 'ad_personalization': permission,<br /> });<br /> <br /> // Use the customerPrivacy Standard API to subscribe to consent collected events and update the status<br /> api.customerPrivacy.subscribe('visitorConsentCollected', (event) =&gt; {<br /> window.dataLayer = window.dataLayer || [];<br /> let customerPrivacyStatus = event.customerPrivacy;<br /> let permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );<br /> gtag('consent', 'update', {<br /> 'ad_storage': permission,<br /> 'analytics_storage': permission,<br /> 'ad_user_data': permission,<br /> 'ad_personalization': permission,<br /> }); <br /> });<br /> <br /> //subscribe to events<br /> analytics.subscribe(&quot;checkout_completed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_completed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> &lt;/pre&gt;<br /> <br /> Other Ecommerce events that could be useful:<br /> <br /> &lt;pre&gt;<br /> <br /> analytics.subscribe(&quot;payment_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;payment_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_shipping_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_shipping_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_address_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_address_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_contact_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_contact_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_started&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_started&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;product_added_to_cart&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;product_added_to_cart&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> price: event.data?.cartLine?.merchandise?.price?.amount,<br /> currency: event.data?.cartLine?.cost?.totalAmount?.currencyCode,<br /> product_id: event.data?.cartLine?.merchandise?.product?.id + '_' + event.data?.cartLine?.merchandise?.id,<br /> product_title: event.data?.cartLine?.merchandise?.product?.title,<br /> quantity: event.data?.cartLine?.quantity,<br /> total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,<br /> test: event.data,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;cart_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;cart_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> total_cost: event.data?.cart?.cost?.totalAmount?.amount,<br /> quantity: event.data?.cart?.totalQuantity,<br /> cart_id: event.data?.cart?.id,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;page_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;page_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> page_title: event.context.document.title,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;product_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;product_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> product_id: event.data?.productVariant?.product?.id + '_' + event.data?.productVariant?.id,<br /> product_title: event.data?.productVariant?.title,<br /> product_sku: event.data?.productVariant?.sku,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;search_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;search_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> query: event.data?.searchResult?.query,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;collection_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;collection_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> collection_id: event.data?.collection?.id,<br /> collection_title: event.data?.collection?.title,<br /> });<br /> });<br /> &lt;/pre&gt;<br /> <br /> = Tag Manager =<br /> <br /> Add Tag Manager to theme:<br /> Modify Theme<br /> &lt;pre&gt;<br /> &quot;online store&quot; -&gt; &quot;...&quot; or &quot;Actions&quot; -&gt; &quot;edit HTML / CSS&quot;<br /> &lt;/pre&gt;<br /> <br /> Modify theme.liquid<br /> <br /> Google Tag Manager will also need to be added to Checkout's additional settings to track conversions<br /> <br /> == Conversion Tracking Code ==<br /> <br /> Google Tag Manager will also need to be added to Checkout's additional settings to track conversions<br /> <br /> In &quot;settings&quot; -&gt; &quot;checkout&quot; -&gt; &quot;additional settings&quot;<br /> <br /> &lt;pre&gt;<br /> {% if first_time_accessed %}<br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'order_id' : '{{ order_number }}', 'order_value' : '{{ total_price | money_without_currency }}', 'event' : 'order-submitted'});<br /> &lt;/script&gt;<br /> {% endif %}<br /> &lt;/pre&gt;<br /> <br /> <br /> *Note: if testing without &quot;{% if first_time_accessed %}&quot; on a order that has already converted, the order ID will not show<br /> <br /> to add product ids add within the code above:<br /> <br /> &lt;pre&gt;<br /> dataLayer.push({ 'product_ids' : [{% for line_item in line_items %}{{ line_item.product_id }}{% unless forloop.last == true %}, {% endunless %}{% endfor %}] });<br /> &lt;/pre&gt;<br /> <br /> <br /> *Note: This was made for dynamic re-marketing, for analytics 4 go to the section below<br /> <br /> === Tracking Contact Page ===<br /> <br /> In the snippets section, go to &quot;form-status.liquid&quot; or &quot;contact.liquid&quot;.<br /> <br /> Find the snippet that shows the success text ( in-between {%- if form.posted_successfully? -%}{%- endif -%} ),<br /> Then add:<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> = Product Feed =<br /> <br /> The below App is free to use &amp; should do most of the setup for you:&lt;br /&gt;<br /> https://apps.shopify.com/google&lt;br /&gt;<br /> <br /> After installing the App a Google account with access to the Merchant Centre needs to sign in.&lt;br /&gt;<br /> DO NOT sign in using one of our Master email addresses, instead you can either:&lt;br /&gt;<br /> - Ask the client to do this, if they don't have access to Merchant Center we can try to add them.<br /> - Create a new email address that only has access to this Merchant Center &amp; sign in with this instead.<br /> <br /> Then the below needs to be done, in this order otherwise it won't send the products through &amp; you'll have to start from scratch:&lt;br /&gt;<br /> - Make sure the Store requirements are met &amp; confirm these, if they aren't then send this back to the client so they can add whats necessary.<br /> - Under Product Feed, start the setup process.<br /> - Connect the Merchant Centre on the settings tab.<br /> - Specify the Target Market &amp; set the Shipping settings to Manual (These will need to be added to Merchant Center by someone afterwards).<br /> If this has been done correctly then the products should now be available within the Merchant Center account.&lt;br /&gt;&lt;br /&gt;<br /> <br /> Below is for Reference, Do not use!&lt;br /&gt;<br /> Alternatively, Shopify does provide you with the Product feed URL for your store.&lt;br /&gt;<br /> To access this, you will need to append .atom to either all of your collections or to a specific collection URL.&lt;br /&gt;<br /> &lt;br /&gt;<br /> For example:<br /> &lt;br /&gt;<br /> &lt;pre&gt;<br /> &quot;yourstorename.com/collections/all.atom&quot;<br /> &quot;yourstorename.com/collections/collectionname.atom&quot;<br /> &lt;/pre&gt;<br /> <br /> = Events for Analytics 4 =<br /> <br /> View Item: &lt;br /&gt;<br /> Add this to product-template.liquid<br /> <br /> &lt;pre&gt;<br /> <br /> &lt;script&gt;<br /> window.dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: &quot;view_item&quot;,<br /> ecommerce: {<br /> currency: &quot;GBP&quot;,<br /> items: [<br /> {<br /> item_id: {{ product.id }},<br /> item_name: &quot;{{ product.title }}&quot;,<br /> {% if product.vendor %} item_brand: &quot;{{ product.vendor }}&quot;, {% endif %}<br /> price: {{ product.price | money_without_currency }},<br /> {% if product.type %} item_category: &quot;{{ product.type }}&quot;, {% endif %}<br /> google_business_vertical: &quot;retail&quot;,<br /> id: &quot;{{ product.id }}&quot;<br /> }<br /> ]<br /> },<br /> });<br /> &lt;/script&gt;<br /> <br /> &lt;/pre&gt;<br /> <br /> Add To Cart:&lt;br /&gt;<br /> The below listener can be added to GTM, this should send add_to_cart events to GTM for you.<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings, data ) {<br /> if (~settings.url.indexOf(&quot;/cart/add&quot;)) { <br /> <br /> var items = [];<br /> items.push({<br /> item_id: data.product_id,<br /> item_name: data.title,<br /> item_category: data.product_type,<br /> price: ( data.price / 100 ),<br /> google_business_vertical: &quot;retail&quot;,<br /> id: data.product_id<br /> });<br /> <br /> if (typeof data.brand != &quot;undefined&quot;) items[0]['item_brand'] = data.brand;<br /> <br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: 'add_to_cart',<br /> ecommerce: {<br /> currency: &quot;GBP&quot;, <br /> items: items<br /> }<br /> });<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Purchases:&lt;br /&gt;<br /> Add this to the Settings &gt; Checkout &gt; Additional Scripts section.<br /> <br /> &lt;pre&gt;<br /> {% if first_time_accessed %}<br /> &lt;script&gt;<br /> var items = [];<br /> var temp = {};<br /> <br /> {% for line_item in line_items %}<br /> temp = {<br /> item_id: {{ line_item.product.id }},<br /> item_name: &quot;{{ line_item.title }}&quot;,<br /> price: {{ line_item.final_line_price | money_without_currency }},<br /> google_business_vertical: &quot;retail&quot;,<br /> id: {{ line_item.product.id }},<br /> quantity: {{ line_item.quantity }}<br /> <br /> };<br /> <br /> {% if line_item.product.type %} <br /> temp['item_category'] = &quot;{{ line_item.product.type }}&quot;;<br /> {% endif %}<br /> <br /> {% if line_item.product.vendor %} <br /> temp['item_brand'] = &quot;{{ line_item.product.vendor }}&quot;;<br /> {% endif %}<br /> <br /> items.push(temp);<br /> <br /> {% endfor %}<br /> <br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: 'purchase',<br /> ecommerce: {<br /> affiliation: 'Online Store',<br /> transaction_id: '{{ order_number }}',<br /> value: '{{ total_price | money_without_currency }}',<br /> tax: '{{ tax_price | money_without_currency }}',<br /> shipping: '{{ shipping_price | money_without_currency}}',<br /> currency: &quot;GBP&quot;, <br /> items: items<br /> }<br /> });<br /> <br /> <br /> &lt;/script&gt;<br /> {% endif %}<br /> &lt;/pre&gt;<br /> <br /> The Event Tag &amp; Variables can be setup with the below template:&lt;br /&gt;<br /> [[File:Shopify-ga4-container-elements.json]]<br /> <br /> = Shopify Links =<br /> Cheat sheet for Variables: &lt;br /&gt;<br /> https://www.shopify.co.uk/partners/shopify-cheat-sheet</div>

Ben.robson https://wiki.growth.agency/index.php?title=Shopify&diff=384 2024-06-10T13:48:11Z

<p>Ben.robson: </p> <hr /> <div>= Shopify Pixel =<br /> <br /> 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 /> <br /> Based on Shopifys documentation:&lt;/br&gt;<br /> [https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial Creating a GTM pixel]&lt;/br&gt;<br /> [https://shopify.dev/docs/api/web-pixels-api/pixel-privacy Pixel privacy documentation]&lt;/br&gt;<br /> <br /> The &lt;noscript&gt; section needs to be added to the &lt;body&gt; through theme.liquid via Online Store &gt; Edit.<br /> <br /> Go to Settings &gt; Customer Events &gt; Add Custom Pixel<br /> Set the Customer Privacy settings to Not required<br /> Set Data Sale to Data collected does not qualify as data sale<br /> <br /> &lt;pre&gt;<br /> // Define dataLayer and the gtag function.<br /> window.dataLayer = window.dataLayer || [];<br /> function gtag(){dataLayer.push(arguments);}<br /> <br /> //Initialize GTM tag<br /> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':<br /> new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],<br /> j=d.createElement(s),dl=l!='dataLayer'?'&amp;l='+l:'';j.async=true;j.src=<br /> 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);<br /> })(window,document,'script','dataLayer', 'GTM-XXXXXX');<br /> <br /> let customerPrivacyStatus = init.customerPrivacy;<br /> let permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );<br /> <br /> //Google Consent Mode v2<br /> gtag('consent', 'default', {<br /> 'ad_storage': permission,<br /> 'analytics_storage': permission,<br /> 'ad_user_data': permission,<br /> 'ad_personalization': permission,<br /> });<br /> <br /> // Use the customerPrivacy Standard API to subscribe to consent collected events and update the status<br /> api.customerPrivacy.subscribe('visitorConsentCollected', (event) =&gt; {<br /> window.dataLayer = window.dataLayer || [];<br /> let customerPrivacyStatus = event.customerPrivacy;<br /> let permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );<br /> gtag('consent', 'update', {<br /> 'ad_storage': permission,<br /> 'analytics_storage': permission,<br /> 'ad_user_data': permission,<br /> 'ad_personalization': permission,<br /> }); <br /> });<br /> <br /> //subscribe to events<br /> analytics.subscribe(&quot;checkout_completed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_completed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> &lt;/pre&gt;<br /> <br /> Other Ecommerce events that could be useful:<br /> <br /> &lt;pre&gt;<br /> <br /> analytics.subscribe(&quot;payment_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;payment_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_shipping_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_shipping_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_address_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_address_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_contact_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_contact_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_started&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_started&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;product_added_to_cart&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;product_added_to_cart&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> price: event.data?.cartLine?.merchandise?.price?.amount,<br /> currency: event.data?.cartLine?.cost?.totalAmount?.currencyCode,<br /> product_id: event.data?.cartLine?.merchandise?.product?.id + '_' + event.data?.cartLine?.merchandise?.id,<br /> product_title: event.data?.cartLine?.merchandise?.product?.title,<br /> quantity: event.data?.cartLine?.quantity,<br /> total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,<br /> test: event.data,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;cart_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;cart_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> total_cost: event.data?.cart?.cost?.totalAmount?.amount,<br /> quantity: event.data?.cart?.totalQuantity,<br /> cart_id: event.data?.cart?.id,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;page_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;page_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> page_title: event.context.document.title,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;product_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;product_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> product_id: event.data?.productVariant?.product?.id + '_' + event.data?.productVariant?.id,<br /> product_title: event.data?.productVariant?.title,<br /> product_sku: event.data?.productVariant?.sku,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;search_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;search_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> query: event.data?.searchResult?.query,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;collection_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;collection_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> collection_id: event.data?.collection?.id,<br /> collection_title: event.data?.collection?.title,<br /> });<br /> });<br /> &lt;/pre&gt;<br /> <br /> = Tag Manager =<br /> <br /> Add Tag Manager to theme:<br /> Modify Theme<br /> &lt;pre&gt;<br /> &quot;online store&quot; -&gt; &quot;...&quot; or &quot;Actions&quot; -&gt; &quot;edit HTML / CSS&quot;<br /> &lt;/pre&gt;<br /> <br /> Modify theme.liquid<br /> <br /> Google Tag Manager will also need to be added to Checkout's additional settings to track conversions<br /> <br /> == Conversion Tracking Code ==<br /> <br /> Google Tag Manager will also need to be added to Checkout's additional settings to track conversions<br /> <br /> In &quot;settings&quot; -&gt; &quot;checkout&quot; -&gt; &quot;additional settings&quot;<br /> <br /> &lt;pre&gt;<br /> {% if first_time_accessed %}<br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'order_id' : '{{ order_number }}', 'order_value' : '{{ total_price | money_without_currency }}', 'event' : 'order-submitted'});<br /> &lt;/script&gt;<br /> {% endif %}<br /> &lt;/pre&gt;<br /> <br /> <br /> *Note: if testing without &quot;{% if first_time_accessed %}&quot; on a order that has already converted, the order ID will not show<br /> <br /> to add product ids add within the code above:<br /> <br /> &lt;pre&gt;<br /> dataLayer.push({ 'product_ids' : [{% for line_item in line_items %}{{ line_item.product_id }}{% unless forloop.last == true %}, {% endunless %}{% endfor %}] });<br /> &lt;/pre&gt;<br /> <br /> <br /> *Note: This was made for dynamic re-marketing, for analytics 4 go to the section below<br /> <br /> === Tracking Contact Page ===<br /> <br /> In the snippets section, go to &quot;form-status.liquid&quot; or &quot;contact.liquid&quot;.<br /> <br /> Find the snippet that shows the success text ( in-between {%- if form.posted_successfully? -%}{%- endif -%} ),<br /> Then add:<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> = Product Feed =<br /> <br /> The below App is free to use &amp; should do most of the setup for you:&lt;br /&gt;<br /> https://apps.shopify.com/google&lt;br /&gt;<br /> <br /> After installing the App a Google account with access to the Merchant Centre needs to sign in.&lt;br /&gt;<br /> DO NOT sign in using one of our Master email addresses, instead you can either:&lt;br /&gt;<br /> - Ask the client to do this, if they don't have access to Merchant Center we can try to add them.<br /> - Create a new email address that only has access to this Merchant Center &amp; sign in with this instead.<br /> <br /> Then the below needs to be done, in this order otherwise it won't send the products through &amp; you'll have to start from scratch:&lt;br /&gt;<br /> - Make sure the Store requirements are met &amp; confirm these, if they aren't then send this back to the client so they can add whats necessary.<br /> - Under Product Feed, start the setup process.<br /> - Connect the Merchant Centre on the settings tab.<br /> - Specify the Target Market &amp; set the Shipping settings to Manual (These will need to be added to Merchant Center by someone afterwards).<br /> If this has been done correctly then the products should now be available within the Merchant Center account.&lt;br /&gt;&lt;br /&gt;<br /> <br /> Below is for Reference, Do not use!&lt;br /&gt;<br /> Alternatively, Shopify does provide you with the Product feed URL for your store.&lt;br /&gt;<br /> To access this, you will need to append .atom to either all of your collections or to a specific collection URL.&lt;br /&gt;<br /> &lt;br /&gt;<br /> For example:<br /> &lt;br /&gt;<br /> &lt;pre&gt;<br /> &quot;yourstorename.com/collections/all.atom&quot;<br /> &quot;yourstorename.com/collections/collectionname.atom&quot;<br /> &lt;/pre&gt;<br /> <br /> = Events for Analytics 4 =<br /> <br /> View Item: &lt;br /&gt;<br /> Add this to product-template.liquid<br /> <br /> &lt;pre&gt;<br /> <br /> &lt;script&gt;<br /> window.dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: &quot;view_item&quot;,<br /> ecommerce: {<br /> currency: &quot;GBP&quot;,<br /> items: [<br /> {<br /> item_id: {{ product.id }},<br /> item_name: &quot;{{ product.title }}&quot;,<br /> {% if product.vendor %} item_brand: &quot;{{ product.vendor }}&quot;, {% endif %}<br /> price: {{ product.price | money_without_currency }},<br /> {% if product.type %} item_category: &quot;{{ product.type }}&quot;, {% endif %}<br /> google_business_vertical: &quot;retail&quot;,<br /> id: &quot;{{ product.id }}&quot;<br /> }<br /> ]<br /> },<br /> });<br /> &lt;/script&gt;<br /> <br /> &lt;/pre&gt;<br /> <br /> Add To Cart:&lt;br /&gt;<br /> The below listener can be added to GTM, this should send add_to_cart events to GTM for you.<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings, data ) {<br /> if (~settings.url.indexOf(&quot;/cart/add&quot;)) { <br /> <br /> var items = [];<br /> items.push({<br /> item_id: data.product_id,<br /> item_name: data.title,<br /> item_category: data.product_type,<br /> price: ( data.price / 100 ),<br /> google_business_vertical: &quot;retail&quot;,<br /> id: data.product_id<br /> });<br /> <br /> if (typeof data.brand != &quot;undefined&quot;) items[0]['item_brand'] = data.brand;<br /> <br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: 'add_to_cart',<br /> ecommerce: {<br /> currency: &quot;GBP&quot;, <br /> items: items<br /> }<br /> });<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Purchases:&lt;br /&gt;<br /> Add this to the Settings &gt; Checkout &gt; Additional Scripts section.<br /> <br /> &lt;pre&gt;<br /> {% if first_time_accessed %}<br /> &lt;script&gt;<br /> var items = [];<br /> var temp = {};<br /> <br /> {% for line_item in line_items %}<br /> temp = {<br /> item_id: {{ line_item.product.id }},<br /> item_name: &quot;{{ line_item.title }}&quot;,<br /> price: {{ line_item.final_line_price | money_without_currency }},<br /> google_business_vertical: &quot;retail&quot;,<br /> id: {{ line_item.product.id }},<br /> quantity: {{ line_item.quantity }}<br /> <br /> };<br /> <br /> {% if line_item.product.type %} <br /> temp['item_category'] = &quot;{{ line_item.product.type }}&quot;;<br /> {% endif %}<br /> <br /> {% if line_item.product.vendor %} <br /> temp['item_brand'] = &quot;{{ line_item.product.vendor }}&quot;;<br /> {% endif %}<br /> <br /> items.push(temp);<br /> <br /> {% endfor %}<br /> <br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: 'purchase',<br /> ecommerce: {<br /> affiliation: 'Online Store',<br /> transaction_id: '{{ order_number }}',<br /> value: '{{ total_price | money_without_currency }}',<br /> tax: '{{ tax_price | money_without_currency }}',<br /> shipping: '{{ shipping_price | money_without_currency}}',<br /> currency: &quot;GBP&quot;, <br /> items: items<br /> }<br /> });<br /> <br /> <br /> &lt;/script&gt;<br /> {% endif %}<br /> &lt;/pre&gt;<br /> <br /> The Event Tag &amp; Variables can be setup with the below template:&lt;br /&gt;<br /> [[File:Shopify-ga4-container-elements.json]]<br /> <br /> = Shopify Links =<br /> Cheat sheet for Variables: &lt;br /&gt;<br /> https://www.shopify.co.uk/partners/shopify-cheat-sheet</div>

Ben.robson https://wiki.growth.agency/index.php?title=Shopify&diff=383 2024-06-10T13:43:55Z

<p>Ben.robson: </p> <hr /> <div>= Shopify Pixel =<br /> <br /> 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 /> <br /> Based on Shopifys documentation:&lt;/br&gt;<br /> [https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial Creating a GTM pixel]&lt;/br&gt;<br /> [https://shopify.dev/docs/api/web-pixels-api/pixel-privacy Pixel privacy documentation]&lt;/br&gt;<br /> <br /> Go to Settings &gt; Customer Events &gt; Add Custom Pixel<br /> Set the Customer Privacy settings to Not required<br /> Set Data Sale to Data collected does not qualify as data sale<br /> <br /> &lt;pre&gt;<br /> // Define dataLayer and the gtag function.<br /> window.dataLayer = window.dataLayer || [];<br /> function gtag(){dataLayer.push(arguments);}<br /> <br /> //Initialize GTM tag<br /> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':<br /> new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],<br /> j=d.createElement(s),dl=l!='dataLayer'?'&amp;l='+l:'';j.async=true;j.src=<br /> 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);<br /> })(window,document,'script','dataLayer', 'GTM-WQLMVPPC');<br /> <br /> let customerPrivacyStatus = init.customerPrivacy;<br /> let permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );<br /> <br /> //Google Consent Mode v2<br /> gtag('consent', 'default', {<br /> 'ad_storage': permission,<br /> 'analytics_storage': permission,<br /> 'ad_user_data': permission,<br /> 'ad_personalization': permission,<br /> });<br /> <br /> // Use the customerPrivacy Standard API to subscribe to consent collected events and update the status<br /> api.customerPrivacy.subscribe('visitorConsentCollected', (event) =&gt; {<br /> window.dataLayer = window.dataLayer || [];<br /> let customerPrivacyStatus = event.customerPrivacy;<br /> let permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );<br /> gtag('consent', 'update', {<br /> 'ad_storage': permission,<br /> 'analytics_storage': permission,<br /> 'ad_user_data': permission,<br /> 'ad_personalization': permission,<br /> }); <br /> });<br /> <br /> //subscribe to events<br /> analytics.subscribe(&quot;checkout_completed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_completed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> &lt;/pre&gt;<br /> <br /> Other Ecommerce events that could be useful:<br /> <br /> &lt;pre&gt;<br /> <br /> analytics.subscribe(&quot;payment_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;payment_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_shipping_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_shipping_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_address_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_address_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_contact_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_contact_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_started&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_started&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;product_added_to_cart&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;product_added_to_cart&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> price: event.data?.cartLine?.merchandise?.price?.amount,<br /> currency: event.data?.cartLine?.cost?.totalAmount?.currencyCode,<br /> product_id: event.data?.cartLine?.merchandise?.product?.id + '_' + event.data?.cartLine?.merchandise?.id,<br /> product_title: event.data?.cartLine?.merchandise?.product?.title,<br /> quantity: event.data?.cartLine?.quantity,<br /> total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,<br /> test: event.data,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;cart_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;cart_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> total_cost: event.data?.cart?.cost?.totalAmount?.amount,<br /> quantity: event.data?.cart?.totalQuantity,<br /> cart_id: event.data?.cart?.id,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;page_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;page_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> page_title: event.context.document.title,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;product_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;product_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> product_id: event.data?.productVariant?.product?.id + '_' + event.data?.productVariant?.id,<br /> product_title: event.data?.productVariant?.title,<br /> product_sku: event.data?.productVariant?.sku,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;search_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;search_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> query: event.data?.searchResult?.query,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;collection_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;collection_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> collection_id: event.data?.collection?.id,<br /> collection_title: event.data?.collection?.title,<br /> });<br /> });<br /> &lt;/pre&gt;<br /> <br /> = Tag Manager =<br /> <br /> Add Tag Manager to theme:<br /> Modify Theme<br /> &lt;pre&gt;<br /> &quot;online store&quot; -&gt; &quot;...&quot; or &quot;Actions&quot; -&gt; &quot;edit HTML / CSS&quot;<br /> &lt;/pre&gt;<br /> <br /> Modify theme.liquid<br /> <br /> Google Tag Manager will also need to be added to Checkout's additional settings to track conversions<br /> <br /> == Conversion Tracking Code ==<br /> <br /> Google Tag Manager will also need to be added to Checkout's additional settings to track conversions<br /> <br /> In &quot;settings&quot; -&gt; &quot;checkout&quot; -&gt; &quot;additional settings&quot;<br /> <br /> &lt;pre&gt;<br /> {% if first_time_accessed %}<br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'order_id' : '{{ order_number }}', 'order_value' : '{{ total_price | money_without_currency }}', 'event' : 'order-submitted'});<br /> &lt;/script&gt;<br /> {% endif %}<br /> &lt;/pre&gt;<br /> <br /> <br /> *Note: if testing without &quot;{% if first_time_accessed %}&quot; on a order that has already converted, the order ID will not show<br /> <br /> to add product ids add within the code above:<br /> <br /> &lt;pre&gt;<br /> dataLayer.push({ 'product_ids' : [{% for line_item in line_items %}{{ line_item.product_id }}{% unless forloop.last == true %}, {% endunless %}{% endfor %}] });<br /> &lt;/pre&gt;<br /> <br /> <br /> *Note: This was made for dynamic re-marketing, for analytics 4 go to the section below<br /> <br /> === Tracking Contact Page ===<br /> <br /> In the snippets section, go to &quot;form-status.liquid&quot; or &quot;contact.liquid&quot;.<br /> <br /> Find the snippet that shows the success text ( in-between {%- if form.posted_successfully? -%}{%- endif -%} ),<br /> Then add:<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> = Product Feed =<br /> <br /> The below App is free to use &amp; should do most of the setup for you:&lt;br /&gt;<br /> https://apps.shopify.com/google&lt;br /&gt;<br /> <br /> After installing the App a Google account with access to the Merchant Centre needs to sign in.&lt;br /&gt;<br /> DO NOT sign in using one of our Master email addresses, instead you can either:&lt;br /&gt;<br /> - Ask the client to do this, if they don't have access to Merchant Center we can try to add them.<br /> - Create a new email address that only has access to this Merchant Center &amp; sign in with this instead.<br /> <br /> Then the below needs to be done, in this order otherwise it won't send the products through &amp; you'll have to start from scratch:&lt;br /&gt;<br /> - Make sure the Store requirements are met &amp; confirm these, if they aren't then send this back to the client so they can add whats necessary.<br /> - Under Product Feed, start the setup process.<br /> - Connect the Merchant Centre on the settings tab.<br /> - Specify the Target Market &amp; set the Shipping settings to Manual (These will need to be added to Merchant Center by someone afterwards).<br /> If this has been done correctly then the products should now be available within the Merchant Center account.&lt;br /&gt;&lt;br /&gt;<br /> <br /> Below is for Reference, Do not use!&lt;br /&gt;<br /> Alternatively, Shopify does provide you with the Product feed URL for your store.&lt;br /&gt;<br /> To access this, you will need to append .atom to either all of your collections or to a specific collection URL.&lt;br /&gt;<br /> &lt;br /&gt;<br /> For example:<br /> &lt;br /&gt;<br /> &lt;pre&gt;<br /> &quot;yourstorename.com/collections/all.atom&quot;<br /> &quot;yourstorename.com/collections/collectionname.atom&quot;<br /> &lt;/pre&gt;<br /> <br /> = Events for Analytics 4 =<br /> <br /> View Item: &lt;br /&gt;<br /> Add this to product-template.liquid<br /> <br /> &lt;pre&gt;<br /> <br /> &lt;script&gt;<br /> window.dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: &quot;view_item&quot;,<br /> ecommerce: {<br /> currency: &quot;GBP&quot;,<br /> items: [<br /> {<br /> item_id: {{ product.id }},<br /> item_name: &quot;{{ product.title }}&quot;,<br /> {% if product.vendor %} item_brand: &quot;{{ product.vendor }}&quot;, {% endif %}<br /> price: {{ product.price | money_without_currency }},<br /> {% if product.type %} item_category: &quot;{{ product.type }}&quot;, {% endif %}<br /> google_business_vertical: &quot;retail&quot;,<br /> id: &quot;{{ product.id }}&quot;<br /> }<br /> ]<br /> },<br /> });<br /> &lt;/script&gt;<br /> <br /> &lt;/pre&gt;<br /> <br /> Add To Cart:&lt;br /&gt;<br /> The below listener can be added to GTM, this should send add_to_cart events to GTM for you.<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings, data ) {<br /> if (~settings.url.indexOf(&quot;/cart/add&quot;)) { <br /> <br /> var items = [];<br /> items.push({<br /> item_id: data.product_id,<br /> item_name: data.title,<br /> item_category: data.product_type,<br /> price: ( data.price / 100 ),<br /> google_business_vertical: &quot;retail&quot;,<br /> id: data.product_id<br /> });<br /> <br /> if (typeof data.brand != &quot;undefined&quot;) items[0]['item_brand'] = data.brand;<br /> <br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: 'add_to_cart',<br /> ecommerce: {<br /> currency: &quot;GBP&quot;, <br /> items: items<br /> }<br /> });<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Purchases:&lt;br /&gt;<br /> Add this to the Settings &gt; Checkout &gt; Additional Scripts section.<br /> <br /> &lt;pre&gt;<br /> {% if first_time_accessed %}<br /> &lt;script&gt;<br /> var items = [];<br /> var temp = {};<br /> <br /> {% for line_item in line_items %}<br /> temp = {<br /> item_id: {{ line_item.product.id }},<br /> item_name: &quot;{{ line_item.title }}&quot;,<br /> price: {{ line_item.final_line_price | money_without_currency }},<br /> google_business_vertical: &quot;retail&quot;,<br /> id: {{ line_item.product.id }},<br /> quantity: {{ line_item.quantity }}<br /> <br /> };<br /> <br /> {% if line_item.product.type %} <br /> temp['item_category'] = &quot;{{ line_item.product.type }}&quot;;<br /> {% endif %}<br /> <br /> {% if line_item.product.vendor %} <br /> temp['item_brand'] = &quot;{{ line_item.product.vendor }}&quot;;<br /> {% endif %}<br /> <br /> items.push(temp);<br /> <br /> {% endfor %}<br /> <br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: 'purchase',<br /> ecommerce: {<br /> affiliation: 'Online Store',<br /> transaction_id: '{{ order_number }}',<br /> value: '{{ total_price | money_without_currency }}',<br /> tax: '{{ tax_price | money_without_currency }}',<br /> shipping: '{{ shipping_price | money_without_currency}}',<br /> currency: &quot;GBP&quot;, <br /> items: items<br /> }<br /> });<br /> <br /> <br /> &lt;/script&gt;<br /> {% endif %}<br /> &lt;/pre&gt;<br /> <br /> The Event Tag &amp; Variables can be setup with the below template:&lt;br /&gt;<br /> [[File:Shopify-ga4-container-elements.json]]<br /> <br /> = Shopify Links =<br /> Cheat sheet for Variables: &lt;br /&gt;<br /> https://www.shopify.co.uk/partners/shopify-cheat-sheet</div>

Ben.robson https://wiki.growth.agency/index.php?title=Shopify&diff=382 2024-06-10T13:43:07Z

<p>Ben.robson: </p> <hr /> <div>= Shopify Pixel =<br /> <br /> 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 /> <br /> Based on Shopifys documentation:<br /> [https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial Creating a GTM pixel]<br /> &lt;a href=&quot;https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial&quot; target=&quot;_blank&quot;&gt;Creating a GTM pixel&lt;/a&gt;<br /> &lt;a href=&quot;https://shopify.dev/docs/api/web-pixels-api/pixel-privacy&quot; target=&quot;_blank&quot;&gt;Pixel privacy&lt;/a&gt;<br /> <br /> Go to Settings &gt; Customer Events &gt; Add Custom Pixel<br /> Set the Customer Privacy settings to Not required<br /> Set Data Sale to Data collected does not qualify as data sale<br /> <br /> &lt;pre&gt;<br /> // Define dataLayer and the gtag function.<br /> window.dataLayer = window.dataLayer || [];<br /> function gtag(){dataLayer.push(arguments);}<br /> <br /> //Initialize GTM tag<br /> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':<br /> new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],<br /> j=d.createElement(s),dl=l!='dataLayer'?'&amp;l='+l:'';j.async=true;j.src=<br /> 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);<br /> })(window,document,'script','dataLayer', 'GTM-WQLMVPPC');<br /> <br /> let customerPrivacyStatus = init.customerPrivacy;<br /> let permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );<br /> <br /> //Google Consent Mode v2<br /> gtag('consent', 'default', {<br /> 'ad_storage': permission,<br /> 'analytics_storage': permission,<br /> 'ad_user_data': permission,<br /> 'ad_personalization': permission,<br /> });<br /> <br /> // Use the customerPrivacy Standard API to subscribe to consent collected events and update the status<br /> api.customerPrivacy.subscribe('visitorConsentCollected', (event) =&gt; {<br /> window.dataLayer = window.dataLayer || [];<br /> let customerPrivacyStatus = event.customerPrivacy;<br /> let permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );<br /> gtag('consent', 'update', {<br /> 'ad_storage': permission,<br /> 'analytics_storage': permission,<br /> 'ad_user_data': permission,<br /> 'ad_personalization': permission,<br /> }); <br /> });<br /> <br /> //subscribe to events<br /> analytics.subscribe(&quot;checkout_completed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_completed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> &lt;/pre&gt;<br /> <br /> Other Ecommerce events that could be useful:<br /> <br /> &lt;pre&gt;<br /> <br /> analytics.subscribe(&quot;payment_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;payment_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_shipping_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_shipping_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_address_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_address_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_contact_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_contact_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_started&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_started&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;product_added_to_cart&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;product_added_to_cart&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> price: event.data?.cartLine?.merchandise?.price?.amount,<br /> currency: event.data?.cartLine?.cost?.totalAmount?.currencyCode,<br /> product_id: event.data?.cartLine?.merchandise?.product?.id + '_' + event.data?.cartLine?.merchandise?.id,<br /> product_title: event.data?.cartLine?.merchandise?.product?.title,<br /> quantity: event.data?.cartLine?.quantity,<br /> total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,<br /> test: event.data,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;cart_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;cart_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> total_cost: event.data?.cart?.cost?.totalAmount?.amount,<br /> quantity: event.data?.cart?.totalQuantity,<br /> cart_id: event.data?.cart?.id,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;page_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;page_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> page_title: event.context.document.title,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;product_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;product_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> product_id: event.data?.productVariant?.product?.id + '_' + event.data?.productVariant?.id,<br /> product_title: event.data?.productVariant?.title,<br /> product_sku: event.data?.productVariant?.sku,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;search_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;search_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> query: event.data?.searchResult?.query,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;collection_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;collection_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> collection_id: event.data?.collection?.id,<br /> collection_title: event.data?.collection?.title,<br /> });<br /> });<br /> &lt;/pre&gt;<br /> <br /> = Tag Manager =<br /> <br /> Add Tag Manager to theme:<br /> Modify Theme<br /> &lt;pre&gt;<br /> &quot;online store&quot; -&gt; &quot;...&quot; or &quot;Actions&quot; -&gt; &quot;edit HTML / CSS&quot;<br /> &lt;/pre&gt;<br /> <br /> Modify theme.liquid<br /> <br /> Google Tag Manager will also need to be added to Checkout's additional settings to track conversions<br /> <br /> == Conversion Tracking Code ==<br /> <br /> Google Tag Manager will also need to be added to Checkout's additional settings to track conversions<br /> <br /> In &quot;settings&quot; -&gt; &quot;checkout&quot; -&gt; &quot;additional settings&quot;<br /> <br /> &lt;pre&gt;<br /> {% if first_time_accessed %}<br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'order_id' : '{{ order_number }}', 'order_value' : '{{ total_price | money_without_currency }}', 'event' : 'order-submitted'});<br /> &lt;/script&gt;<br /> {% endif %}<br /> &lt;/pre&gt;<br /> <br /> <br /> *Note: if testing without &quot;{% if first_time_accessed %}&quot; on a order that has already converted, the order ID will not show<br /> <br /> to add product ids add within the code above:<br /> <br /> &lt;pre&gt;<br /> dataLayer.push({ 'product_ids' : [{% for line_item in line_items %}{{ line_item.product_id }}{% unless forloop.last == true %}, {% endunless %}{% endfor %}] });<br /> &lt;/pre&gt;<br /> <br /> <br /> *Note: This was made for dynamic re-marketing, for analytics 4 go to the section below<br /> <br /> === Tracking Contact Page ===<br /> <br /> In the snippets section, go to &quot;form-status.liquid&quot; or &quot;contact.liquid&quot;.<br /> <br /> Find the snippet that shows the success text ( in-between {%- if form.posted_successfully? -%}{%- endif -%} ),<br /> Then add:<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> = Product Feed =<br /> <br /> The below App is free to use &amp; should do most of the setup for you:&lt;br /&gt;<br /> https://apps.shopify.com/google&lt;br /&gt;<br /> <br /> After installing the App a Google account with access to the Merchant Centre needs to sign in.&lt;br /&gt;<br /> DO NOT sign in using one of our Master email addresses, instead you can either:&lt;br /&gt;<br /> - Ask the client to do this, if they don't have access to Merchant Center we can try to add them.<br /> - Create a new email address that only has access to this Merchant Center &amp; sign in with this instead.<br /> <br /> Then the below needs to be done, in this order otherwise it won't send the products through &amp; you'll have to start from scratch:&lt;br /&gt;<br /> - Make sure the Store requirements are met &amp; confirm these, if they aren't then send this back to the client so they can add whats necessary.<br /> - Under Product Feed, start the setup process.<br /> - Connect the Merchant Centre on the settings tab.<br /> - Specify the Target Market &amp; set the Shipping settings to Manual (These will need to be added to Merchant Center by someone afterwards).<br /> If this has been done correctly then the products should now be available within the Merchant Center account.&lt;br /&gt;&lt;br /&gt;<br /> <br /> Below is for Reference, Do not use!&lt;br /&gt;<br /> Alternatively, Shopify does provide you with the Product feed URL for your store.&lt;br /&gt;<br /> To access this, you will need to append .atom to either all of your collections or to a specific collection URL.&lt;br /&gt;<br /> &lt;br /&gt;<br /> For example:<br /> &lt;br /&gt;<br /> &lt;pre&gt;<br /> &quot;yourstorename.com/collections/all.atom&quot;<br /> &quot;yourstorename.com/collections/collectionname.atom&quot;<br /> &lt;/pre&gt;<br /> <br /> = Events for Analytics 4 =<br /> <br /> View Item: &lt;br /&gt;<br /> Add this to product-template.liquid<br /> <br /> &lt;pre&gt;<br /> <br /> &lt;script&gt;<br /> window.dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: &quot;view_item&quot;,<br /> ecommerce: {<br /> currency: &quot;GBP&quot;,<br /> items: [<br /> {<br /> item_id: {{ product.id }},<br /> item_name: &quot;{{ product.title }}&quot;,<br /> {% if product.vendor %} item_brand: &quot;{{ product.vendor }}&quot;, {% endif %}<br /> price: {{ product.price | money_without_currency }},<br /> {% if product.type %} item_category: &quot;{{ product.type }}&quot;, {% endif %}<br /> google_business_vertical: &quot;retail&quot;,<br /> id: &quot;{{ product.id }}&quot;<br /> }<br /> ]<br /> },<br /> });<br /> &lt;/script&gt;<br /> <br /> &lt;/pre&gt;<br /> <br /> Add To Cart:&lt;br /&gt;<br /> The below listener can be added to GTM, this should send add_to_cart events to GTM for you.<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings, data ) {<br /> if (~settings.url.indexOf(&quot;/cart/add&quot;)) { <br /> <br /> var items = [];<br /> items.push({<br /> item_id: data.product_id,<br /> item_name: data.title,<br /> item_category: data.product_type,<br /> price: ( data.price / 100 ),<br /> google_business_vertical: &quot;retail&quot;,<br /> id: data.product_id<br /> });<br /> <br /> if (typeof data.brand != &quot;undefined&quot;) items[0]['item_brand'] = data.brand;<br /> <br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: 'add_to_cart',<br /> ecommerce: {<br /> currency: &quot;GBP&quot;, <br /> items: items<br /> }<br /> });<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Purchases:&lt;br /&gt;<br /> Add this to the Settings &gt; Checkout &gt; Additional Scripts section.<br /> <br /> &lt;pre&gt;<br /> {% if first_time_accessed %}<br /> &lt;script&gt;<br /> var items = [];<br /> var temp = {};<br /> <br /> {% for line_item in line_items %}<br /> temp = {<br /> item_id: {{ line_item.product.id }},<br /> item_name: &quot;{{ line_item.title }}&quot;,<br /> price: {{ line_item.final_line_price | money_without_currency }},<br /> google_business_vertical: &quot;retail&quot;,<br /> id: {{ line_item.product.id }},<br /> quantity: {{ line_item.quantity }}<br /> <br /> };<br /> <br /> {% if line_item.product.type %} <br /> temp['item_category'] = &quot;{{ line_item.product.type }}&quot;;<br /> {% endif %}<br /> <br /> {% if line_item.product.vendor %} <br /> temp['item_brand'] = &quot;{{ line_item.product.vendor }}&quot;;<br /> {% endif %}<br /> <br /> items.push(temp);<br /> <br /> {% endfor %}<br /> <br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: 'purchase',<br /> ecommerce: {<br /> affiliation: 'Online Store',<br /> transaction_id: '{{ order_number }}',<br /> value: '{{ total_price | money_without_currency }}',<br /> tax: '{{ tax_price | money_without_currency }}',<br /> shipping: '{{ shipping_price | money_without_currency}}',<br /> currency: &quot;GBP&quot;, <br /> items: items<br /> }<br /> });<br /> <br /> <br /> &lt;/script&gt;<br /> {% endif %}<br /> &lt;/pre&gt;<br /> <br /> The Event Tag &amp; Variables can be setup with the below template:&lt;br /&gt;<br /> [[File:Shopify-ga4-container-elements.json]]<br /> <br /> = Shopify Links =<br /> Cheat sheet for Variables: &lt;br /&gt;<br /> https://www.shopify.co.uk/partners/shopify-cheat-sheet</div>

Ben.robson https://wiki.growth.agency/index.php?title=Shopify&diff=381 2024-06-10T13:40:17Z

<p>Ben.robson: </p> <hr /> <div>= Shopify Pixel =<br /> <br /> 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 /> <br /> Based on Shopifys documentation:<br /> [Creating a GTM pixel](https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial)<br /> &lt;a href=&quot;https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial&quot; target=&quot;_blank&quot;&gt;Creating a GTM pixel&lt;/a&gt;<br /> &lt;a href=&quot;https://shopify.dev/docs/api/web-pixels-api/pixel-privacy&quot; target=&quot;_blank&quot;&gt;Pixel privacy&lt;/a&gt;<br /> <br /> Go to Settings &gt; Customer Events &gt; Add Custom Pixel<br /> Set the Customer Privacy settings to Not required<br /> Set Data Sale to Data collected does not qualify as data sale<br /> <br /> &lt;pre&gt;<br /> // Define dataLayer and the gtag function.<br /> window.dataLayer = window.dataLayer || [];<br /> function gtag(){dataLayer.push(arguments);}<br /> <br /> //Initialize GTM tag<br /> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':<br /> new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],<br /> j=d.createElement(s),dl=l!='dataLayer'?'&amp;l='+l:'';j.async=true;j.src=<br /> 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);<br /> })(window,document,'script','dataLayer', 'GTM-WQLMVPPC');<br /> <br /> let customerPrivacyStatus = init.customerPrivacy;<br /> let permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );<br /> <br /> //Google Consent Mode v2<br /> gtag('consent', 'default', {<br /> 'ad_storage': permission,<br /> 'analytics_storage': permission,<br /> 'ad_user_data': permission,<br /> 'ad_personalization': permission,<br /> });<br /> <br /> // Use the customerPrivacy Standard API to subscribe to consent collected events and update the status<br /> api.customerPrivacy.subscribe('visitorConsentCollected', (event) =&gt; {<br /> window.dataLayer = window.dataLayer || [];<br /> let customerPrivacyStatus = event.customerPrivacy;<br /> let permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );<br /> gtag('consent', 'update', {<br /> 'ad_storage': permission,<br /> 'analytics_storage': permission,<br /> 'ad_user_data': permission,<br /> 'ad_personalization': permission,<br /> }); <br /> });<br /> <br /> //subscribe to events<br /> analytics.subscribe(&quot;checkout_completed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_completed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> &lt;/pre&gt;<br /> <br /> Other Ecommerce events that could be useful:<br /> <br /> &lt;pre&gt;<br /> <br /> analytics.subscribe(&quot;payment_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;payment_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_shipping_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_shipping_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_address_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_address_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_contact_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_contact_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_started&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_started&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;product_added_to_cart&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;product_added_to_cart&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> price: event.data?.cartLine?.merchandise?.price?.amount,<br /> currency: event.data?.cartLine?.cost?.totalAmount?.currencyCode,<br /> product_id: event.data?.cartLine?.merchandise?.product?.id + '_' + event.data?.cartLine?.merchandise?.id,<br /> product_title: event.data?.cartLine?.merchandise?.product?.title,<br /> quantity: event.data?.cartLine?.quantity,<br /> total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,<br /> test: event.data,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;cart_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;cart_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> total_cost: event.data?.cart?.cost?.totalAmount?.amount,<br /> quantity: event.data?.cart?.totalQuantity,<br /> cart_id: event.data?.cart?.id,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;page_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;page_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> page_title: event.context.document.title,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;product_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;product_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> product_id: event.data?.productVariant?.product?.id + '_' + event.data?.productVariant?.id,<br /> product_title: event.data?.productVariant?.title,<br /> product_sku: event.data?.productVariant?.sku,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;search_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;search_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> query: event.data?.searchResult?.query,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;collection_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;collection_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> collection_id: event.data?.collection?.id,<br /> collection_title: event.data?.collection?.title,<br /> });<br /> });<br /> &lt;/pre&gt;<br /> <br /> = Tag Manager =<br /> <br /> Add Tag Manager to theme:<br /> Modify Theme<br /> &lt;pre&gt;<br /> &quot;online store&quot; -&gt; &quot;...&quot; or &quot;Actions&quot; -&gt; &quot;edit HTML / CSS&quot;<br /> &lt;/pre&gt;<br /> <br /> Modify theme.liquid<br /> <br /> Google Tag Manager will also need to be added to Checkout's additional settings to track conversions<br /> <br /> == Conversion Tracking Code ==<br /> <br /> Google Tag Manager will also need to be added to Checkout's additional settings to track conversions<br /> <br /> In &quot;settings&quot; -&gt; &quot;checkout&quot; -&gt; &quot;additional settings&quot;<br /> <br /> &lt;pre&gt;<br /> {% if first_time_accessed %}<br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'order_id' : '{{ order_number }}', 'order_value' : '{{ total_price | money_without_currency }}', 'event' : 'order-submitted'});<br /> &lt;/script&gt;<br /> {% endif %}<br /> &lt;/pre&gt;<br /> <br /> <br /> *Note: if testing without &quot;{% if first_time_accessed %}&quot; on a order that has already converted, the order ID will not show<br /> <br /> to add product ids add within the code above:<br /> <br /> &lt;pre&gt;<br /> dataLayer.push({ 'product_ids' : [{% for line_item in line_items %}{{ line_item.product_id }}{% unless forloop.last == true %}, {% endunless %}{% endfor %}] });<br /> &lt;/pre&gt;<br /> <br /> <br /> *Note: This was made for dynamic re-marketing, for analytics 4 go to the section below<br /> <br /> === Tracking Contact Page ===<br /> <br /> In the snippets section, go to &quot;form-status.liquid&quot; or &quot;contact.liquid&quot;.<br /> <br /> Find the snippet that shows the success text ( in-between {%- if form.posted_successfully? -%}{%- endif -%} ),<br /> Then add:<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> = Product Feed =<br /> <br /> The below App is free to use &amp; should do most of the setup for you:&lt;br /&gt;<br /> https://apps.shopify.com/google&lt;br /&gt;<br /> <br /> After installing the App a Google account with access to the Merchant Centre needs to sign in.&lt;br /&gt;<br /> DO NOT sign in using one of our Master email addresses, instead you can either:&lt;br /&gt;<br /> - Ask the client to do this, if they don't have access to Merchant Center we can try to add them.<br /> - Create a new email address that only has access to this Merchant Center &amp; sign in with this instead.<br /> <br /> Then the below needs to be done, in this order otherwise it won't send the products through &amp; you'll have to start from scratch:&lt;br /&gt;<br /> - Make sure the Store requirements are met &amp; confirm these, if they aren't then send this back to the client so they can add whats necessary.<br /> - Under Product Feed, start the setup process.<br /> - Connect the Merchant Centre on the settings tab.<br /> - Specify the Target Market &amp; set the Shipping settings to Manual (These will need to be added to Merchant Center by someone afterwards).<br /> If this has been done correctly then the products should now be available within the Merchant Center account.&lt;br /&gt;&lt;br /&gt;<br /> <br /> Below is for Reference, Do not use!&lt;br /&gt;<br /> Alternatively, Shopify does provide you with the Product feed URL for your store.&lt;br /&gt;<br /> To access this, you will need to append .atom to either all of your collections or to a specific collection URL.&lt;br /&gt;<br /> &lt;br /&gt;<br /> For example:<br /> &lt;br /&gt;<br /> &lt;pre&gt;<br /> &quot;yourstorename.com/collections/all.atom&quot;<br /> &quot;yourstorename.com/collections/collectionname.atom&quot;<br /> &lt;/pre&gt;<br /> <br /> = Events for Analytics 4 =<br /> <br /> View Item: &lt;br /&gt;<br /> Add this to product-template.liquid<br /> <br /> &lt;pre&gt;<br /> <br /> &lt;script&gt;<br /> window.dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: &quot;view_item&quot;,<br /> ecommerce: {<br /> currency: &quot;GBP&quot;,<br /> items: [<br /> {<br /> item_id: {{ product.id }},<br /> item_name: &quot;{{ product.title }}&quot;,<br /> {% if product.vendor %} item_brand: &quot;{{ product.vendor }}&quot;, {% endif %}<br /> price: {{ product.price | money_without_currency }},<br /> {% if product.type %} item_category: &quot;{{ product.type }}&quot;, {% endif %}<br /> google_business_vertical: &quot;retail&quot;,<br /> id: &quot;{{ product.id }}&quot;<br /> }<br /> ]<br /> },<br /> });<br /> &lt;/script&gt;<br /> <br /> &lt;/pre&gt;<br /> <br /> Add To Cart:&lt;br /&gt;<br /> The below listener can be added to GTM, this should send add_to_cart events to GTM for you.<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings, data ) {<br /> if (~settings.url.indexOf(&quot;/cart/add&quot;)) { <br /> <br /> var items = [];<br /> items.push({<br /> item_id: data.product_id,<br /> item_name: data.title,<br /> item_category: data.product_type,<br /> price: ( data.price / 100 ),<br /> google_business_vertical: &quot;retail&quot;,<br /> id: data.product_id<br /> });<br /> <br /> if (typeof data.brand != &quot;undefined&quot;) items[0]['item_brand'] = data.brand;<br /> <br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: 'add_to_cart',<br /> ecommerce: {<br /> currency: &quot;GBP&quot;, <br /> items: items<br /> }<br /> });<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Purchases:&lt;br /&gt;<br /> Add this to the Settings &gt; Checkout &gt; Additional Scripts section.<br /> <br /> &lt;pre&gt;<br /> {% if first_time_accessed %}<br /> &lt;script&gt;<br /> var items = [];<br /> var temp = {};<br /> <br /> {% for line_item in line_items %}<br /> temp = {<br /> item_id: {{ line_item.product.id }},<br /> item_name: &quot;{{ line_item.title }}&quot;,<br /> price: {{ line_item.final_line_price | money_without_currency }},<br /> google_business_vertical: &quot;retail&quot;,<br /> id: {{ line_item.product.id }},<br /> quantity: {{ line_item.quantity }}<br /> <br /> };<br /> <br /> {% if line_item.product.type %} <br /> temp['item_category'] = &quot;{{ line_item.product.type }}&quot;;<br /> {% endif %}<br /> <br /> {% if line_item.product.vendor %} <br /> temp['item_brand'] = &quot;{{ line_item.product.vendor }}&quot;;<br /> {% endif %}<br /> <br /> items.push(temp);<br /> <br /> {% endfor %}<br /> <br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: 'purchase',<br /> ecommerce: {<br /> affiliation: 'Online Store',<br /> transaction_id: '{{ order_number }}',<br /> value: '{{ total_price | money_without_currency }}',<br /> tax: '{{ tax_price | money_without_currency }}',<br /> shipping: '{{ shipping_price | money_without_currency}}',<br /> currency: &quot;GBP&quot;, <br /> items: items<br /> }<br /> });<br /> <br /> <br /> &lt;/script&gt;<br /> {% endif %}<br /> &lt;/pre&gt;<br /> <br /> The Event Tag &amp; Variables can be setup with the below template:&lt;br /&gt;<br /> [[File:Shopify-ga4-container-elements.json]]<br /> <br /> = Shopify Links =<br /> Cheat sheet for Variables: &lt;br /&gt;<br /> https://www.shopify.co.uk/partners/shopify-cheat-sheet</div>

Ben.robson https://wiki.growth.agency/index.php?title=Shopify&diff=380 2024-06-10T13:38:05Z

<p>Ben.robson: </p> <hr /> <div>= Shopify Pixel =<br /> <br /> 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 /> <br /> Based on Shopifys documentation:<br /> &lt;a href=&quot;https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial&quot; target=&quot;_blank&quot;&gt;Creating a GTM pixel&lt;/a&gt;<br /> &lt;a href=&quot;https://shopify.dev/docs/api/web-pixels-api/pixel-privacy&quot; target=&quot;_blank&quot;&gt;Pixel privacy&lt;/a&gt;<br /> <br /> Go to Settings &gt; Customer Events &gt; Add Custom Pixel<br /> Set the Customer Privacy settings to Not required<br /> Set Data Sale to Data collected does not qualify as data sale<br /> <br /> &lt;pre&gt;<br /> // Define dataLayer and the gtag function.<br /> window.dataLayer = window.dataLayer || [];<br /> function gtag(){dataLayer.push(arguments);}<br /> <br /> //Initialize GTM tag<br /> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':<br /> new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],<br /> j=d.createElement(s),dl=l!='dataLayer'?'&amp;l='+l:'';j.async=true;j.src=<br /> 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);<br /> })(window,document,'script','dataLayer', 'GTM-WQLMVPPC');<br /> <br /> let customerPrivacyStatus = init.customerPrivacy;<br /> let permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );<br /> <br /> //Google Consent Mode v2<br /> gtag('consent', 'default', {<br /> 'ad_storage': permission,<br /> 'analytics_storage': permission,<br /> 'ad_user_data': permission,<br /> 'ad_personalization': permission,<br /> });<br /> <br /> // Use the customerPrivacy Standard API to subscribe to consent collected events and update the status<br /> api.customerPrivacy.subscribe('visitorConsentCollected', (event) =&gt; {<br /> window.dataLayer = window.dataLayer || [];<br /> let customerPrivacyStatus = event.customerPrivacy;<br /> let permission = ( customerPrivacyStatus.marketingAllowed ? 'granted' : 'denied' );<br /> gtag('consent', 'update', {<br /> 'ad_storage': permission,<br /> 'analytics_storage': permission,<br /> 'ad_user_data': permission,<br /> 'ad_personalization': permission,<br /> }); <br /> });<br /> <br /> //subscribe to events<br /> analytics.subscribe(&quot;checkout_completed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_completed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> &lt;/pre&gt;<br /> <br /> Other Ecommerce events that could be useful:<br /> <br /> &lt;pre&gt;<br /> <br /> analytics.subscribe(&quot;payment_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;payment_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_shipping_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_shipping_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_address_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_address_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_contact_info_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_contact_info_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;checkout_started&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;checkout_started&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> token: event.data?.checkout?.token,<br /> url: event.context.document.location.href,<br /> client_id: event.clientId,<br /> email: event.data?.checkout?.email,<br /> phone: event.data?.checkout?.phone,<br /> first_name: event.data?.checkout?.shippingAddress?.firstName,<br /> last_name: event.data?.checkout?.shippingAddress?.lastName,<br /> address1: event.data?.checkout?.shippingAddress?.address1,<br /> address2: event.data?.checkout?.shippingAddress?.address2,<br /> city: event.data?.checkout?.shippingAddress?.city,<br /> country: event.data?.checkout?.shippingAddress?.country,<br /> countryCode: event.data?.checkout?.shippingAddress?.countryCode,<br /> province: event.data?.checkout?.shippingAddress?.province,<br /> provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,<br /> zip: event.data?.checkout?.shippingAddress?.zip,<br /> orderId: event.data?.checkout?.order?.id,<br /> currency: event.data?.checkout?.currencyCode,<br /> subtotal: event.data?.checkout?.subtotalPrice?.amount,<br /> shipping: event.data?.checkout?.shippingLine?.price?.amount,<br /> value: event.data?.checkout?.totalPrice?.amount,<br /> tax: event.data?.checkout?.totalTax?.amount,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;product_added_to_cart&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;product_added_to_cart&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> price: event.data?.cartLine?.merchandise?.price?.amount,<br /> currency: event.data?.cartLine?.cost?.totalAmount?.currencyCode,<br /> product_id: event.data?.cartLine?.merchandise?.product?.id + '_' + event.data?.cartLine?.merchandise?.id,<br /> product_title: event.data?.cartLine?.merchandise?.product?.title,<br /> quantity: event.data?.cartLine?.quantity,<br /> total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,<br /> test: event.data,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;cart_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;cart_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> total_cost: event.data?.cart?.cost?.totalAmount?.amount,<br /> quantity: event.data?.cart?.totalQuantity,<br /> cart_id: event.data?.cart?.id,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;page_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;page_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> page_title: event.context.document.title,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;product_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;product_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> product_id: event.data?.productVariant?.product?.id + '_' + event.data?.productVariant?.id,<br /> product_title: event.data?.productVariant?.title,<br /> product_sku: event.data?.productVariant?.sku,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;search_submitted&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;search_submitted&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> query: event.data?.searchResult?.query,<br /> });<br /> });<br /> <br /> analytics.subscribe(&quot;collection_viewed&quot;, (event) =&gt; {<br /> window.dataLayer.push({<br /> event: &quot;collection_viewed&quot;,<br /> timestamp: event.timestamp,<br /> id: event.id,<br /> client_id: event.clientId,<br /> url: event.context.document.location.href,<br /> collection_id: event.data?.collection?.id,<br /> collection_title: event.data?.collection?.title,<br /> });<br /> });<br /> &lt;/pre&gt;<br /> <br /> = Tag Manager =<br /> <br /> Add Tag Manager to theme:<br /> Modify Theme<br /> &lt;pre&gt;<br /> &quot;online store&quot; -&gt; &quot;...&quot; or &quot;Actions&quot; -&gt; &quot;edit HTML / CSS&quot;<br /> &lt;/pre&gt;<br /> <br /> Modify theme.liquid<br /> <br /> Google Tag Manager will also need to be added to Checkout's additional settings to track conversions<br /> <br /> == Conversion Tracking Code ==<br /> <br /> Google Tag Manager will also need to be added to Checkout's additional settings to track conversions<br /> <br /> In &quot;settings&quot; -&gt; &quot;checkout&quot; -&gt; &quot;additional settings&quot;<br /> <br /> &lt;pre&gt;<br /> {% if first_time_accessed %}<br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'order_id' : '{{ order_number }}', 'order_value' : '{{ total_price | money_without_currency }}', 'event' : 'order-submitted'});<br /> &lt;/script&gt;<br /> {% endif %}<br /> &lt;/pre&gt;<br /> <br /> <br /> *Note: if testing without &quot;{% if first_time_accessed %}&quot; on a order that has already converted, the order ID will not show<br /> <br /> to add product ids add within the code above:<br /> <br /> &lt;pre&gt;<br /> dataLayer.push({ 'product_ids' : [{% for line_item in line_items %}{{ line_item.product_id }}{% unless forloop.last == true %}, {% endunless %}{% endfor %}] });<br /> &lt;/pre&gt;<br /> <br /> <br /> *Note: This was made for dynamic re-marketing, for analytics 4 go to the section below<br /> <br /> === Tracking Contact Page ===<br /> <br /> In the snippets section, go to &quot;form-status.liquid&quot; or &quot;contact.liquid&quot;.<br /> <br /> Find the snippet that shows the success text ( in-between {%- if form.posted_successfully? -%}{%- endif -%} ),<br /> Then add:<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> = Product Feed =<br /> <br /> The below App is free to use &amp; should do most of the setup for you:&lt;br /&gt;<br /> https://apps.shopify.com/google&lt;br /&gt;<br /> <br /> After installing the App a Google account with access to the Merchant Centre needs to sign in.&lt;br /&gt;<br /> DO NOT sign in using one of our Master email addresses, instead you can either:&lt;br /&gt;<br /> - Ask the client to do this, if they don't have access to Merchant Center we can try to add them.<br /> - Create a new email address that only has access to this Merchant Center &amp; sign in with this instead.<br /> <br /> Then the below needs to be done, in this order otherwise it won't send the products through &amp; you'll have to start from scratch:&lt;br /&gt;<br /> - Make sure the Store requirements are met &amp; confirm these, if they aren't then send this back to the client so they can add whats necessary.<br /> - Under Product Feed, start the setup process.<br /> - Connect the Merchant Centre on the settings tab.<br /> - Specify the Target Market &amp; set the Shipping settings to Manual (These will need to be added to Merchant Center by someone afterwards).<br /> If this has been done correctly then the products should now be available within the Merchant Center account.&lt;br /&gt;&lt;br /&gt;<br /> <br /> Below is for Reference, Do not use!&lt;br /&gt;<br /> Alternatively, Shopify does provide you with the Product feed URL for your store.&lt;br /&gt;<br /> To access this, you will need to append .atom to either all of your collections or to a specific collection URL.&lt;br /&gt;<br /> &lt;br /&gt;<br /> For example:<br /> &lt;br /&gt;<br /> &lt;pre&gt;<br /> &quot;yourstorename.com/collections/all.atom&quot;<br /> &quot;yourstorename.com/collections/collectionname.atom&quot;<br /> &lt;/pre&gt;<br /> <br /> = Events for Analytics 4 =<br /> <br /> View Item: &lt;br /&gt;<br /> Add this to product-template.liquid<br /> <br /> &lt;pre&gt;<br /> <br /> &lt;script&gt;<br /> window.dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: &quot;view_item&quot;,<br /> ecommerce: {<br /> currency: &quot;GBP&quot;,<br /> items: [<br /> {<br /> item_id: {{ product.id }},<br /> item_name: &quot;{{ product.title }}&quot;,<br /> {% if product.vendor %} item_brand: &quot;{{ product.vendor }}&quot;, {% endif %}<br /> price: {{ product.price | money_without_currency }},<br /> {% if product.type %} item_category: &quot;{{ product.type }}&quot;, {% endif %}<br /> google_business_vertical: &quot;retail&quot;,<br /> id: &quot;{{ product.id }}&quot;<br /> }<br /> ]<br /> },<br /> });<br /> &lt;/script&gt;<br /> <br /> &lt;/pre&gt;<br /> <br /> Add To Cart:&lt;br /&gt;<br /> The below listener can be added to GTM, this should send add_to_cart events to GTM for you.<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings, data ) {<br /> if (~settings.url.indexOf(&quot;/cart/add&quot;)) { <br /> <br /> var items = [];<br /> items.push({<br /> item_id: data.product_id,<br /> item_name: data.title,<br /> item_category: data.product_type,<br /> price: ( data.price / 100 ),<br /> google_business_vertical: &quot;retail&quot;,<br /> id: data.product_id<br /> });<br /> <br /> if (typeof data.brand != &quot;undefined&quot;) items[0]['item_brand'] = data.brand;<br /> <br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: 'add_to_cart',<br /> ecommerce: {<br /> currency: &quot;GBP&quot;, <br /> items: items<br /> }<br /> });<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Purchases:&lt;br /&gt;<br /> Add this to the Settings &gt; Checkout &gt; Additional Scripts section.<br /> <br /> &lt;pre&gt;<br /> {% if first_time_accessed %}<br /> &lt;script&gt;<br /> var items = [];<br /> var temp = {};<br /> <br /> {% for line_item in line_items %}<br /> temp = {<br /> item_id: {{ line_item.product.id }},<br /> item_name: &quot;{{ line_item.title }}&quot;,<br /> price: {{ line_item.final_line_price | money_without_currency }},<br /> google_business_vertical: &quot;retail&quot;,<br /> id: {{ line_item.product.id }},<br /> quantity: {{ line_item.quantity }}<br /> <br /> };<br /> <br /> {% if line_item.product.type %} <br /> temp['item_category'] = &quot;{{ line_item.product.type }}&quot;;<br /> {% endif %}<br /> <br /> {% if line_item.product.vendor %} <br /> temp['item_brand'] = &quot;{{ line_item.product.vendor }}&quot;;<br /> {% endif %}<br /> <br /> items.push(temp);<br /> <br /> {% endfor %}<br /> <br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: 'purchase',<br /> ecommerce: {<br /> affiliation: 'Online Store',<br /> transaction_id: '{{ order_number }}',<br /> value: '{{ total_price | money_without_currency }}',<br /> tax: '{{ tax_price | money_without_currency }}',<br /> shipping: '{{ shipping_price | money_without_currency}}',<br /> currency: &quot;GBP&quot;, <br /> items: items<br /> }<br /> });<br /> <br /> <br /> &lt;/script&gt;<br /> {% endif %}<br /> &lt;/pre&gt;<br /> <br /> The Event Tag &amp; Variables can be setup with the below template:&lt;br /&gt;<br /> [[File:Shopify-ga4-container-elements.json]]<br /> <br /> = Shopify Links =<br /> Cheat sheet for Variables: &lt;br /&gt;<br /> https://www.shopify.co.uk/partners/shopify-cheat-sheet</div>

Ben.robson https://wiki.growth.agency/index.php?title=Google_Tag_Manager&diff=377 2024-03-07T09:49:37Z

<p>Ben.robson: /* Cookie Consent Banner &amp; Consent Mode V2 */</p> <hr /> <div><br /> = GTM =<br /> &lt;pre&gt;<br /> https://tagmanager.google.com/<br /> &lt;/pre&gt;<br /> Google Tag Manager is a site container used for storing and triggering scripts.&lt;br /&gt;<br /> These then can be used for tracking.&lt;br /&gt;<br /> <br /> = Systems =<br /> <br /> Below are links to pages for different systems.<br /> These pages will include the methods used for installing the Tag Manager and the Conversion Value tracking.&lt;br /&gt; <br /> <br /> {| class=&quot;wikitable sortable&quot; style=&quot;width:100%&quot;<br /> |-<br /> ! Self-Host System !! On-site Builder Systems !! Chat Systems<br /> |-<br /> | [[CS-Cart]] || [[Bigcommerce]] || [[CollectChat]]<br /> |-<br /> | [[Joomla]] || [[Ecwid]] || [[HubSpot Chat]]<br /> |-<br /> | [[Magento 1.x]] || [[EKMPowershop]] || [[Jivo]]<br /> |-<br /> | [[Magento 2.x]] || [[MyshopBlocks]] || [[LiveChat]]<br /> |-<br /> | [[OpenCart]] || [[Shopify]] || [[PureChat]]<br /> |-<br /> | [[Prestashop]] || [[Squarespace]] || [[Tawk]]<br /> |-<br /> | [[Tag Manager Installation (Wordpress)|Wordpress]] || [[Wix]] || [[Tidio]]<br /> |-<br /> | [[X-Cart]] || [[Yell]] || [[ZenDesk]]<br /> |-<br /> | [[Zen Cart]] || || [[Zoho]]<br /> |}<br /> <br /> = Useful Info =<br /> <br /> == Generic jQuery Form Listener ==<br /> <br /> If there is no instructions in the wiki for a particular system and/or plugin and the form uses Ajax to submit,<br /> It may be worth trying this generic form listener.&lt;br /&gt;<br /> <br /> depending on what the jQuery is called when initialized you may need to change &quot;jQuery&quot; to &quot;$&quot; in the code below.&lt;br /&gt;<br /> <br /> create a custom HTML tag and change the index URL to what the URL is submitting to in the Ajax form.&lt;br /&gt;<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {<br /> if (~settings.url.indexOf(&quot;/contact/form/process/&quot;)) {<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> &lt;br /&gt;<br /> note: the form must be using the actual jQuery's Ajax method to perform the request for this to work<br /> <br /> == Unique Page Views ==<br /> <br /> You can track unique page views by storing a value in the sessionStorage variable.<br /> This can be useful for tracking forms where only a thank you page is available track.<br /> <br /> Create a tag that only fires on the page you want to track<br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var gtm_fs_count = 1;<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g, 'F_SLASH');<br /> if (sessionStorage[page_path]) {<br /> <br /> gtm_fs_count = gtm_fs_count+1;<br /> sessionStorage.setItem(page_path, gtm_fs_count);<br /> <br /> } else if(!sessionStorage[page_path]) {<br /> <br /> sessionStorage.setItem(page_path, gtm_fs_count) ;<br /> <br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Create a custom JS variable to retrieve the value:<br /> &lt;pre&gt;<br /> function() {<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g,&quot;F_SLASH&quot;);<br /> return parseInt(window.sessionStorage[page_path]); <br /> }<br /> &lt;/pre&gt;<br /> <br /> Then update the trigger to the variable is less than 2 as well as its existing conditions<br /> <br /> <br /> == Cookie Consent Banner &amp; Consent Mode V2 ==<br /> <br /> For clients that don't have this setup &amp; functioning already, its possible to setup a consent mode friendly cookie banner using the below JS:<br /> Within the .zip, the file is /build/cookieconsent.js<br /> [[Media:Cookieconsent-master.zip|Cookieconsent-master.zip]]<br /> <br /> This file will need to be hosted somewhere that is accessible for the client site.<br /> Once this has been done the below script will need to be added to the site, before GTM is loaded.<br /> Make sure to swap cookieconsent.js with the location of the js file.<br /> <br /> &lt;pre&gt;<br /> &lt;script src=&quot;cookieconsent.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // Define dataLayer and the gtag function.<br /> window.dataLayer = window.dataLayer || [];<br /> function gtag() { dataLayer.push(arguments); }<br /> window.CookieConsent.init({<br /> categories: {<br /> // Unique name.<br /> necessary: {<br /> needed: true,<br /> wanted: true,<br /> checked: true,<br /> // Language settings for categories.<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Strictly Necessary Cookies',<br /> description: 'Cookies Required for the site to function as intended.',<br /> },<br /> }<br /> }<br /> },<br /> analytics: {<br /> needed: false,<br /> wanted: false,<br /> checked: false,<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Analytics',<br /> description: 'Cookies used by Google &amp; other 3rd party analytics services.',<br /> },<br /> }<br /> }<br /> }<br /> },<br /> consentModeControls: {<br /> ad_storage: 'analytics',<br /> ad_user_data: 'analytics',<br /> ad_personalization: 'analytics',<br /> analytics_storage: 'analytics'<br /> },<br /> });<br /> &lt;/script&gt;<br /> &lt;script&gt;<br /> if (localStorage.getItem('consentMode') === null) {<br /> gtag('consent', 'default', {<br /> 'ad_storage': 'denied',<br /> 'ad_user_data': 'denied',<br /> 'ad_personalization': 'denied',<br /> 'analytics_storage': 'denied'<br /> });<br /> } else {<br /> gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')));<br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Optional, but to make it look slightly better you could reduce the opacity:<br /> &lt;pre&gt;<br /> &lt;style&gt;<br /> #cconsent-bar {<br /> opacity: 0.9;<br /> }<br /> &lt;/style&gt;<br /> &lt;/pre&gt;</div>

Ben.robson https://wiki.growth.agency/index.php?title=Google_Tag_Manager&diff=376 2024-03-07T09:18:05Z

<p>Ben.robson: /* Cookie Consent Banner &amp; Consent Mode V2 */</p> <hr /> <div><br /> = GTM =<br /> &lt;pre&gt;<br /> https://tagmanager.google.com/<br /> &lt;/pre&gt;<br /> Google Tag Manager is a site container used for storing and triggering scripts.&lt;br /&gt;<br /> These then can be used for tracking.&lt;br /&gt;<br /> <br /> = Systems =<br /> <br /> Below are links to pages for different systems.<br /> These pages will include the methods used for installing the Tag Manager and the Conversion Value tracking.&lt;br /&gt; <br /> <br /> {| class=&quot;wikitable sortable&quot; style=&quot;width:100%&quot;<br /> |-<br /> ! Self-Host System !! On-site Builder Systems !! Chat Systems<br /> |-<br /> | [[CS-Cart]] || [[Bigcommerce]] || [[CollectChat]]<br /> |-<br /> | [[Joomla]] || [[Ecwid]] || [[HubSpot Chat]]<br /> |-<br /> | [[Magento 1.x]] || [[EKMPowershop]] || [[Jivo]]<br /> |-<br /> | [[Magento 2.x]] || [[MyshopBlocks]] || [[LiveChat]]<br /> |-<br /> | [[OpenCart]] || [[Shopify]] || [[PureChat]]<br /> |-<br /> | [[Prestashop]] || [[Squarespace]] || [[Tawk]]<br /> |-<br /> | [[Tag Manager Installation (Wordpress)|Wordpress]] || [[Wix]] || [[Tidio]]<br /> |-<br /> | [[X-Cart]] || [[Yell]] || [[ZenDesk]]<br /> |-<br /> | [[Zen Cart]] || || [[Zoho]]<br /> |}<br /> <br /> = Useful Info =<br /> <br /> == Generic jQuery Form Listener ==<br /> <br /> If there is no instructions in the wiki for a particular system and/or plugin and the form uses Ajax to submit,<br /> It may be worth trying this generic form listener.&lt;br /&gt;<br /> <br /> depending on what the jQuery is called when initialized you may need to change &quot;jQuery&quot; to &quot;$&quot; in the code below.&lt;br /&gt;<br /> <br /> create a custom HTML tag and change the index URL to what the URL is submitting to in the Ajax form.&lt;br /&gt;<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {<br /> if (~settings.url.indexOf(&quot;/contact/form/process/&quot;)) {<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> &lt;br /&gt;<br /> note: the form must be using the actual jQuery's Ajax method to perform the request for this to work<br /> <br /> == Unique Page Views ==<br /> <br /> You can track unique page views by storing a value in the sessionStorage variable.<br /> This can be useful for tracking forms where only a thank you page is available track.<br /> <br /> Create a tag that only fires on the page you want to track<br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var gtm_fs_count = 1;<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g, 'F_SLASH');<br /> if (sessionStorage[page_path]) {<br /> <br /> gtm_fs_count = gtm_fs_count+1;<br /> sessionStorage.setItem(page_path, gtm_fs_count);<br /> <br /> } else if(!sessionStorage[page_path]) {<br /> <br /> sessionStorage.setItem(page_path, gtm_fs_count) ;<br /> <br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Create a custom JS variable to retrieve the value:<br /> &lt;pre&gt;<br /> function() {<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g,&quot;F_SLASH&quot;);<br /> return parseInt(window.sessionStorage[page_path]); <br /> }<br /> &lt;/pre&gt;<br /> <br /> Then update the trigger to the variable is less than 2 as well as its existing conditions<br /> <br /> <br /> == Cookie Consent Banner &amp; Consent Mode V2 ==<br /> <br /> For clients that don't have this setup &amp; functioning already, its possible to setup a consent mode friendly cookie banner using the below JS:<br /> Within the .zip, the file is /build/cookieconsent.js<br /> [[Media:Cookieconsent-master.zip|Cookieconsent-master.zip]]<br /> <br /> This file will need to be hosted somewhere that is accessible for the client site.<br /> Once this has been done the below script will need to be added to the site, before GTM is loaded.<br /> Make sure to swap cookieconsent.js with the location of the js file.<br /> <br /> &lt;pre&gt;<br /> &lt;script src=&quot;cookieconsent.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // Define dataLayer and the gtag function.<br /> window.dataLayer = window.dataLayer || [];<br /> function gtag() { dataLayer.push(arguments); }<br /> window.CookieConsent.init({<br /> categories: {<br /> // Unique name.<br /> necessary: {<br /> needed: true,<br /> wanted: true,<br /> checked: true,<br /> // Language settings for categories.<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Strictly Necessary Cookies',<br /> description: 'Cookies Required for the site to function as intended.',<br /> },<br /> }<br /> }<br /> },<br /> analytics: {<br /> needed: false,<br /> wanted: false,<br /> checked: false,<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Analytics',<br /> description: 'Cookies used by Google &amp; other 3rd party analytics services.',<br /> },<br /> }<br /> }<br /> }<br /> },<br /> consentModeControls: {<br /> ad_storage: 'analytics',<br /> ad_user_data: 'analytics',<br /> ad_personalization: 'analytics',<br /> analytics_storage: 'analytics'<br /> },<br /> });<br /> &lt;/script&gt;<br /> &lt;script&gt;<br /> if (localStorage.getItem('consentMode') === null) {<br /> gtag('consent', 'default', {<br /> 'ad_storage': 'denied',<br /> 'ad_user_data': 'denied',<br /> 'ad_personalization': 'denied',<br /> 'analytics_storage': 'denied'<br /> });<br /> } else {<br /> gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')));<br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;</div>

Ben.robson https://wiki.growth.agency/index.php?title=Google_Tag_Manager&diff=375 2024-03-07T09:13:06Z

<p>Ben.robson: /* Cookie Consent Banner &amp; Consent Mode V2 */</p> <hr /> <div><br /> = GTM =<br /> &lt;pre&gt;<br /> https://tagmanager.google.com/<br /> &lt;/pre&gt;<br /> Google Tag Manager is a site container used for storing and triggering scripts.&lt;br /&gt;<br /> These then can be used for tracking.&lt;br /&gt;<br /> <br /> = Systems =<br /> <br /> Below are links to pages for different systems.<br /> These pages will include the methods used for installing the Tag Manager and the Conversion Value tracking.&lt;br /&gt; <br /> <br /> {| class=&quot;wikitable sortable&quot; style=&quot;width:100%&quot;<br /> |-<br /> ! Self-Host System !! On-site Builder Systems !! Chat Systems<br /> |-<br /> | [[CS-Cart]] || [[Bigcommerce]] || [[CollectChat]]<br /> |-<br /> | [[Joomla]] || [[Ecwid]] || [[HubSpot Chat]]<br /> |-<br /> | [[Magento 1.x]] || [[EKMPowershop]] || [[Jivo]]<br /> |-<br /> | [[Magento 2.x]] || [[MyshopBlocks]] || [[LiveChat]]<br /> |-<br /> | [[OpenCart]] || [[Shopify]] || [[PureChat]]<br /> |-<br /> | [[Prestashop]] || [[Squarespace]] || [[Tawk]]<br /> |-<br /> | [[Tag Manager Installation (Wordpress)|Wordpress]] || [[Wix]] || [[Tidio]]<br /> |-<br /> | [[X-Cart]] || [[Yell]] || [[ZenDesk]]<br /> |-<br /> | [[Zen Cart]] || || [[Zoho]]<br /> |}<br /> <br /> = Useful Info =<br /> <br /> == Generic jQuery Form Listener ==<br /> <br /> If there is no instructions in the wiki for a particular system and/or plugin and the form uses Ajax to submit,<br /> It may be worth trying this generic form listener.&lt;br /&gt;<br /> <br /> depending on what the jQuery is called when initialized you may need to change &quot;jQuery&quot; to &quot;$&quot; in the code below.&lt;br /&gt;<br /> <br /> create a custom HTML tag and change the index URL to what the URL is submitting to in the Ajax form.&lt;br /&gt;<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {<br /> if (~settings.url.indexOf(&quot;/contact/form/process/&quot;)) {<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> &lt;br /&gt;<br /> note: the form must be using the actual jQuery's Ajax method to perform the request for this to work<br /> <br /> == Unique Page Views ==<br /> <br /> You can track unique page views by storing a value in the sessionStorage variable.<br /> This can be useful for tracking forms where only a thank you page is available track.<br /> <br /> Create a tag that only fires on the page you want to track<br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var gtm_fs_count = 1;<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g, 'F_SLASH');<br /> if (sessionStorage[page_path]) {<br /> <br /> gtm_fs_count = gtm_fs_count+1;<br /> sessionStorage.setItem(page_path, gtm_fs_count);<br /> <br /> } else if(!sessionStorage[page_path]) {<br /> <br /> sessionStorage.setItem(page_path, gtm_fs_count) ;<br /> <br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Create a custom JS variable to retrieve the value:<br /> &lt;pre&gt;<br /> function() {<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g,&quot;F_SLASH&quot;);<br /> return parseInt(window.sessionStorage[page_path]); <br /> }<br /> &lt;/pre&gt;<br /> <br /> Then update the trigger to the variable is less than 2 as well as its existing conditions<br /> <br /> <br /> == Cookie Consent Banner &amp; Consent Mode V2 ==<br /> <br /> For clients that don't have this setup &amp; functioning already, its possible to setup a consent mode friendly cookie banner using the below JS:<br /> Within the .zip, the file is /build/cookieconsent.js<br /> [[Media:Cookieconsent-master.zip|Cookieconsent-master.zip]]<br /> <br /> This file will need to be hosted somewhere that is accessible for the client site.<br /> Once this has been done the below script will need to be added to the site, before GTM is loaded.<br /> Make sure to swap \{\{cookieconsent.js\}\} with the location of the js file.<br /> <br /> &lt;pre&gt;<br /> &lt;script src=&quot;{{cookieconsent.js}}&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // Define dataLayer and the gtag function.<br /> window.dataLayer = window.dataLayer || [];<br /> function gtag() { dataLayer.push(arguments); }<br /> window.CookieConsent.init({<br /> categories: {<br /> // Unique name.<br /> necessary: {<br /> needed: true,<br /> wanted: true,<br /> checked: true,<br /> // Language settings for categories.<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Strictly Necessary Cookies',<br /> description: 'Cookies Required for the site to function as intended.',<br /> },<br /> }<br /> }<br /> },<br /> analytics: {<br /> needed: false,<br /> wanted: false,<br /> checked: false,<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Analytics',<br /> description: 'Cookies used by Google &amp; other 3rd party analytics services.',<br /> },<br /> }<br /> }<br /> }<br /> },<br /> consentModeControls: {<br /> ad_storage: 'analytics',<br /> ad_user_data: 'analytics',<br /> ad_personalization: 'analytics',<br /> analytics_storage: 'analytics'<br /> },<br /> });<br /> &lt;/script&gt;<br /> &lt;script&gt;<br /> if (localStorage.getItem('consentMode') === null) {<br /> gtag('consent', 'default', {<br /> 'ad_storage': 'denied',<br /> 'ad_user_data': 'denied',<br /> 'ad_personalization': 'denied',<br /> 'analytics_storage': 'denied'<br /> });<br /> } else {<br /> gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')));<br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;</div>

Ben.robson https://wiki.growth.agency/index.php?title=Google_Tag_Manager&diff=374 2024-03-07T09:12:52Z

<p>Ben.robson: /* Cookie Consent Banner &amp; Consent Mode V2 */</p> <hr /> <div><br /> = GTM =<br /> &lt;pre&gt;<br /> https://tagmanager.google.com/<br /> &lt;/pre&gt;<br /> Google Tag Manager is a site container used for storing and triggering scripts.&lt;br /&gt;<br /> These then can be used for tracking.&lt;br /&gt;<br /> <br /> = Systems =<br /> <br /> Below are links to pages for different systems.<br /> These pages will include the methods used for installing the Tag Manager and the Conversion Value tracking.&lt;br /&gt; <br /> <br /> {| class=&quot;wikitable sortable&quot; style=&quot;width:100%&quot;<br /> |-<br /> ! Self-Host System !! On-site Builder Systems !! Chat Systems<br /> |-<br /> | [[CS-Cart]] || [[Bigcommerce]] || [[CollectChat]]<br /> |-<br /> | [[Joomla]] || [[Ecwid]] || [[HubSpot Chat]]<br /> |-<br /> | [[Magento 1.x]] || [[EKMPowershop]] || [[Jivo]]<br /> |-<br /> | [[Magento 2.x]] || [[MyshopBlocks]] || [[LiveChat]]<br /> |-<br /> | [[OpenCart]] || [[Shopify]] || [[PureChat]]<br /> |-<br /> | [[Prestashop]] || [[Squarespace]] || [[Tawk]]<br /> |-<br /> | [[Tag Manager Installation (Wordpress)|Wordpress]] || [[Wix]] || [[Tidio]]<br /> |-<br /> | [[X-Cart]] || [[Yell]] || [[ZenDesk]]<br /> |-<br /> | [[Zen Cart]] || || [[Zoho]]<br /> |}<br /> <br /> = Useful Info =<br /> <br /> == Generic jQuery Form Listener ==<br /> <br /> If there is no instructions in the wiki for a particular system and/or plugin and the form uses Ajax to submit,<br /> It may be worth trying this generic form listener.&lt;br /&gt;<br /> <br /> depending on what the jQuery is called when initialized you may need to change &quot;jQuery&quot; to &quot;$&quot; in the code below.&lt;br /&gt;<br /> <br /> create a custom HTML tag and change the index URL to what the URL is submitting to in the Ajax form.&lt;br /&gt;<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {<br /> if (~settings.url.indexOf(&quot;/contact/form/process/&quot;)) {<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> &lt;br /&gt;<br /> note: the form must be using the actual jQuery's Ajax method to perform the request for this to work<br /> <br /> == Unique Page Views ==<br /> <br /> You can track unique page views by storing a value in the sessionStorage variable.<br /> This can be useful for tracking forms where only a thank you page is available track.<br /> <br /> Create a tag that only fires on the page you want to track<br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var gtm_fs_count = 1;<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g, 'F_SLASH');<br /> if (sessionStorage[page_path]) {<br /> <br /> gtm_fs_count = gtm_fs_count+1;<br /> sessionStorage.setItem(page_path, gtm_fs_count);<br /> <br /> } else if(!sessionStorage[page_path]) {<br /> <br /> sessionStorage.setItem(page_path, gtm_fs_count) ;<br /> <br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Create a custom JS variable to retrieve the value:<br /> &lt;pre&gt;<br /> function() {<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g,&quot;F_SLASH&quot;);<br /> return parseInt(window.sessionStorage[page_path]); <br /> }<br /> &lt;/pre&gt;<br /> <br /> Then update the trigger to the variable is less than 2 as well as its existing conditions<br /> <br /> <br /> == Cookie Consent Banner &amp; Consent Mode V2 ==<br /> <br /> For clients that don't have this setup &amp; functioning already, its possible to setup a consent mode friendly cookie banner using the below JS:<br /> Within the .zip, the file is /build/cookieconsent.js<br /> [[Media:Cookieconsent-master.zip|Cookieconsent-master.zip]]<br /> <br /> This file will need to be hosted somewhere that is accessible for the client site.<br /> Once this has been done the below script will need to be added to the site, before GTM is loaded.<br /> Make sure to swap &quot;{{cookieconsent.js}}&quot; with the location of the js file.<br /> <br /> &lt;pre&gt;<br /> &lt;script src=&quot;{{cookieconsent.js}}&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // Define dataLayer and the gtag function.<br /> window.dataLayer = window.dataLayer || [];<br /> function gtag() { dataLayer.push(arguments); }<br /> window.CookieConsent.init({<br /> categories: {<br /> // Unique name.<br /> necessary: {<br /> needed: true,<br /> wanted: true,<br /> checked: true,<br /> // Language settings for categories.<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Strictly Necessary Cookies',<br /> description: 'Cookies Required for the site to function as intended.',<br /> },<br /> }<br /> }<br /> },<br /> analytics: {<br /> needed: false,<br /> wanted: false,<br /> checked: false,<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Analytics',<br /> description: 'Cookies used by Google &amp; other 3rd party analytics services.',<br /> },<br /> }<br /> }<br /> }<br /> },<br /> consentModeControls: {<br /> ad_storage: 'analytics',<br /> ad_user_data: 'analytics',<br /> ad_personalization: 'analytics',<br /> analytics_storage: 'analytics'<br /> },<br /> });<br /> &lt;/script&gt;<br /> &lt;script&gt;<br /> if (localStorage.getItem('consentMode') === null) {<br /> gtag('consent', 'default', {<br /> 'ad_storage': 'denied',<br /> 'ad_user_data': 'denied',<br /> 'ad_personalization': 'denied',<br /> 'analytics_storage': 'denied'<br /> });<br /> } else {<br /> gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')));<br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;</div>

Ben.robson https://wiki.growth.agency/index.php?title=Google_Tag_Manager&diff=373 2024-03-07T09:12:33Z

<p>Ben.robson: /* Cookie Consent Banner &amp; Consent Mode V2 */</p> <hr /> <div><br /> = GTM =<br /> &lt;pre&gt;<br /> https://tagmanager.google.com/<br /> &lt;/pre&gt;<br /> Google Tag Manager is a site container used for storing and triggering scripts.&lt;br /&gt;<br /> These then can be used for tracking.&lt;br /&gt;<br /> <br /> = Systems =<br /> <br /> Below are links to pages for different systems.<br /> These pages will include the methods used for installing the Tag Manager and the Conversion Value tracking.&lt;br /&gt; <br /> <br /> {| class=&quot;wikitable sortable&quot; style=&quot;width:100%&quot;<br /> |-<br /> ! Self-Host System !! On-site Builder Systems !! Chat Systems<br /> |-<br /> | [[CS-Cart]] || [[Bigcommerce]] || [[CollectChat]]<br /> |-<br /> | [[Joomla]] || [[Ecwid]] || [[HubSpot Chat]]<br /> |-<br /> | [[Magento 1.x]] || [[EKMPowershop]] || [[Jivo]]<br /> |-<br /> | [[Magento 2.x]] || [[MyshopBlocks]] || [[LiveChat]]<br /> |-<br /> | [[OpenCart]] || [[Shopify]] || [[PureChat]]<br /> |-<br /> | [[Prestashop]] || [[Squarespace]] || [[Tawk]]<br /> |-<br /> | [[Tag Manager Installation (Wordpress)|Wordpress]] || [[Wix]] || [[Tidio]]<br /> |-<br /> | [[X-Cart]] || [[Yell]] || [[ZenDesk]]<br /> |-<br /> | [[Zen Cart]] || || [[Zoho]]<br /> |}<br /> <br /> = Useful Info =<br /> <br /> == Generic jQuery Form Listener ==<br /> <br /> If there is no instructions in the wiki for a particular system and/or plugin and the form uses Ajax to submit,<br /> It may be worth trying this generic form listener.&lt;br /&gt;<br /> <br /> depending on what the jQuery is called when initialized you may need to change &quot;jQuery&quot; to &quot;$&quot; in the code below.&lt;br /&gt;<br /> <br /> create a custom HTML tag and change the index URL to what the URL is submitting to in the Ajax form.&lt;br /&gt;<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {<br /> if (~settings.url.indexOf(&quot;/contact/form/process/&quot;)) {<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> &lt;br /&gt;<br /> note: the form must be using the actual jQuery's Ajax method to perform the request for this to work<br /> <br /> == Unique Page Views ==<br /> <br /> You can track unique page views by storing a value in the sessionStorage variable.<br /> This can be useful for tracking forms where only a thank you page is available track.<br /> <br /> Create a tag that only fires on the page you want to track<br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var gtm_fs_count = 1;<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g, 'F_SLASH');<br /> if (sessionStorage[page_path]) {<br /> <br /> gtm_fs_count = gtm_fs_count+1;<br /> sessionStorage.setItem(page_path, gtm_fs_count);<br /> <br /> } else if(!sessionStorage[page_path]) {<br /> <br /> sessionStorage.setItem(page_path, gtm_fs_count) ;<br /> <br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Create a custom JS variable to retrieve the value:<br /> &lt;pre&gt;<br /> function() {<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g,&quot;F_SLASH&quot;);<br /> return parseInt(window.sessionStorage[page_path]); <br /> }<br /> &lt;/pre&gt;<br /> <br /> Then update the trigger to the variable is less than 2 as well as its existing conditions<br /> <br /> <br /> == Cookie Consent Banner &amp; Consent Mode V2 ==<br /> <br /> For clients that don't have this setup &amp; functioning already, its possible to setup a consent mode friendly cookie banner using the below JS:<br /> Within the .zip, the file is /build/cookieconsent.js<br /> [[Media:Cookieconsent-master.zip|Cookieconsent-master.zip]]<br /> <br /> This file will need to be hosted somewhere that is accessible for the client site.<br /> Once this has been done the below script will need to be added to the site, before GTM is loaded.<br /> Make sure to swap {{cookieconsent.js}} with the location of the js file.<br /> <br /> &lt;pre&gt;<br /> &lt;script src=&quot;{{cookieconsent.js}}&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // Define dataLayer and the gtag function.<br /> window.dataLayer = window.dataLayer || [];<br /> function gtag() { dataLayer.push(arguments); }<br /> window.CookieConsent.init({<br /> categories: {<br /> // Unique name.<br /> necessary: {<br /> needed: true,<br /> wanted: true,<br /> checked: true,<br /> // Language settings for categories.<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Strictly Necessary Cookies',<br /> description: 'Cookies Required for the site to function as intended.',<br /> },<br /> }<br /> }<br /> },<br /> analytics: {<br /> needed: false,<br /> wanted: false,<br /> checked: false,<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Analytics',<br /> description: 'Cookies used by Google &amp; other 3rd party analytics services.',<br /> },<br /> }<br /> }<br /> }<br /> },<br /> consentModeControls: {<br /> ad_storage: 'analytics',<br /> ad_user_data: 'analytics',<br /> ad_personalization: 'analytics',<br /> analytics_storage: 'analytics'<br /> },<br /> });<br /> &lt;/script&gt;<br /> &lt;script&gt;<br /> if (localStorage.getItem('consentMode') === null) {<br /> gtag('consent', 'default', {<br /> 'ad_storage': 'denied',<br /> 'ad_user_data': 'denied',<br /> 'ad_personalization': 'denied',<br /> 'analytics_storage': 'denied'<br /> });<br /> } else {<br /> gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')));<br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;</div>

Ben.robson https://wiki.growth.agency/index.php?title=Google_Tag_Manager&diff=372 2024-03-07T09:11:45Z

<p>Ben.robson: /* Cookie Consent Banner &amp; Consent Mode V2 */</p> <hr /> <div><br /> = GTM =<br /> &lt;pre&gt;<br /> https://tagmanager.google.com/<br /> &lt;/pre&gt;<br /> Google Tag Manager is a site container used for storing and triggering scripts.&lt;br /&gt;<br /> These then can be used for tracking.&lt;br /&gt;<br /> <br /> = Systems =<br /> <br /> Below are links to pages for different systems.<br /> These pages will include the methods used for installing the Tag Manager and the Conversion Value tracking.&lt;br /&gt; <br /> <br /> {| class=&quot;wikitable sortable&quot; style=&quot;width:100%&quot;<br /> |-<br /> ! Self-Host System !! On-site Builder Systems !! Chat Systems<br /> |-<br /> | [[CS-Cart]] || [[Bigcommerce]] || [[CollectChat]]<br /> |-<br /> | [[Joomla]] || [[Ecwid]] || [[HubSpot Chat]]<br /> |-<br /> | [[Magento 1.x]] || [[EKMPowershop]] || [[Jivo]]<br /> |-<br /> | [[Magento 2.x]] || [[MyshopBlocks]] || [[LiveChat]]<br /> |-<br /> | [[OpenCart]] || [[Shopify]] || [[PureChat]]<br /> |-<br /> | [[Prestashop]] || [[Squarespace]] || [[Tawk]]<br /> |-<br /> | [[Tag Manager Installation (Wordpress)|Wordpress]] || [[Wix]] || [[Tidio]]<br /> |-<br /> | [[X-Cart]] || [[Yell]] || [[ZenDesk]]<br /> |-<br /> | [[Zen Cart]] || || [[Zoho]]<br /> |}<br /> <br /> = Useful Info =<br /> <br /> == Generic jQuery Form Listener ==<br /> <br /> If there is no instructions in the wiki for a particular system and/or plugin and the form uses Ajax to submit,<br /> It may be worth trying this generic form listener.&lt;br /&gt;<br /> <br /> depending on what the jQuery is called when initialized you may need to change &quot;jQuery&quot; to &quot;$&quot; in the code below.&lt;br /&gt;<br /> <br /> create a custom HTML tag and change the index URL to what the URL is submitting to in the Ajax form.&lt;br /&gt;<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {<br /> if (~settings.url.indexOf(&quot;/contact/form/process/&quot;)) {<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> &lt;br /&gt;<br /> note: the form must be using the actual jQuery's Ajax method to perform the request for this to work<br /> <br /> == Unique Page Views ==<br /> <br /> You can track unique page views by storing a value in the sessionStorage variable.<br /> This can be useful for tracking forms where only a thank you page is available track.<br /> <br /> Create a tag that only fires on the page you want to track<br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var gtm_fs_count = 1;<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g, 'F_SLASH');<br /> if (sessionStorage[page_path]) {<br /> <br /> gtm_fs_count = gtm_fs_count+1;<br /> sessionStorage.setItem(page_path, gtm_fs_count);<br /> <br /> } else if(!sessionStorage[page_path]) {<br /> <br /> sessionStorage.setItem(page_path, gtm_fs_count) ;<br /> <br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Create a custom JS variable to retrieve the value:<br /> &lt;pre&gt;<br /> function() {<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g,&quot;F_SLASH&quot;);<br /> return parseInt(window.sessionStorage[page_path]); <br /> }<br /> &lt;/pre&gt;<br /> <br /> Then update the trigger to the variable is less than 2 as well as its existing conditions<br /> <br /> <br /> == Cookie Consent Banner &amp; Consent Mode V2 ==<br /> <br /> For clients that don't have this setup &amp; functioning already, its possible to setup a consent mode friendly cookie banner using the below JS:<br /> Within the .zip, the file is /build/cookieconsent.js<br /> [[Media:Cookieconsent-master.zip|Cookieconsent-master.zip]]<br /> <br /> This file will need to be hosted somewhere that is accessible for the client site.<br /> Once this has been done the below script will need to be added to the site, before GTM is loaded.<br /> <br /> &lt;pre&gt;<br /> &lt;script src=&quot;{{cookieconsent.js}}&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // Define dataLayer and the gtag function.<br /> window.dataLayer = window.dataLayer || [];<br /> function gtag() { dataLayer.push(arguments); }<br /> window.CookieConsent.init({<br /> categories: {<br /> // Unique name.<br /> necessary: {<br /> needed: true,<br /> wanted: true,<br /> checked: true,<br /> // Language settings for categories.<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Strictly Necessary Cookies',<br /> description: 'Cookies Required for the site to function as intended.',<br /> },<br /> }<br /> }<br /> },<br /> analytics: {<br /> needed: false,<br /> wanted: false,<br /> checked: false,<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Analytics',<br /> description: 'Cookies used by Google &amp; other 3rd party analytics services.',<br /> },<br /> }<br /> }<br /> }<br /> },<br /> consentModeControls: {<br /> ad_storage: 'analytics',<br /> ad_user_data: 'analytics',<br /> ad_personalization: 'analytics',<br /> analytics_storage: 'analytics'<br /> },<br /> });<br /> &lt;/script&gt;<br /> &lt;script&gt;<br /> if (localStorage.getItem('consentMode') === null) {<br /> gtag('consent', 'default', {<br /> 'ad_storage': 'denied',<br /> 'ad_user_data': 'denied',<br /> 'ad_personalization': 'denied',<br /> 'analytics_storage': 'denied'<br /> });<br /> } else {<br /> gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')));<br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;</div>

Ben.robson https://wiki.growth.agency/index.php?title=Google_Tag_Manager&diff=371 2024-03-07T09:11:27Z

<p>Ben.robson: /* Cookie Consent Banner &amp; Consent Mode V2 */</p> <hr /> <div><br /> = GTM =<br /> &lt;pre&gt;<br /> https://tagmanager.google.com/<br /> &lt;/pre&gt;<br /> Google Tag Manager is a site container used for storing and triggering scripts.&lt;br /&gt;<br /> These then can be used for tracking.&lt;br /&gt;<br /> <br /> = Systems =<br /> <br /> Below are links to pages for different systems.<br /> These pages will include the methods used for installing the Tag Manager and the Conversion Value tracking.&lt;br /&gt; <br /> <br /> {| class=&quot;wikitable sortable&quot; style=&quot;width:100%&quot;<br /> |-<br /> ! Self-Host System !! On-site Builder Systems !! Chat Systems<br /> |-<br /> | [[CS-Cart]] || [[Bigcommerce]] || [[CollectChat]]<br /> |-<br /> | [[Joomla]] || [[Ecwid]] || [[HubSpot Chat]]<br /> |-<br /> | [[Magento 1.x]] || [[EKMPowershop]] || [[Jivo]]<br /> |-<br /> | [[Magento 2.x]] || [[MyshopBlocks]] || [[LiveChat]]<br /> |-<br /> | [[OpenCart]] || [[Shopify]] || [[PureChat]]<br /> |-<br /> | [[Prestashop]] || [[Squarespace]] || [[Tawk]]<br /> |-<br /> | [[Tag Manager Installation (Wordpress)|Wordpress]] || [[Wix]] || [[Tidio]]<br /> |-<br /> | [[X-Cart]] || [[Yell]] || [[ZenDesk]]<br /> |-<br /> | [[Zen Cart]] || || [[Zoho]]<br /> |}<br /> <br /> = Useful Info =<br /> <br /> == Generic jQuery Form Listener ==<br /> <br /> If there is no instructions in the wiki for a particular system and/or plugin and the form uses Ajax to submit,<br /> It may be worth trying this generic form listener.&lt;br /&gt;<br /> <br /> depending on what the jQuery is called when initialized you may need to change &quot;jQuery&quot; to &quot;$&quot; in the code below.&lt;br /&gt;<br /> <br /> create a custom HTML tag and change the index URL to what the URL is submitting to in the Ajax form.&lt;br /&gt;<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {<br /> if (~settings.url.indexOf(&quot;/contact/form/process/&quot;)) {<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> &lt;br /&gt;<br /> note: the form must be using the actual jQuery's Ajax method to perform the request for this to work<br /> <br /> == Unique Page Views ==<br /> <br /> You can track unique page views by storing a value in the sessionStorage variable.<br /> This can be useful for tracking forms where only a thank you page is available track.<br /> <br /> Create a tag that only fires on the page you want to track<br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var gtm_fs_count = 1;<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g, 'F_SLASH');<br /> if (sessionStorage[page_path]) {<br /> <br /> gtm_fs_count = gtm_fs_count+1;<br /> sessionStorage.setItem(page_path, gtm_fs_count);<br /> <br /> } else if(!sessionStorage[page_path]) {<br /> <br /> sessionStorage.setItem(page_path, gtm_fs_count) ;<br /> <br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Create a custom JS variable to retrieve the value:<br /> &lt;pre&gt;<br /> function() {<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g,&quot;F_SLASH&quot;);<br /> return parseInt(window.sessionStorage[page_path]); <br /> }<br /> &lt;/pre&gt;<br /> <br /> Then update the trigger to the variable is less than 2 as well as its existing conditions<br /> <br /> <br /> == Cookie Consent Banner &amp; Consent Mode V2 ==<br /> <br /> For clients that don't have this setup &amp; functioning already, its possible to setup a consent mode friendly cookie banner using the below JS:<br /> Within the .zip, the file is /build/cookieconsent.js<br /> [[Media:Cookieconsent-master.zip|Cookieconsent-master.zip]]<br /> <br /> This file will need to be hosted somewhere that is accessible for the client site.<br /> Once this has been done the below script will need to be added to the site, before GTM is loaded.<br /> <br /> &lt;pre&gt;<br /> &lt;script src=&quot;{{cookieconsent.js}}&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // Define dataLayer and the gtag function.<br /> window.dataLayer = window.dataLayer || [];<br /> function gtag() { dataLayer.push(arguments); }<br /> window.CookieConsent.init({<br /> categories: {<br /> // Unique name.<br /> necessary: {<br /> needed: true,<br /> wanted: true,<br /> checked: true,<br /> // Language settings for categories.<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Strictly Necessary Cookies',<br /> description: 'Cookies Required for the site to function as intended.',<br /> },<br /> }<br /> }<br /> },<br /> analytics: {<br /> needed: false,<br /> wanted: false,<br /> checked: false,<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Analytics',<br /> description: 'Cookies used by Google &amp; other 3rd party analytics services',<br /> },<br /> }<br /> }<br /> }<br /> },<br /> consentModeControls: {<br /> ad_storage: 'analytics',<br /> ad_user_data: 'analytics',<br /> ad_personalization: 'analytics',<br /> analytics_storage: 'analytics'<br /> },<br /> });<br /> &lt;/script&gt;<br /> &lt;script&gt;<br /> if (localStorage.getItem('consentMode') === null) {<br /> gtag('consent', 'default', {<br /> 'ad_storage': 'denied',<br /> 'ad_user_data': 'denied',<br /> 'ad_personalization': 'denied',<br /> 'analytics_storage': 'denied'<br /> });<br /> } else {<br /> gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')));<br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;</div>

Ben.robson https://wiki.growth.agency/index.php?title=Google_Tag_Manager&diff=370 2024-03-07T09:11:07Z

<p>Ben.robson: /* Cookie Consent Banner &amp; Consent Mode V2 */</p> <hr /> <div><br /> = GTM =<br /> &lt;pre&gt;<br /> https://tagmanager.google.com/<br /> &lt;/pre&gt;<br /> Google Tag Manager is a site container used for storing and triggering scripts.&lt;br /&gt;<br /> These then can be used for tracking.&lt;br /&gt;<br /> <br /> = Systems =<br /> <br /> Below are links to pages for different systems.<br /> These pages will include the methods used for installing the Tag Manager and the Conversion Value tracking.&lt;br /&gt; <br /> <br /> {| class=&quot;wikitable sortable&quot; style=&quot;width:100%&quot;<br /> |-<br /> ! Self-Host System !! On-site Builder Systems !! Chat Systems<br /> |-<br /> | [[CS-Cart]] || [[Bigcommerce]] || [[CollectChat]]<br /> |-<br /> | [[Joomla]] || [[Ecwid]] || [[HubSpot Chat]]<br /> |-<br /> | [[Magento 1.x]] || [[EKMPowershop]] || [[Jivo]]<br /> |-<br /> | [[Magento 2.x]] || [[MyshopBlocks]] || [[LiveChat]]<br /> |-<br /> | [[OpenCart]] || [[Shopify]] || [[PureChat]]<br /> |-<br /> | [[Prestashop]] || [[Squarespace]] || [[Tawk]]<br /> |-<br /> | [[Tag Manager Installation (Wordpress)|Wordpress]] || [[Wix]] || [[Tidio]]<br /> |-<br /> | [[X-Cart]] || [[Yell]] || [[ZenDesk]]<br /> |-<br /> | [[Zen Cart]] || || [[Zoho]]<br /> |}<br /> <br /> = Useful Info =<br /> <br /> == Generic jQuery Form Listener ==<br /> <br /> If there is no instructions in the wiki for a particular system and/or plugin and the form uses Ajax to submit,<br /> It may be worth trying this generic form listener.&lt;br /&gt;<br /> <br /> depending on what the jQuery is called when initialized you may need to change &quot;jQuery&quot; to &quot;$&quot; in the code below.&lt;br /&gt;<br /> <br /> create a custom HTML tag and change the index URL to what the URL is submitting to in the Ajax form.&lt;br /&gt;<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {<br /> if (~settings.url.indexOf(&quot;/contact/form/process/&quot;)) {<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> &lt;br /&gt;<br /> note: the form must be using the actual jQuery's Ajax method to perform the request for this to work<br /> <br /> == Unique Page Views ==<br /> <br /> You can track unique page views by storing a value in the sessionStorage variable.<br /> This can be useful for tracking forms where only a thank you page is available track.<br /> <br /> Create a tag that only fires on the page you want to track<br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var gtm_fs_count = 1;<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g, 'F_SLASH');<br /> if (sessionStorage[page_path]) {<br /> <br /> gtm_fs_count = gtm_fs_count+1;<br /> sessionStorage.setItem(page_path, gtm_fs_count);<br /> <br /> } else if(!sessionStorage[page_path]) {<br /> <br /> sessionStorage.setItem(page_path, gtm_fs_count) ;<br /> <br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Create a custom JS variable to retrieve the value:<br /> &lt;pre&gt;<br /> function() {<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g,&quot;F_SLASH&quot;);<br /> return parseInt(window.sessionStorage[page_path]); <br /> }<br /> &lt;/pre&gt;<br /> <br /> Then update the trigger to the variable is less than 2 as well as its existing conditions<br /> <br /> <br /> == Cookie Consent Banner &amp; Consent Mode V2 ==<br /> <br /> For clients that don't have this setup &amp; functioning already, its possible to setup a consent mode friendly cookie banner using the below JS:<br /> Within the .zip, the file is /build/cookieconsent.js<br /> [[Media:Cookieconsent-master.zip|Cookieconsent-master.zip]]<br /> <br /> This file will need to be hosted somewhere that is accessible for the client site.<br /> Once this has been done the below script will need to be added to the site, before GTM is loaded.<br /> <br /> &lt;pre&gt;<br /> &lt;script src=&quot;{{cookieconsent.js}}&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // Define dataLayer and the gtag function.<br /> window.dataLayer = window.dataLayer || [];<br /> function gtag() { dataLayer.push(arguments); }<br /> window.CookieConsent.init({<br /> categories: {<br /> // Unique name.<br /> necessary: {<br /> needed: true,<br /> wanted: true,<br /> checked: true,<br /> // Language settings for categories.<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Strictly Necessary Cookies',<br /> description: 'Cookies Required for the site to function as intended.',<br /> },<br /> }<br /> }<br /> },<br /> analytics: {<br /> needed: false,<br /> wanted: false,<br /> checked: false,<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Analytics',<br /> description: 'Used by Google &amp; other 3rd party analytics services',<br /> },<br /> }<br /> }<br /> }<br /> },<br /> consentModeControls: {<br /> ad_storage: 'analytics',<br /> ad_user_data: 'analytics',<br /> ad_personalization: 'analytics',<br /> analytics_storage: 'analytics'<br /> },<br /> });<br /> &lt;/script&gt;<br /> &lt;script&gt;<br /> if (localStorage.getItem('consentMode') === null) {<br /> gtag('consent', 'default', {<br /> 'ad_storage': 'denied',<br /> 'ad_user_data': 'denied',<br /> 'ad_personalization': 'denied',<br /> 'analytics_storage': 'denied'<br /> });<br /> } else {<br /> gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')));<br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;</div>

Ben.robson https://wiki.growth.agency/index.php?title=Google_Tag_Manager&diff=369 2024-03-06T16:56:22Z

<p>Ben.robson: </p> <hr /> <div><br /> = GTM =<br /> &lt;pre&gt;<br /> https://tagmanager.google.com/<br /> &lt;/pre&gt;<br /> Google Tag Manager is a site container used for storing and triggering scripts.&lt;br /&gt;<br /> These then can be used for tracking.&lt;br /&gt;<br /> <br /> = Systems =<br /> <br /> Below are links to pages for different systems.<br /> These pages will include the methods used for installing the Tag Manager and the Conversion Value tracking.&lt;br /&gt; <br /> <br /> {| class=&quot;wikitable sortable&quot; style=&quot;width:100%&quot;<br /> |-<br /> ! Self-Host System !! On-site Builder Systems !! Chat Systems<br /> |-<br /> | [[CS-Cart]] || [[Bigcommerce]] || [[CollectChat]]<br /> |-<br /> | [[Joomla]] || [[Ecwid]] || [[HubSpot Chat]]<br /> |-<br /> | [[Magento 1.x]] || [[EKMPowershop]] || [[Jivo]]<br /> |-<br /> | [[Magento 2.x]] || [[MyshopBlocks]] || [[LiveChat]]<br /> |-<br /> | [[OpenCart]] || [[Shopify]] || [[PureChat]]<br /> |-<br /> | [[Prestashop]] || [[Squarespace]] || [[Tawk]]<br /> |-<br /> | [[Tag Manager Installation (Wordpress)|Wordpress]] || [[Wix]] || [[Tidio]]<br /> |-<br /> | [[X-Cart]] || [[Yell]] || [[ZenDesk]]<br /> |-<br /> | [[Zen Cart]] || || [[Zoho]]<br /> |}<br /> <br /> = Useful Info =<br /> <br /> == Generic jQuery Form Listener ==<br /> <br /> If there is no instructions in the wiki for a particular system and/or plugin and the form uses Ajax to submit,<br /> It may be worth trying this generic form listener.&lt;br /&gt;<br /> <br /> depending on what the jQuery is called when initialized you may need to change &quot;jQuery&quot; to &quot;$&quot; in the code below.&lt;br /&gt;<br /> <br /> create a custom HTML tag and change the index URL to what the URL is submitting to in the Ajax form.&lt;br /&gt;<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {<br /> if (~settings.url.indexOf(&quot;/contact/form/process/&quot;)) {<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> &lt;br /&gt;<br /> note: the form must be using the actual jQuery's Ajax method to perform the request for this to work<br /> <br /> == Unique Page Views ==<br /> <br /> You can track unique page views by storing a value in the sessionStorage variable.<br /> This can be useful for tracking forms where only a thank you page is available track.<br /> <br /> Create a tag that only fires on the page you want to track<br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var gtm_fs_count = 1;<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g, 'F_SLASH');<br /> if (sessionStorage[page_path]) {<br /> <br /> gtm_fs_count = gtm_fs_count+1;<br /> sessionStorage.setItem(page_path, gtm_fs_count);<br /> <br /> } else if(!sessionStorage[page_path]) {<br /> <br /> sessionStorage.setItem(page_path, gtm_fs_count) ;<br /> <br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Create a custom JS variable to retrieve the value:<br /> &lt;pre&gt;<br /> function() {<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g,&quot;F_SLASH&quot;);<br /> return parseInt(window.sessionStorage[page_path]); <br /> }<br /> &lt;/pre&gt;<br /> <br /> Then update the trigger to the variable is less than 2 as well as its existing conditions<br /> <br /> <br /> == Cookie Consent Banner &amp; Consent Mode V2 ==<br /> <br /> For clients that don't have this setup &amp; functioning already, its possible to setup a consent mode friendly cookie banner using the below JS:<br /> Within the .zip, the file is /build/cookieconsent.js<br /> [[Media:Cookieconsent-master.zip|Cookieconsent-master.zip]]<br /> <br /> This file will need to be hosted somewhere that is accessible for the client site.<br /> Once this has been done the below script will need to be added to the site, before GTM is loaded.<br /> <br /> &lt;pre&gt;<br /> &lt;script src=&quot;{{cookieconsent.js}}&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // Define dataLayer and the gtag function.<br /> window.dataLayer = window.dataLayer || [];<br /> function gtag() { dataLayer.push(arguments); }<br /> window.CookieConsent.init({<br /> categories: {<br /> // Unique name.<br /> necessary: {<br /> needed: true,<br /> wanted: true,<br /> checked: true,<br /> // Language settings for categories.<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Strictly Necessary Cookies',<br /> description: 'Cookies Required for the site to function as intended.',<br /> },<br /> }<br /> }<br /> },<br /> analytics: {<br /> needed: false,<br /> wanted: false,<br /> checked: false,<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Analytics',<br /> description: 'Used by Google &amp; other 3rd party Analytics services',<br /> },<br /> }<br /> }<br /> }<br /> },<br /> consentModeControls: {<br /> ad_storage: 'analytics',<br /> ad_user_data: 'analytics',<br /> ad_personalization: 'analytics',<br /> analytics_storage: 'analytics'<br /> },<br /> });<br /> &lt;/script&gt;<br /> &lt;script&gt;<br /> if (localStorage.getItem('consentMode') === null) {<br /> gtag('consent', 'default', {<br /> 'ad_storage': 'denied',<br /> 'ad_user_data': 'denied',<br /> 'ad_personalization': 'denied',<br /> 'analytics_storage': 'denied'<br /> });<br /> } else {<br /> gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')));<br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;</div>

Ben.robson https://wiki.growth.agency/index.php?title=Google_Tag_Manager&diff=368 2024-03-06T16:54:39Z

<p>Ben.robson: </p> <hr /> <div><br /> = GTM =<br /> &lt;pre&gt;<br /> https://tagmanager.google.com/<br /> &lt;/pre&gt;<br /> Google Tag Manager is a site container used for storing and triggering scripts.&lt;br /&gt;<br /> These then can be used for tracking.&lt;br /&gt;<br /> <br /> = Systems =<br /> <br /> Below are links to pages for different systems.<br /> These pages will include the methods used for installing the Tag Manager and the Conversion Value tracking.&lt;br /&gt; <br /> <br /> {| class=&quot;wikitable sortable&quot; style=&quot;width:100%&quot;<br /> |-<br /> ! Self-Host System !! On-site Builder Systems !! Chat Systems<br /> |-<br /> | [[CS-Cart]] || [[Bigcommerce]] || [[CollectChat]]<br /> |-<br /> | [[Joomla]] || [[Ecwid]] || [[HubSpot Chat]]<br /> |-<br /> | [[Magento 1.x]] || [[EKMPowershop]] || [[Jivo]]<br /> |-<br /> | [[Magento 2.x]] || [[MyshopBlocks]] || [[LiveChat]]<br /> |-<br /> | [[OpenCart]] || [[Shopify]] || [[PureChat]]<br /> |-<br /> | [[Prestashop]] || [[Squarespace]] || [[Tawk]]<br /> |-<br /> | [[Tag Manager Installation (Wordpress)|Wordpress]] || [[Wix]] || [[Tidio]]<br /> |-<br /> | [[X-Cart]] || [[Yell]] || [[ZenDesk]]<br /> |-<br /> | [[Zen Cart]] || || [[Zoho]]<br /> |}<br /> <br /> = Useful Info =<br /> <br /> == Generic jQuery Form Listener ==<br /> <br /> If there is no instructions in the wiki for a particular system and/or plugin and the form uses Ajax to submit,<br /> It may be worth trying this generic form listener.&lt;br /&gt;<br /> <br /> depending on what the jQuery is called when initialized you may need to change &quot;jQuery&quot; to &quot;$&quot; in the code below.&lt;br /&gt;<br /> <br /> create a custom HTML tag and change the index URL to what the URL is submitting to in the Ajax form.&lt;br /&gt;<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {<br /> if (~settings.url.indexOf(&quot;/contact/form/process/&quot;)) {<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> &lt;br /&gt;<br /> note: the form must be using the actual jQuery's Ajax method to perform the request for this to work<br /> <br /> == Unique Page Views ==<br /> <br /> You can track unique page views by storing a value in the sessionStorage variable.<br /> This can be useful for tracking forms where only a thank you page is available track.<br /> <br /> Create a tag that only fires on the page you want to track<br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var gtm_fs_count = 1;<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g, 'F_SLASH');<br /> if (sessionStorage[page_path]) {<br /> <br /> gtm_fs_count = gtm_fs_count+1;<br /> sessionStorage.setItem(page_path, gtm_fs_count);<br /> <br /> } else if(!sessionStorage[page_path]) {<br /> <br /> sessionStorage.setItem(page_path, gtm_fs_count) ;<br /> <br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Create a custom JS variable to retrieve the value:<br /> &lt;pre&gt;<br /> function() {<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g,&quot;F_SLASH&quot;);<br /> return parseInt(window.sessionStorage[page_path]); <br /> }<br /> &lt;/pre&gt;<br /> <br /> Then update the trigger to the variable is less than 2 as well as its existing conditions<br /> <br /> <br /> == Cookie Consent Banner &amp; Consent Mode V2 ==<br /> <br /> For clients that don't have this setup &amp; functioning already, its possible to setup a consent mode friendly cookie banner using the below JS:<br /> <br /> [[Media:Cookieconsent-master.zip|Cookieconsent-master.zip]]<br /> <br /> &lt;pre&gt;<br /> &lt;script src=&quot;{{cookieconsent.js}}&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // Define dataLayer and the gtag function.<br /> window.dataLayer = window.dataLayer || [];<br /> function gtag() { dataLayer.push(arguments); }<br /> window.CookieConsent.init({<br /> categories: {<br /> // Unique name.<br /> necessary: {<br /> needed: true,<br /> wanted: true,<br /> checked: true,<br /> // Language settings for categories.<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Strictly Necessary Cookies',<br /> description: 'Cookies Required for the site to function as intended.',<br /> },<br /> }<br /> }<br /> },<br /> analytics: {<br /> needed: false,<br /> wanted: false,<br /> checked: false,<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Analytics',<br /> description: 'Used by Google &amp; other 3rd party Analytics services',<br /> },<br /> }<br /> }<br /> }<br /> },<br /> consentModeControls: {<br /> ad_storage: 'analytics',<br /> ad_user_data: 'analytics',<br /> ad_personalization: 'analytics',<br /> analytics_storage: 'analytics'<br /> },<br /> });<br /> &lt;/script&gt;<br /> &lt;script&gt;<br /> if (localStorage.getItem('consentMode') === null) {<br /> gtag('consent', 'default', {<br /> 'ad_storage': 'denied',<br /> 'ad_user_data': 'denied',<br /> 'ad_personalization': 'denied',<br /> 'analytics_storage': 'denied'<br /> });<br /> } else {<br /> gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')));<br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;</div>

Ben.robson https://wiki.growth.agency/index.php?title=File:Cookieconsent-master.zip&diff=367 2024-03-06T16:50:46Z

<p>Ben.robson: </p> <hr /> <div></div>

Ben.robson https://wiki.growth.agency/index.php?title=Google_Tag_Manager&diff=366 2024-03-06T16:50:04Z

<p>Ben.robson: </p> <hr /> <div><br /> = GTM =<br /> &lt;pre&gt;<br /> https://tagmanager.google.com/<br /> &lt;/pre&gt;<br /> Google Tag Manager is a site container used for storing and triggering scripts.&lt;br /&gt;<br /> These then can be used for tracking.&lt;br /&gt;<br /> <br /> = Systems =<br /> <br /> Below are links to pages for different systems.<br /> These pages will include the methods used for installing the Tag Manager and the Conversion Value tracking.&lt;br /&gt; <br /> <br /> {| class=&quot;wikitable sortable&quot; style=&quot;width:100%&quot;<br /> |-<br /> ! Self-Host System !! On-site Builder Systems !! Chat Systems<br /> |-<br /> | [[CS-Cart]] || [[Bigcommerce]] || [[CollectChat]]<br /> |-<br /> | [[Joomla]] || [[Ecwid]] || [[HubSpot Chat]]<br /> |-<br /> | [[Magento 1.x]] || [[EKMPowershop]] || [[Jivo]]<br /> |-<br /> | [[Magento 2.x]] || [[MyshopBlocks]] || [[LiveChat]]<br /> |-<br /> | [[OpenCart]] || [[Shopify]] || [[PureChat]]<br /> |-<br /> | [[Prestashop]] || [[Squarespace]] || [[Tawk]]<br /> |-<br /> | [[Tag Manager Installation (Wordpress)|Wordpress]] || [[Wix]] || [[Tidio]]<br /> |-<br /> | [[X-Cart]] || [[Yell]] || [[ZenDesk]]<br /> |-<br /> | [[Zen Cart]] || || [[Zoho]]<br /> |}<br /> <br /> = Useful Info =<br /> <br /> == Generic jQuery Form Listener ==<br /> <br /> If there is no instructions in the wiki for a particular system and/or plugin and the form uses Ajax to submit,<br /> It may be worth trying this generic form listener.&lt;br /&gt;<br /> <br /> depending on what the jQuery is called when initialized you may need to change &quot;jQuery&quot; to &quot;$&quot; in the code below.&lt;br /&gt;<br /> <br /> create a custom HTML tag and change the index URL to what the URL is submitting to in the Ajax form.&lt;br /&gt;<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {<br /> if (~settings.url.indexOf(&quot;/contact/form/process/&quot;)) {<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> &lt;br /&gt;<br /> note: the form must be using the actual jQuery's Ajax method to perform the request for this to work<br /> <br /> == Unique Page Views ==<br /> <br /> You can track unique page views by storing a value in the sessionStorage variable.<br /> This can be useful for tracking forms where only a thank you page is available track.<br /> <br /> Create a tag that only fires on the page you want to track<br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var gtm_fs_count = 1;<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g, 'F_SLASH');<br /> if (sessionStorage[page_path]) {<br /> <br /> gtm_fs_count = gtm_fs_count+1;<br /> sessionStorage.setItem(page_path, gtm_fs_count);<br /> <br /> } else if(!sessionStorage[page_path]) {<br /> <br /> sessionStorage.setItem(page_path, gtm_fs_count) ;<br /> <br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Create a custom JS variable to retrieve the value:<br /> &lt;pre&gt;<br /> function() {<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g,&quot;F_SLASH&quot;);<br /> return parseInt(window.sessionStorage[page_path]); <br /> }<br /> &lt;/pre&gt;<br /> <br /> Then update the trigger to the variable is less than 2 as well as its existing conditions<br /> <br /> <br /> == Cookie Consent Banner &amp; Consent Mode V2 ==<br /> <br /> For clients that don't have this setup &amp; functioning already, its possible to setup a consent mode friendly cookie banner using the below JS:<br /> <br /> <br /> <br /> &lt;pre&gt;<br /> &lt;script src=&quot;{{cookieconsent.js}}&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> // Define dataLayer and the gtag function.<br /> window.dataLayer = window.dataLayer || [];<br /> function gtag() { dataLayer.push(arguments); }<br /> window.CookieConsent.init({<br /> categories: {<br /> // Unique name.<br /> necessary: {<br /> needed: true,<br /> wanted: true,<br /> checked: true,<br /> // Language settings for categories.<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Strictly Necessary Cookies',<br /> description: 'Cookies Required for the site to function as intended.',<br /> },<br /> }<br /> }<br /> },<br /> analytics: {<br /> needed: false,<br /> wanted: false,<br /> checked: false,<br /> language: {<br /> locale: {<br /> en: {<br /> name: 'Analytics',<br /> description: 'Used by Google &amp; other 3rd party Analytics services',<br /> },<br /> }<br /> }<br /> }<br /> },<br /> consentModeControls: {<br /> ad_storage: 'analytics',<br /> ad_user_data: 'analytics',<br /> ad_personalization: 'analytics',<br /> analytics_storage: 'analytics'<br /> },<br /> });<br /> &lt;/script&gt;<br /> &lt;script&gt;<br /> if (localStorage.getItem('consentMode') === null) {<br /> gtag('consent', 'default', {<br /> 'ad_storage': 'denied',<br /> 'ad_user_data': 'denied',<br /> 'ad_personalization': 'denied',<br /> 'analytics_storage': 'denied'<br /> });<br /> } else {<br /> gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')));<br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;</div>

Ben.robson https://wiki.growth.agency/index.php?title=File:Gtm-2x.ocmod.zip&diff=365 2024-02-16T15:43:40Z

<p>Ben.robson: Ben.robson uploaded a new version of File:Gtm-2x.ocmod.zip</p> <hr /> <div></div>

Ben.robson https://wiki.growth.agency/index.php?title=OpenCart&diff=364 2024-02-09T14:51:55Z

<p>Ben.robson: /* OCmod */</p> <hr /> <div>= Google Tag Manager =<br /> <br /> Install Tag Manager.<br /> *Note, the OCmod &amp; VQmod scripts below insert the Tag Manager.<br /> <br /> Main Template file:<br /> &lt;pre&gt;<br /> /catalog/view/theme/&lt;&lt;Theme Folder&gt;&gt;/template/common/header.tpl <br /> &lt;/pre&gt;<br /> <br /> == Conversion URLS ==<br /> Contact Thank-you URL:<br /> &lt;pre&gt;<br /> index.php?route=information/contact/success<br /> &lt;/pre&gt;<br /> <br /> Sale Thank-you URL:<br /> &lt;pre&gt;<br /> index.php?route=checkout/success<br /> &lt;/pre&gt;<br /> <br /> Account Creation URL:<br /> &lt;pre&gt;<br /> index.php?route=account/success<br /> &lt;/pre&gt;<br /> <br /> == Conversion Value ==<br /> <br /> The easiest and most reliable way to install the Conversion value tracking is via extensions that inject the code directly into core files.&lt;br /&gt;<br /> These are upgrade safe! (The worst that can happen is that a reference can change and the code is not injected)&lt;br /&gt;<br /> Before using these, it is best to check that the references are the same.&lt;br /&gt;<br /> &lt;b&gt;Change the GTM ID's in the scripts!&lt;/b&gt;.&lt;br /&gt;<br /> &lt;br /&gt;&lt;br /&gt;<br /> OpenCart 2.x uses .tpl files&lt;br /&gt;<br /> OpenCart 3.x uses .twig files&lt;br /&gt;<br /> <br /> === VQmod ===<br /> An OpenCart extension called VQmod is required to insert it into the code.<br /> &lt;pre&gt;<br /> vqmod/xml/get_total_to_success.xml<br /> &lt;/pre&gt;<br /> <br /> [[Media:Get total to success.xml|Get_total_to_success.xml]]<br /> <br /> === OCmod ===<br /> <br /> An OpenCart extension called OCmod is required to insert it into the code.<br /> <br /> Opencart v3.0 Onwards:<br /> [[Media:Gtm.ocmod.zip|Gtm.ocmod.zip]]<br /> <br /> Opencart v2.0:<br /> [[Media:Gtm-2x.ocmod.zip|Gtm-2x.ocmod.zip]]<br /> <br /> = Feeds =<br /> <br /> The Google Base extension will need to be installed and activated.<br /> <br /> &lt;pre&gt;<br /> http://docs.opencart.com/en-gb/extension/feed/<br /> &lt;/pre&gt;<br /> &lt;br /&gt;<br /> The URL for the generated Feed:<br /> &lt;pre&gt;<br /> /index.php?route=feed/google_base<br /> &lt;/pre&gt;</div>

Ben.robson https://wiki.growth.agency/index.php?title=OpenCart&diff=363 2024-02-09T14:51:47Z

<p>Ben.robson: /* OCmod */</p> <hr /> <div>= Google Tag Manager =<br /> <br /> Install Tag Manager.<br /> *Note, the OCmod &amp; VQmod scripts below insert the Tag Manager.<br /> <br /> Main Template file:<br /> &lt;pre&gt;<br /> /catalog/view/theme/&lt;&lt;Theme Folder&gt;&gt;/template/common/header.tpl <br /> &lt;/pre&gt;<br /> <br /> == Conversion URLS ==<br /> Contact Thank-you URL:<br /> &lt;pre&gt;<br /> index.php?route=information/contact/success<br /> &lt;/pre&gt;<br /> <br /> Sale Thank-you URL:<br /> &lt;pre&gt;<br /> index.php?route=checkout/success<br /> &lt;/pre&gt;<br /> <br /> Account Creation URL:<br /> &lt;pre&gt;<br /> index.php?route=account/success<br /> &lt;/pre&gt;<br /> <br /> == Conversion Value ==<br /> <br /> The easiest and most reliable way to install the Conversion value tracking is via extensions that inject the code directly into core files.&lt;br /&gt;<br /> These are upgrade safe! (The worst that can happen is that a reference can change and the code is not injected)&lt;br /&gt;<br /> Before using these, it is best to check that the references are the same.&lt;br /&gt;<br /> &lt;b&gt;Change the GTM ID's in the scripts!&lt;/b&gt;.&lt;br /&gt;<br /> &lt;br /&gt;&lt;br /&gt;<br /> OpenCart 2.x uses .tpl files&lt;br /&gt;<br /> OpenCart 3.x uses .twig files&lt;br /&gt;<br /> <br /> === VQmod ===<br /> An OpenCart extension called VQmod is required to insert it into the code.<br /> &lt;pre&gt;<br /> vqmod/xml/get_total_to_success.xml<br /> &lt;/pre&gt;<br /> <br /> [[Media:Get total to success.xml|Get_total_to_success.xml]]<br /> <br /> === OCmod ===<br /> <br /> An OpenCart extension called OCmod is required to insert it into the code.<br /> <br /> Opencart v3.0 Onwards:<br /> [[Media:Gtm.ocmod.zip|Gtm.ocmod.zip]]<br /> <br /> Opencart 2.0:<br /> [[Media:Gtm-2x.ocmod.zip|Gtm-2x.ocmod.zip]]<br /> <br /> = Feeds =<br /> <br /> The Google Base extension will need to be installed and activated.<br /> <br /> &lt;pre&gt;<br /> http://docs.opencart.com/en-gb/extension/feed/<br /> &lt;/pre&gt;<br /> &lt;br /&gt;<br /> The URL for the generated Feed:<br /> &lt;pre&gt;<br /> /index.php?route=feed/google_base<br /> &lt;/pre&gt;</div>

Ben.robson https://wiki.growth.agency/index.php?title=OpenCart&diff=362 2024-02-09T14:51:20Z

<p>Ben.robson: /* OCmod */</p> <hr /> <div>= Google Tag Manager =<br /> <br /> Install Tag Manager.<br /> *Note, the OCmod &amp; VQmod scripts below insert the Tag Manager.<br /> <br /> Main Template file:<br /> &lt;pre&gt;<br /> /catalog/view/theme/&lt;&lt;Theme Folder&gt;&gt;/template/common/header.tpl <br /> &lt;/pre&gt;<br /> <br /> == Conversion URLS ==<br /> Contact Thank-you URL:<br /> &lt;pre&gt;<br /> index.php?route=information/contact/success<br /> &lt;/pre&gt;<br /> <br /> Sale Thank-you URL:<br /> &lt;pre&gt;<br /> index.php?route=checkout/success<br /> &lt;/pre&gt;<br /> <br /> Account Creation URL:<br /> &lt;pre&gt;<br /> index.php?route=account/success<br /> &lt;/pre&gt;<br /> <br /> == Conversion Value ==<br /> <br /> The easiest and most reliable way to install the Conversion value tracking is via extensions that inject the code directly into core files.&lt;br /&gt;<br /> These are upgrade safe! (The worst that can happen is that a reference can change and the code is not injected)&lt;br /&gt;<br /> Before using these, it is best to check that the references are the same.&lt;br /&gt;<br /> &lt;b&gt;Change the GTM ID's in the scripts!&lt;/b&gt;.&lt;br /&gt;<br /> &lt;br /&gt;&lt;br /&gt;<br /> OpenCart 2.x uses .tpl files&lt;br /&gt;<br /> OpenCart 3.x uses .twig files&lt;br /&gt;<br /> <br /> === VQmod ===<br /> An OpenCart extension called VQmod is required to insert it into the code.<br /> &lt;pre&gt;<br /> vqmod/xml/get_total_to_success.xml<br /> &lt;/pre&gt;<br /> <br /> [[Media:Get total to success.xml|Get_total_to_success.xml]]<br /> <br /> === OCmod ===<br /> <br /> An OpenCart extension called OCmod is required to insert it into the code.<br /> <br /> Opencart 3.0 onwards:<br /> [[Media:Gtm.ocmod.zip|Gtm.ocmod.zip]]<br /> <br /> Opencart 2.0:<br /> [[Media:Gtm-2x.ocmod.zip|Gtm-2x.ocmod.zip]]<br /> <br /> = Feeds =<br /> <br /> The Google Base extension will need to be installed and activated.<br /> <br /> &lt;pre&gt;<br /> http://docs.opencart.com/en-gb/extension/feed/<br /> &lt;/pre&gt;<br /> &lt;br /&gt;<br /> The URL for the generated Feed:<br /> &lt;pre&gt;<br /> /index.php?route=feed/google_base<br /> &lt;/pre&gt;</div>

Ben.robson https://wiki.growth.agency/index.php?title=File:Gtm-2x.ocmod.zip&diff=361 2024-02-09T14:50:55Z

<p>Ben.robson: </p> <hr /> <div></div>

Ben.robson https://wiki.growth.agency/index.php?title=OpenCart&diff=360 2024-02-09T14:50:38Z

<p>Ben.robson: /* OCmod */</p> <hr /> <div>= Google Tag Manager =<br /> <br /> Install Tag Manager.<br /> *Note, the OCmod &amp; VQmod scripts below insert the Tag Manager.<br /> <br /> Main Template file:<br /> &lt;pre&gt;<br /> /catalog/view/theme/&lt;&lt;Theme Folder&gt;&gt;/template/common/header.tpl <br /> &lt;/pre&gt;<br /> <br /> == Conversion URLS ==<br /> Contact Thank-you URL:<br /> &lt;pre&gt;<br /> index.php?route=information/contact/success<br /> &lt;/pre&gt;<br /> <br /> Sale Thank-you URL:<br /> &lt;pre&gt;<br /> index.php?route=checkout/success<br /> &lt;/pre&gt;<br /> <br /> Account Creation URL:<br /> &lt;pre&gt;<br /> index.php?route=account/success<br /> &lt;/pre&gt;<br /> <br /> == Conversion Value ==<br /> <br /> The easiest and most reliable way to install the Conversion value tracking is via extensions that inject the code directly into core files.&lt;br /&gt;<br /> These are upgrade safe! (The worst that can happen is that a reference can change and the code is not injected)&lt;br /&gt;<br /> Before using these, it is best to check that the references are the same.&lt;br /&gt;<br /> &lt;b&gt;Change the GTM ID's in the scripts!&lt;/b&gt;.&lt;br /&gt;<br /> &lt;br /&gt;&lt;br /&gt;<br /> OpenCart 2.x uses .tpl files&lt;br /&gt;<br /> OpenCart 3.x uses .twig files&lt;br /&gt;<br /> <br /> === VQmod ===<br /> An OpenCart extension called VQmod is required to insert it into the code.<br /> &lt;pre&gt;<br /> vqmod/xml/get_total_to_success.xml<br /> &lt;/pre&gt;<br /> <br /> [[Media:Get total to success.xml|Get_total_to_success.xml]]<br /> <br /> === OCmod ===<br /> <br /> An OpenCart extension called OCmod is required to insert it into the code.<br /> <br /> Opencart 3.0 onwards:<br /> [[Media:Gtm.ocmod.zip|Gtm.ocmod.zip]]<br /> <br /> Opencart 2.0:<br /> <br /> = Feeds =<br /> <br /> The Google Base extension will need to be installed and activated.<br /> <br /> &lt;pre&gt;<br /> http://docs.opencart.com/en-gb/extension/feed/<br /> &lt;/pre&gt;<br /> &lt;br /&gt;<br /> The URL for the generated Feed:<br /> &lt;pre&gt;<br /> /index.php?route=feed/google_base<br /> &lt;/pre&gt;</div>

Ben.robson https://wiki.growth.agency/index.php?title=File:Gtm.ocmod.zip&diff=358 2024-02-09T14:32:21Z

<p>Ben.robson: Ben.robson uploaded a new version of File:Gtm.ocmod.zip</p> <hr /> <div>== Summary ==<br /> GTM OCmod install script</div>

Ben.robson https://wiki.growth.agency/index.php?title=Google_Tag_Manager_for_WordPress_(Plugin)&diff=349 2023-11-22T17:08:04Z

<p>Ben.robson: /* Events */</p> <hr /> <div>Google Tag Manager for WordPress is a plugin that allows easy installation and tracking for the GTM.<br /> <br /> https://wordpress.org/plugins/duracelltomi-google-tag-manager/<br /> <br /> == Events ==<br /> <br /> === Classic tracking ===<br /> event:&lt;br /&gt;<br /> gtm4wp.orderCompleted<br /> <br /> transactionProducts.sku<br /> <br /> Example Data From GTM4WP Plugin:<br /> &lt;pre&gt;<br /> dataLayer = [{<br /> &quot;event&quot;:&quot;transaction&quot;,<br /> &quot;transactionId&quot;:&quot;100002486&quot;,<br /> &quot;transactionDate&quot;:&quot;2015-09-03&quot;,<br /> &quot;transactionTotal&quot;:295,<br /> &quot;transactionShipping&quot;:0,<br /> &quot;transactionTax&quot;:26.82,<br /> &quot;transactionPaymentType&quot;:&quot;Rechnung&quot;,<br /> &quot;transactionCurrency&quot;:&quot;EUR&quot;,<br /> &quot;transactionShippingMethod&quot;:&quot;tablerate&quot;,<br /> &quot;transactionProducts&quot;:[<br /> {<br /> &quot;name&quot;:&quot;Handelsvertretergesetz&quot;,<br /> &quot;sku&quot;:&quot;9783700760344&quot;,<br /> &quot;category&quot;:&quot;Buch&quot;,<br /> &quot;price&quot;:113.64,<br /> &quot;quantity&quot;:1<br /> },<br /> {<br /> &quot;name&quot;:&quot;Steuerrecht&quot;,<br /> &quot;sku&quot;:&quot;9783700759294&quot;,<br /> &quot;category&quot;:&quot;Kodex&quot;,<br /> &quot;price&quot;:77.27,<br /> &quot;quantity&quot;:2<br /> }<br /> ]<br /> }];<br /> &lt;/pre&gt;<br /> <br /> === Enhanced tracking ===<br /> &lt;pre&gt;<br /> https://gtm4wp.com/how-to-articles/how-to-setup-enhanced-ecommerce-tracking<br /> &lt;/pre&gt;<br /> <br /> events:<br /> &lt;pre&gt;<br /> gtm4wp.orderCompletedEEC<br /> <br /> ecommerce.purchase.actionField.id<br /> ecommerce.purchase.actionField.revenue<br /> &lt;/pre&gt;<br /> <br /> Example<br /> &lt;pre&gt;<br /> dataLayer.push({<br /> 'ecommerce': {<br /> 'purchase': {<br /> 'actionField': {<br /> 'id': '3546321',<br /> 'affiliation': 'test',<br /> 'transactionTotal': '540.00',<br /> 'transactionTax': '93.72',<br /> 'revenue': '446.28',<br /> 'currency': 'EUR'<br /> },<br /> 'products': [{<br /> 'name': 'test',<br /> 'sku': '4',<br /> 'price': '446.28',<br /> 'category': 'test',<br /> 'quantity': 1<br /> }]<br /> }<br /> }<br /> });<br /> &lt;/pre&gt;<br /> <br /> === CF7 tracking ===<br /> event:&lt;br /&gt;<br /> gtm4wp.contactForm7Submitted<br /> <br /> === Analytics 4: Ecommerce Tracking ===<br /> If Enhanced Ecommerce is enabled, then you can use the below Tag Manager template to setup Analytics 4 Ecommerce tracking for you.&lt;br /&gt;<br /> Just make sure to test it in case it becomes outdated!&lt;br /&gt;<br /> <br /> [[File:Gtm4wp-ga4-container-elements.json]]<br /> <br /> Source: https://gtm4wp.com/how-to-articles/how-to-setup-enhanced-ecommerce-tracking-google-analytics-4-ga4-version&lt;br /&gt;<br /> <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.</div>

Ben.robson https://wiki.growth.agency/index.php?title=Google_Tag_Manager_for_WordPress_(Plugin)&diff=348 2023-11-22T16:22:36Z

<p>Ben.robson: /* Enhanced tracking */</p> <hr /> <div>Google Tag Manager for WordPress is a plugin that allows easy installation and tracking for the GTM.<br /> <br /> https://wordpress.org/plugins/duracelltomi-google-tag-manager/<br /> <br /> == Events ==<br /> <br /> === Classic tracking ===<br /> event:&lt;br /&gt;<br /> gtm4wp.orderCompleted<br /> <br /> transactionProducts.sku<br /> <br /> Example Data From GTM4WP Plugin:<br /> &lt;pre&gt;<br /> dataLayer = [{<br /> &quot;event&quot;:&quot;transaction&quot;,<br /> &quot;transactionId&quot;:&quot;100002486&quot;,<br /> &quot;transactionDate&quot;:&quot;2015-09-03&quot;,<br /> &quot;transactionTotal&quot;:295,<br /> &quot;transactionShipping&quot;:0,<br /> &quot;transactionTax&quot;:26.82,<br /> &quot;transactionPaymentType&quot;:&quot;Rechnung&quot;,<br /> &quot;transactionCurrency&quot;:&quot;EUR&quot;,<br /> &quot;transactionShippingMethod&quot;:&quot;tablerate&quot;,<br /> &quot;transactionProducts&quot;:[<br /> {<br /> &quot;name&quot;:&quot;Handelsvertretergesetz&quot;,<br /> &quot;sku&quot;:&quot;9783700760344&quot;,<br /> &quot;category&quot;:&quot;Buch&quot;,<br /> &quot;price&quot;:113.64,<br /> &quot;quantity&quot;:1<br /> },<br /> {<br /> &quot;name&quot;:&quot;Steuerrecht&quot;,<br /> &quot;sku&quot;:&quot;9783700759294&quot;,<br /> &quot;category&quot;:&quot;Kodex&quot;,<br /> &quot;price&quot;:77.27,<br /> &quot;quantity&quot;:2<br /> }<br /> ]<br /> }];<br /> &lt;/pre&gt;<br /> <br /> === Enhanced tracking ===<br /> &lt;pre&gt;<br /> https://gtm4wp.com/how-to-articles/how-to-setup-enhanced-ecommerce-tracking<br /> &lt;/pre&gt;<br /> <br /> Events:<br /> &lt;pre&gt;<br /> purchase<br /> <br /> eventModel.transaction_id<br /> eventModel.value<br /> &lt;/pre&gt;<br /> <br /> Legacy events (these should, in most cases still work):<br /> &lt;pre&gt;<br /> gtm4wp.orderCompletedEEC<br /> <br /> ecommerce.purchase.actionField.id<br /> ecommerce.purchase.actionField.revenue<br /> &lt;/pre&gt;<br /> <br /> Example<br /> &lt;pre&gt;<br /> dataLayer.push({<br /> 'ecommerce': {<br /> 'purchase': {<br /> 'actionField': {<br /> 'id': '3546321',<br /> 'affiliation': 'test',<br /> 'transactionTotal': '540.00',<br /> 'transactionTax': '93.72',<br /> 'revenue': '446.28',<br /> 'currency': 'EUR'<br /> },<br /> 'products': [{<br /> 'name': 'test',<br /> 'sku': '4',<br /> 'price': '446.28',<br /> 'category': 'test',<br /> 'quantity': 1<br /> }]<br /> }<br /> }<br /> });<br /> &lt;/pre&gt;<br /> <br /> === CF7 tracking ===<br /> event:&lt;br /&gt;<br /> gtm4wp.contactForm7Submitted<br /> <br /> === Analytics 4: Ecommerce Tracking ===<br /> If Enhanced Ecommerce is enabled, then you can use the below Tag Manager template to setup Analytics 4 Ecommerce tracking for you.&lt;br /&gt;<br /> Just make sure to test it in case it becomes outdated!&lt;br /&gt;<br /> <br /> [[File:Gtm4wp-ga4-container-elements.json]]<br /> <br /> Source: https://gtm4wp.com/how-to-articles/how-to-setup-enhanced-ecommerce-tracking-google-analytics-4-ga4-version&lt;br /&gt;<br /> <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.</div>

Ben.robson https://wiki.growth.agency/index.php?title=Google_Tag_Manager_for_WordPress_(Plugin)&diff=347 2023-11-22T16:22:22Z

<p>Ben.robson: /* Enhanced tracking */</p> <hr /> <div>Google Tag Manager for WordPress is a plugin that allows easy installation and tracking for the GTM.<br /> <br /> https://wordpress.org/plugins/duracelltomi-google-tag-manager/<br /> <br /> == Events ==<br /> <br /> === Classic tracking ===<br /> event:&lt;br /&gt;<br /> gtm4wp.orderCompleted<br /> <br /> transactionProducts.sku<br /> <br /> Example Data From GTM4WP Plugin:<br /> &lt;pre&gt;<br /> dataLayer = [{<br /> &quot;event&quot;:&quot;transaction&quot;,<br /> &quot;transactionId&quot;:&quot;100002486&quot;,<br /> &quot;transactionDate&quot;:&quot;2015-09-03&quot;,<br /> &quot;transactionTotal&quot;:295,<br /> &quot;transactionShipping&quot;:0,<br /> &quot;transactionTax&quot;:26.82,<br /> &quot;transactionPaymentType&quot;:&quot;Rechnung&quot;,<br /> &quot;transactionCurrency&quot;:&quot;EUR&quot;,<br /> &quot;transactionShippingMethod&quot;:&quot;tablerate&quot;,<br /> &quot;transactionProducts&quot;:[<br /> {<br /> &quot;name&quot;:&quot;Handelsvertretergesetz&quot;,<br /> &quot;sku&quot;:&quot;9783700760344&quot;,<br /> &quot;category&quot;:&quot;Buch&quot;,<br /> &quot;price&quot;:113.64,<br /> &quot;quantity&quot;:1<br /> },<br /> {<br /> &quot;name&quot;:&quot;Steuerrecht&quot;,<br /> &quot;sku&quot;:&quot;9783700759294&quot;,<br /> &quot;category&quot;:&quot;Kodex&quot;,<br /> &quot;price&quot;:77.27,<br /> &quot;quantity&quot;:2<br /> }<br /> ]<br /> }];<br /> &lt;/pre&gt;<br /> <br /> === Enhanced tracking ===<br /> &lt;pre&gt;<br /> https://gtm4wp.com/how-to-articles/how-to-setup-enhanced-ecommerce-tracking<br /> &lt;/pre&gt;<br /> <br /> The GA4 version of EEC:<br /> &lt;pre&gt;<br /> purchase<br /> <br /> eventModel.transaction_id<br /> eventModel.value<br /> &lt;/pre&gt;<br /> <br /> Legacy events (these should, in most cases still work):<br /> &lt;pre&gt;<br /> gtm4wp.orderCompletedEEC<br /> <br /> ecommerce.purchase.actionField.id<br /> ecommerce.purchase.actionField.revenue<br /> &lt;/pre&gt;<br /> <br /> Example<br /> &lt;pre&gt;<br /> dataLayer.push({<br /> 'ecommerce': {<br /> 'purchase': {<br /> 'actionField': {<br /> 'id': '3546321',<br /> 'affiliation': 'test',<br /> 'transactionTotal': '540.00',<br /> 'transactionTax': '93.72',<br /> 'revenue': '446.28',<br /> 'currency': 'EUR'<br /> },<br /> 'products': [{<br /> 'name': 'test',<br /> 'sku': '4',<br /> 'price': '446.28',<br /> 'category': 'test',<br /> 'quantity': 1<br /> }]<br /> }<br /> }<br /> });<br /> &lt;/pre&gt;<br /> <br /> === CF7 tracking ===<br /> event:&lt;br /&gt;<br /> gtm4wp.contactForm7Submitted<br /> <br /> === Analytics 4: Ecommerce Tracking ===<br /> If Enhanced Ecommerce is enabled, then you can use the below Tag Manager template to setup Analytics 4 Ecommerce tracking for you.&lt;br /&gt;<br /> Just make sure to test it in case it becomes outdated!&lt;br /&gt;<br /> <br /> [[File:Gtm4wp-ga4-container-elements.json]]<br /> <br /> Source: https://gtm4wp.com/how-to-articles/how-to-setup-enhanced-ecommerce-tracking-google-analytics-4-ga4-version&lt;br /&gt;<br /> <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.</div>

Ben.robson https://wiki.growth.agency/index.php?title=Google_Tag_Manager&diff=336 2023-06-12T13:59:19Z

<p>Ben.robson: /* Unique Page Views */</p> <hr /> <div><br /> = GTM =<br /> &lt;pre&gt;<br /> https://tagmanager.google.com/<br /> &lt;/pre&gt;<br /> Google Tag Manager is a site container used for storing and triggering scripts.&lt;br /&gt;<br /> These then can be used for tracking.&lt;br /&gt;<br /> <br /> = Systems =<br /> <br /> Below are links to pages for different systems.<br /> These pages will include the methods used for installing the Tag Manager and the Conversion Value tracking.&lt;br /&gt; <br /> <br /> {| class=&quot;wikitable sortable&quot; style=&quot;width:100%&quot;<br /> |-<br /> ! Self-Host System !! On-site Builder Systems !! Chat Systems<br /> |-<br /> | [[CS-Cart]] || [[Bigcommerce]] || [[CollectChat]]<br /> |-<br /> | [[Joomla]] || [[Ecwid]] || [[HubSpot Chat]]<br /> |-<br /> | [[Magento 1.x]] || [[EKMPowershop]] || [[Jivo]]<br /> |-<br /> | [[Magento 2.x]] || [[MyshopBlocks]] || [[LiveChat]]<br /> |-<br /> | [[OpenCart]] || [[Shopify]] || [[Tawk]]<br /> |-<br /> | [[Prestashop]] || [[Squarespace]] || [[Tidio]]<br /> |-<br /> | [[Tag Manager Installation (Wordpress)|Wordpress]] || [[Wix]] || [[ZenDesk]]<br /> |-<br /> | [[X-Cart]] || [[Yell]] || [[Zoho]]<br /> |-<br /> | [[Zen Cart]] || ||<br /> |}<br /> <br /> = Useful Info =<br /> <br /> == Generic jQuery Form Listener ==<br /> <br /> If there is no instructions in the wiki for a particular system and/or plugin and the form uses Ajax to submit,<br /> It may be worth trying this generic form listener.&lt;br /&gt;<br /> <br /> depending on what the jQuery is called when initialized you may need to change &quot;jQuery&quot; to &quot;$&quot; in the code below.&lt;br /&gt;<br /> <br /> create a custom HTML tag and change the index URL to what the URL is submitting to in the Ajax form.&lt;br /&gt;<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {<br /> if (~settings.url.indexOf(&quot;/contact/form/process/&quot;)) {<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> &lt;br /&gt;<br /> note: the form must be using the actual jQuery's Ajax method to perform the request for this to work<br /> <br /> == Unique Page Views ==<br /> <br /> You can track unique page views by storing a value in the sessionStorage variable.<br /> This can be useful for tracking forms where only a thank you page is available track.<br /> <br /> Create a tag that only fires on the page you want to track<br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var gtm_fs_count = 1;<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g, 'F_SLASH');<br /> if (sessionStorage[page_path]) {<br /> <br /> gtm_fs_count = gtm_fs_count+1;<br /> sessionStorage.setItem(page_path, gtm_fs_count);<br /> <br /> } else if(!sessionStorage[page_path]) {<br /> <br /> sessionStorage.setItem(page_path, gtm_fs_count) ;<br /> <br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Create a custom JS variable to retrieve the value:<br /> &lt;pre&gt;<br /> function() {<br /> var page_path = &quot;{{Page Path}}&quot;.replace(/\//g,&quot;F_SLASH&quot;);<br /> return parseInt(window.sessionStorage[page_path]); <br /> }<br /> &lt;/pre&gt;<br /> <br /> Then update the trigger to the variable is less than 2 as well as its existing conditions</div>

Ben.robson https://wiki.growth.agency/index.php?title=Google_Tag_Manager&diff=335 2023-06-09T14:30:55Z

<p>Ben.robson: /* Useful Info */</p> <hr /> <div><br /> = GTM =<br /> &lt;pre&gt;<br /> https://tagmanager.google.com/<br /> &lt;/pre&gt;<br /> Google Tag Manager is a site container used for storing and triggering scripts.&lt;br /&gt;<br /> These then can be used for tracking.&lt;br /&gt;<br /> <br /> = Systems =<br /> <br /> Below are links to pages for different systems.<br /> These pages will include the methods used for installing the Tag Manager and the Conversion Value tracking.&lt;br /&gt; <br /> <br /> {| class=&quot;wikitable sortable&quot; style=&quot;width:100%&quot;<br /> |-<br /> ! Self-Host System !! On-site Builder Systems !! Chat Systems<br /> |-<br /> | [[CS-Cart]] || [[Bigcommerce]] || [[CollectChat]]<br /> |-<br /> | [[Joomla]] || [[Ecwid]] || [[HubSpot Chat]]<br /> |-<br /> | [[Magento 1.x]] || [[EKMPowershop]] || [[Jivo]]<br /> |-<br /> | [[Magento 2.x]] || [[MyshopBlocks]] || [[LiveChat]]<br /> |-<br /> | [[OpenCart]] || [[Shopify]] || [[Tawk]]<br /> |-<br /> | [[Prestashop]] || [[Squarespace]] || [[Tidio]]<br /> |-<br /> | [[Tag Manager Installation (Wordpress)|Wordpress]] || [[Wix]] || [[ZenDesk]]<br /> |-<br /> | [[X-Cart]] || [[Yell]] || [[Zoho]]<br /> |-<br /> | [[Zen Cart]] || ||<br /> |}<br /> <br /> = Useful Info =<br /> <br /> == Generic jQuery Form Listener ==<br /> <br /> If there is no instructions in the wiki for a particular system and/or plugin and the form uses Ajax to submit,<br /> It may be worth trying this generic form listener.&lt;br /&gt;<br /> <br /> depending on what the jQuery is called when initialized you may need to change &quot;jQuery&quot; to &quot;$&quot; in the code below.&lt;br /&gt;<br /> <br /> create a custom HTML tag and change the index URL to what the URL is submitting to in the Ajax form.&lt;br /&gt;<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {<br /> if (~settings.url.indexOf(&quot;/contact/form/process/&quot;)) {<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> &lt;br /&gt;<br /> note: the form must be using the actual jQuery's Ajax method to perform the request for this to work<br /> <br /> == Unique Page Views ==<br /> <br /> You can track unique page views by storing a value in the sessionStorage variable.<br /> This can be useful for tracking forms where only a thank you page is available track.<br /> <br /> Create a tag that only fires on the page you want to track<br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var gtm_fs_count = 1;<br /> if (sessionStorage.gtm_fs_count) {<br /> <br /> gtm_fs_count = gtm_fs_count+1;<br /> sessionStorage.setItem(&quot;gtm_fs_count&quot;, gtm_fs_count);<br /> <br /> } else if(!sessionStorage.gtm_fs_count) {<br /> <br /> sessionStorage.setItem(&quot;gtm_fs_count&quot;, gtm_fs_count) ;<br /> <br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Create a custom JS variable to retrieve the value:<br /> &lt;pre&gt;<br /> function() {<br /> return parseInt(window.sessionStorage.gtm_fs_count) <br /> }<br /> &lt;/pre&gt;<br /> <br /> Then update the trigger to the variable is less than 2 as well as its existing conditions</div>

Ben.robson https://wiki.growth.agency/index.php?title=Tag_Manager_Installation_(Wordpress)&diff=290 2022-11-04T14:29:10Z

<p>Ben.robson: /* WP Forms */</p> <hr /> <div><br /> To install on google tag manager it is advised to use the Duracell Tomi Plugin:<br /> [[Google Tag Manager for WordPress (Plugin)]]<br /> <br /> = Tracking Other Wordpress Contact Plugins =<br /> <br /> == Formidable ==<br /> Just can copy and paste the dataLayer event script directly to success message in back-end.<br /> <br /> == Siteorigin form ==<br /> this strips out script tags so will need to add custom JS:<br /> <br /> &lt;pre&gt;<br /> function () {<br /> var success = document.getElementsByClassName(&quot;sow-contact-form-success&quot;);<br /> return (typeof success[0] != &quot;undefined&quot;);<br /> }<br /> &lt;/pre&gt;<br /> <br /> == FormCraft ==<br /> <br /> This plugin does not strip or encode script tags, so can be done in the back-end<br /> <br /> In form options go to options -&gt; Custom Text -&gt; Top Box<br /> <br /> In newer versions, the form cannot be saved with the script tag added,<br /> another method will need to be researched.<br /> <br /> == Gravity Form ==<br /> <br /> Create tag as custom HTML:<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> if (typeof jQuery != 'undefined') {<br /> jQuery(document).ready(function(){<br /> jQuery(document).on('gform_confirmation_loaded', function(event, form_id) {<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'gform_id' : form_id, 'event' : 'contact-form-submitted'});<br /> });<br /> });<br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> For this to work, AJAX is required to be enabled on the form.<br /> This can be enabled in the short-code[https://codex.wordpress.org/Shortcode_API] when the form is called on the wordpress page:<br /> &lt;pre&gt;<br /> [gravityform id=&quot;1&quot; ajax=&quot;true&quot;]<br /> &lt;/pre&gt;<br /> <br /> *note, the JS bind will not fire if the form is set to redirect after success.<br /> <br /> == Elementor Form Builder ==<br /> <br /> Create tag as Custom HTML:<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery( document ).ready(function( $ ){<br /> $( document ).on('submit_success', function( event, response ) {<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> == Pojo Forms ==<br /> <br /> Create tag as Custom HTML:<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery( document ).ready(function( $ ){<br /> $( document ).on('pojo_forms_form_submitted', function( event, response ) {<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> == Caldera Forms ==<br /> <br /> Create tag as Custom HTML:<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery( function() {<br /> jQuery( document ).on( 'cf.form.submit', function (event, data ) {<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> *note, the JS bind will not fire if the form is not set to AJAX submission.<br /> <br /> == Contact Form 7 ==<br /> <br /> Create tag as Custom HTML:<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> if (typeof jQuery != 'undefined') {<br /> jQuery( function() {<br /> jQuery('.wpcf7').on('wpcf7mailsent', function(e) {<br /> var dataLayer = window.dataLayer || [];<br /> var cF7formid = '(not set)';<br /> var cF7formName = '(not set)';<br /> if ( e &amp;&amp; e.target &amp;&amp; e.target.id ) {<br /> cF7formName = e.target.id;<br /> }<br /> if( cF7formName ) {<br /> var nameRegex = cF7formName.match(/-f([0-9]+)-/) || [''];<br /> if( nameRegex &amp;&amp; nameRegex[1] ) {<br /> cF7formid = nameRegex[1];<br /> }<br /> }<br /> dataLayer.push({<br /> 'contact-form-id': cF7formid,<br /> 'contact-form-name': cF7formName,<br /> 'event': 'contact-form-submitted'<br /> });<br /> });<br /> });<br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Note: CF7 developers love changing their hook names, if this doesn't work try the below instead:&lt;br /&gt;<br /> &lt;pre&gt;<br /> jQuery('.wpcf7').on('wpcf7:mailsent', function(e) {<br /> &lt;/pre&gt;<br /> <br /> == Divi Form Builder ==<br /> 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.<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {<br /> if (~settings.url.indexOf(&quot;/contact/&quot;)) {<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> &lt;br /&gt;<br /> It is also possible to use the field names that are being submitted:<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {<br /> if (~settings.data.indexOf(&quot;et_pb_contact_firstname&quot;)) {<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> == WP Forms ==<br /> Using a slightly altered version of the JQuery form listener should work for this:<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).on('wpformsAjaxSubmitSuccess', (function( event, xhr, settings ) {<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'form-submitted'});<br /> }));<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Alternatively:<br /> The Event can be added directly to the form confirmation message<br /> Edit the form &amp; go to Settings &gt; Confirmations<br /> Switch to Text view then add the event code:<br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> &lt;b&gt;Or if using GTM4WP&lt;/b&gt;&lt;br /&gt;<br /> Add a datalayer variable in GTM with:&lt;br /&gt;<br /> eventModel.form_id for Form ID&lt;br /&gt;<br /> <br /> Setup a custom event Trigger:<br /> &lt;pre&gt;<br /> Event: form_submit<br /> Some Custom Events:<br /> Form ID contains wpforms-form-<br /> &lt;/pre&gt;<br /> <br /> == Conversion Plus ==<br /> <br /> For the poppup form, create tag as Custom HTML and use the ajaxSuccess hook below:<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings ) {<br /> if( ~settings.url.indexOf(&quot;/wp-admin/admin-ajax.php&quot;) &amp;&amp; ~settings.data.indexOf(&quot;action=cp_add_subscriber&quot;) ) {<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'cp-form-submitted'});<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> = Tracking Other Wordpress Newsletter Plugins =<br /> <br /> == Mailchimp Forms (mc4wp) ==<br /> <br /> if is not AJAX and stays on page when the form submits, add a JS variable:<br /> <br /> &lt;pre&gt;<br /> function () {<br /> var success = document.getElementsByClassName(&quot;mc4wp-success&quot;);<br /> return (typeof success[0] != &quot;undefined&quot;);<br /> }<br /> &lt;/pre&gt;<br /> <br /> if not, custom HTML will need to be added as a listener:<br /> <br /> &lt;pre&gt;<br /> jQuery(document).ready(function() {<br /> mc4wp.forms.on('submitted', function() {<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'newsletter-form-submitted'});<br /> });<br /> });<br /> &lt;/pre&gt;<br /> <br /> == Pop-up Builder - Mailchimp ==<br /> <br /> Add Custom HTML:<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> if (typeof SgpbMailchimp != &quot;undefined&quot;) {<br /> var originalmcsuccess = SgpbMailchimp.prototype.sgpbMailchimpSuccess;<br /> SgpbMailchimp.prototype.sgpbMailchimpSuccess = function(data) {<br /> originalmcsuccess.call(this, data);<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'mailchimp-form-submitted'});<br /> };<br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> == Avia Form Builder ==<br /> Add Custom HTML:<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> (function($) {<br /> $('body').on('av_resize_finished', function() {<br /> if(!$('#ajaxresponse_1').hasClass('hidden')) {<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'avia-form-submitted'});<br /> }<br /> });<br /> })(jQuery);<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Note: (Still not 100% on this)<br /> <br /> = Tracking Other Wordpress Ecommerce Plugins =<br /> <br /> == WooCommerce ==<br /> <br /> See Article: [[WooCommerce]]<br /> <br /> == Foxy Shop ==<br /> <br /> &lt;pre&gt;<br /> https://wiki.foxycart.com/v/2.0/receipt#using_custom_tracking_code<br /> &lt;/pre&gt;<br /> <br /> copy template from:<br /> &lt;pre&gt;<br /> /wp-content/plugins/foxyshop/themefiles/foxyshop-receipt.php<br /> &lt;/pre&gt;<br /> <br /> to theme / child theme root<br /> <br /> Code:<br /> <br /> &lt;pre&gt;<br /> {% if first_receipt_display %}<br /> <br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> 'order_id' : '{{ order_id }}',<br /> 'order_value' : '{{ total_order }}',<br /> 'event' : 'order-submitted'<br /> });<br /> &lt;/script&gt;<br /> <br /> {% endif %}<br /> &lt;/pre&gt;<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> 'order_id' : '&lt;?php echo $transaction_id; ?&gt;',<br /> 'order_value' : '&lt;?php echo $order_total; ?&gt;',<br /> 'event' : 'order-submitted'<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> == Chauffeur Booking System Plugin ==<br /> <br /> The Chauffeur Booking System Plugin is a paid for plug-in with very little documentation and hooks (actions and filters) to use.&lt;br /&gt;<br /> The order ID &amp; order value cannot be tracked without modification of the plugin.<br /> <br /> Below is code to track the booking completion.<br /> Insert the code as a custom HTML tag in the tag manager:<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> if (typeof jQuery != 'undefined') {<br /> (function ($) {<br /> var origCss = $.fn.css;<br /> $.fn.css = function(prop, value) {<br /> if( prop == 'display' &amp;&amp; value == 'block' &amp;&amp; this.hasClass('chbs-main-content-step-5') ) {<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'chauffeur-booking-form-submitted'});<br /> }<br /> return origCss.apply(this, arguments);<br /> }<br /> })(jQuery);<br /> }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;</div>

Ben.robson https://wiki.growth.agency/index.php?title=Shopify&diff=254 2022-05-25T08:33:14Z

<p>Ben.robson: /* Tracking Contact Page */</p> <hr /> <div>= Tag Manager =<br /> <br /> Add Tag Manager to theme:<br /> Modify Theme<br /> &lt;pre&gt;<br /> &quot;online store&quot; -&gt; &quot;...&quot; or &quot;Actions&quot; -&gt; &quot;edit HTML / CSS&quot;<br /> &lt;/pre&gt;<br /> <br /> Modify theme.liquid<br /> <br /> Google Tag Manager will also need to be added to Checkout's additional settings to track conversions<br /> <br /> == Conversion Tracking Code ==<br /> <br /> Google Tag Manager will also need to be added to Checkout's additional settings to track conversions<br /> <br /> In &quot;settings&quot; -&gt; &quot;checkout&quot; -&gt; &quot;additional settings&quot;<br /> <br /> &lt;pre&gt;<br /> {% if first_time_accessed %}<br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'order_id' : '{{ order_number }}', 'order_value' : '{{ total_price | money_without_currency }}', 'event' : 'order-submitted'});<br /> &lt;/script&gt;<br /> {% endif %}<br /> &lt;/pre&gt;<br /> <br /> <br /> *Note: if testing without &quot;{% if first_time_accessed %}&quot; on a order that has already converted, the order ID will not show<br /> <br /> to add product ids add within the code above:<br /> <br /> &lt;pre&gt;<br /> dataLayer.push({ 'product_ids' : [{% for line_item in line_items %}{{ line_item.product_id }}{% unless forloop.last == true %}, {% endunless %}{% endfor %}] });<br /> &lt;/pre&gt;<br /> <br /> <br /> *Note: This was made for dynamic re-marketing, for analytics 4 go to the section below<br /> <br /> === Tracking Contact Page ===<br /> <br /> In the snippets section, go to &quot;form-status.liquid&quot;.<br /> <br /> Find the snippet that shows the success text ( in-between {%- if form.posted_successfully? -%}{%- endif -%} ),<br /> Then add:<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'contact-form-submitted'});<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> = Product Feed =<br /> <br /> The below App is free to use &amp; should do most of the setup for you:&lt;br /&gt;<br /> https://apps.shopify.com/google&lt;br /&gt;<br /> <br /> After installing the App a Google account with access to the Merchant Centre needs to sign in.&lt;br /&gt;<br /> DO NOT sign in using one of our Master email addresses, instead you can either:&lt;br /&gt;<br /> - Ask the client to do this, if they don't have access to Merchant Center we can try to add them.<br /> - Create a new email address that only has access to this Merchant Center &amp; sign in with this instead.<br /> <br /> Then the below needs to be done, in this order otherwise it won't send the products through &amp; you'll have to start from scratch:&lt;br /&gt;<br /> - Make sure the Store requirements are met &amp; confirm these, if they aren't then send this back to the client so they can add whats necessary.<br /> - Under Product Feed, start the setup process.<br /> - Connect the Merchant Centre on the settings tab.<br /> - Specify the Target Market &amp; set the Shipping settings to Manual (These will need to be added to Merchant Center by someone afterwards).<br /> If this has been done correctly then the products should now be available within the Merchant Center account.&lt;br /&gt;&lt;br /&gt;<br /> <br /> Alternatively, Shopify does provide you with the Product feed URL for your store.&lt;br /&gt;<br /> To access this, you will need to append .atom to either all of your collections or to a specific collection URL.&lt;br /&gt;<br /> &lt;br /&gt;<br /> For example:<br /> &lt;br /&gt;<br /> &lt;pre&gt;<br /> &quot;yourstorename.com/collections/all.atom&quot;<br /> &quot;yourstorename.com/collections/collectionname.atom&quot;<br /> &lt;/pre&gt;<br /> <br /> = Events for Analytics 4 =<br /> <br /> View Item: &lt;br /&gt;<br /> Add this to product-template.liquid<br /> <br /> &lt;pre&gt;<br /> <br /> &lt;script&gt;<br /> window.dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: &quot;view_item&quot;,<br /> ecommerce: {<br /> currency: &quot;GBP&quot;,<br /> items: [<br /> {<br /> item_id: {{ product.id }},<br /> item_name: &quot;{{ product.title }}&quot;,<br /> {% if product.vendor %} item_brand: &quot;{{ product.vendor }}&quot;, {% endif %}<br /> price: {{ product.price | money_without_currency }},<br /> {% if product.type %} item_category: &quot;{{ product.type }}&quot;, {% endif %}<br /> google_business_vertical: &quot;retail&quot;,<br /> id: &quot;{{ product.id }}&quot;<br /> }<br /> ]<br /> },<br /> });<br /> &lt;/script&gt;<br /> <br /> &lt;/pre&gt;<br /> <br /> Add To Cart:&lt;br /&gt;<br /> The below listener can be added to GTM, this should send add_to_cart events to GTM for you.<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> jQuery(document).ready(function() {<br /> jQuery( document ).ajaxSuccess(function( event, xhr, settings, data ) {<br /> if (~settings.url.indexOf(&quot;/cart/add&quot;)) { <br /> <br /> var items = [];<br /> items.push({<br /> item_id: data.product_id,<br /> item_name: data.title,<br /> item_category: data.product_type,<br /> price: ( data.price / 100 ),<br /> google_business_vertical: &quot;retail&quot;,<br /> id: data.product_id<br /> });<br /> <br /> if (typeof data.brand != &quot;undefined&quot;) items[0]['item_brand'] = data.brand;<br /> <br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: 'add_to_cart',<br /> ecommerce: {<br /> currency: &quot;GBP&quot;, <br /> items: items<br /> }<br /> });<br /> }<br /> });<br /> });<br /> &lt;/script&gt;<br /> &lt;/pre&gt;<br /> <br /> Purchases:&lt;br /&gt;<br /> Add this to the Settings &gt; Checkout &gt; Additional Scripts section.<br /> <br /> &lt;pre&gt;<br /> {% if first_time_accessed %}<br /> &lt;script&gt;<br /> var items = [];<br /> var temp = {};<br /> <br /> {% for line_item in line_items %}<br /> temp = {<br /> item_id: {{ line_item.product.id }},<br /> item_name: &quot;{{ line_item.title }}&quot;,<br /> price: {{ line_item.final_line_price | money_without_currency }},<br /> google_business_vertical: &quot;retail&quot;,<br /> id: {{ line_item.product.id }},<br /> quantity: {{ line_item.quantity }}<br /> <br /> };<br /> <br /> {% if line_item.product.type %} <br /> temp['item_category'] = &quot;{{ line_item.product.type }}&quot;;<br /> {% endif %}<br /> <br /> {% if line_item.product.vendor %} <br /> temp['item_brand'] = &quot;{{ line_item.product.vendor }}&quot;;<br /> {% endif %}<br /> <br /> items.push(temp);<br /> <br /> {% endfor %}<br /> <br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({<br /> event: 'purchase',<br /> ecommerce: {<br /> affiliation: 'Online Store',<br /> transaction_id: '{{ order_number }}',<br /> value: '{{ total_price | money_without_currency }}',<br /> tax: '{{ tax_price | money_without_currency }}',<br /> shipping: '{{ shipping_price | money_without_currency}}',<br /> currency: &quot;GBP&quot;, <br /> items: items<br /> }<br /> });<br /> <br /> <br /> &lt;/script&gt;<br /> {% endif %}<br /> &lt;/pre&gt;<br /> <br /> The Event Tag &amp; Variables can be setup with the below template:&lt;br /&gt;<br /> [[File:Shopify-ga4-container-elements.json]]<br /> <br /> = Shopify Links =<br /> Cheat sheet for Variables: &lt;br /&gt;<br /> https://www.shopify.co.uk/partners/shopify-cheat-sheet</div>

Ben.robson https://wiki.growth.agency/index.php?title=Jivo&diff=253 2022-05-03T15:11:35Z

<p>Ben.robson: /* Tracking In Tag Manager */</p> <hr /> <div>== Tracking In Tag Manager ==<br /> <br /> Jivohas an API for tracking.<br /> <br /> https://www.jivochat.com/api/<br /> <br /> To use this, create a custom HTML tag In tag manager and trigger it on any pages the Jivochat runs on.<br /> <br /> Add this script to the custom HTML:<br /> <br /> &lt;pre&gt;<br /> &lt;script&gt;<br /> function jivoDataLayerEvent( eventName ) {<br /> var dataLayer = window.dataLayer || [];<br /> dataLayer.push({'event' : 'jivo-' + eventName});<br /> }<br /> function jivo_onOpen() { jivoDataLayerEvent( 'chat-opened' ); }<br /> function jivo_onMessageSent() { jivoDataLayerEvent( 'message-sent' ); }<br /> function jivo_onIntroduction() { jivoDataLayerEvent( 'contact-sent' ); }<br /> &lt;/script&gt;<br /> &lt;/pre&gt;</div>

Ben.robson