Where do I find it?
Sales channel > Webshop > Edit > Attributes
After that, click on the Branding And Social tab at the bottom:
Then, scroll down and you will find the Google Analytics and Google Tag Manager settings:
What does it mean?
In this article, we will explain how to configure your Google Tag Manager account to track and analyze your Palisis webshop events.
What should I do?
Before we start please make sure, you follow all the steps on the initial setup for our Google Tag Manager Integration as it is a requirement to proceed with this guide here. If not please head over to support article and complete these steps first.
Please note that to follow this guide basic knowledge on how to use Google Analytics and Google Tag Manager is needed.
In the following article the terms “parent frame” and “child frame” will be used.
- Parent Frame: This refers to the main webpage that contains one or more iframes. It's like the main window of the webpage.
- Child Frame: A child frame is an iframe embedded within the parent frame. It's like a smaller window inside the parent frame where external content, such as another webpage or widget, is displayed.
Introduction
What we're going to do is integrate a separate Google Tag into the Palisis Webshop and add a custom script to the Google Tag in the parent and child frames so that these two tags can communicate with each other and we can send the tracking events from the child to the parent and from the parent to the Google Tag Manager, which is linked to Google Analytics.
In the end, you will need to have two separate containers in Google Tag Manager: one for the parent and another for the child, which corresponds to the Palisis webshop URL.
Part 1 - Add custom HTML script to the parent Google Tag
Step 1: Go to the Google Tag of your parent frame
Step 2: Add a new Tag
Step 3: Tag Configuration is “Custom HTML”
Step 4: Copy and paste the parent custom HTML code from below into the code field
Step 5: Replace the “var childorigin ” URL with the actual URL of your Palisis Webshop.
Step 6: Triggering select “Page Views”
Step 7: Submit and Publish the changes in the Google Tag Workspace
Step 8: After you successfully publish the Google Tag, we have finished part 1
Video on how to Add the custom HTML script to the parent Google Tag
Custom HTML code to integrate in the Google Tag of the parent webpage
Please replace the url in “ var childOrigin = 'https://myshop.palisis.com';" with the actual URL of your palisis webshop.
<script> (function() { // set the iframe domain name (e.g https://domainname.com) var childOrigin = 'https://myshop.palisis.com'; // Creating current timestamp just for console log var date = new Date(); var day = date.getDate(); var month = date.getMonth() + 1; var year = date.getFullYear(); var time = date.getTime(); var currentDate = day + '-' + month + '-' + year + '-' + time; console.log("Parent Frame: Loaded - " + currentDate); // Maximum time in milliseconds to wait for GA tracker to load. // Again, irrelevant for GA4. var maxGATime = 20000; // Don't touch anything that follows var pollInterval = 2000; //console.log('Parent Frame: child origin ' + childOrigin); var postCallback = function(event) { console.log("(parent) Child Origin: " + event.origin); // event origin doesn't match with childOrigin then do nothing if (event.origin !== childOrigin) return; console.log('Parent frame: (recieve) data: ' + event.data); if (event.data !== 'childReady' && !event.data.event) return; if (event.data === 'childReady') { console.log('Parent frame: sending parentReady to child'); // Send event that parent is ready event.source.postMessage('parentReady', event.origin); var pollCallback = function() { // Stop polling if maxTime reached maxGATime -= pollInterval; if (maxGATime <= 0) window.clearInterval(poll); // Only proceed if GA loaded and tracker accessible var cookie = {}; window.document.cookie.split(';').forEach(function(el) { var splitCookie = el.split('='); var key = splitCookie[0].trim(); var value = splitCookie[1]; cookie[key] = value; }); console.log("Parent frame: Client ID - " + cookie["_ga"].substring(6)); var ga_client_id = cookie["_ga"].substring(6); if (ga_client_id) { // Send message back to frame with Client ID event.source.postMessage({ event: 'clientId', clientId: ga_client_id }, event.origin); // Stop polling if not already done so window.clearInterval(poll); } }; // Start polling for Google Analytics tracker var poll = window.setInterval(pollCallback, pollInterval) } // Push dataLayer message from iframe to dataLayer of parent if (event.data.event) { console.log("Parent frame: dataLayer from iframe: " + event.data.event); window.dataLayer.push(event.data); } }; // Start listening for messages from child frame window.addEventListener('message', postCallback); })(); </script>
Part 2- Add custom HTML script to the child Google Tag
You must know how to add custom GA4 Events in Google Tag Manager. If you are unsure or don’t know it anymore please head over to the initial Google Tag Manager Integration support article.
Step 1: Create a new Google Tag for your child, or if you already have a separate one for the child, switch over to it.
Step 2: Please add all the custom GA4 Events “add_to_cart,” “purchase,” “remove_from_cart,” “begin_checkout,” and “add_payment_info.” Once done, please continue with step 3. If you don’t know how to add these GA4 Events, please head over to the initial Google Tag Manager Integration support article.
Step 3: Add a new Tag
Step 4: Tag Configuration is “Custom HTML”
Step 5: Copy and paste the child custom HTML code from below into the code field
Step 6: Replace the “var parentOrigin ” URL with the actual URL of your parent domain
Step 7: To trigger, select “Page Views” and all the custom events you like to track, such as “purchase” or “add_to_cart.”
Step 8: Submit and Publish the changes in the Google Tag Workspace
Step 9: Log in to your Palisis Backoffice, head over Sales Channels → Online → Webshop, and select your webshop. Click on “edit,” go to “Branding And Social,” scroll down to “Google Tag Manager ID,” enter the GTM-XXXXXX code from the child Google Tag, activate “Google Analytics Ecommerce,” and click on “save.”
Step 10: After you successfully publish the Google Tag, we are finished with part 2
Screenshot where you have to enter the GTM-XXXXXX code in the Palisis webshop configuration
Video on how to add the custom html script to the child Google Tag
Custom HTML code will be integrated into the Google Tag of the child's web page
Please replace the url in “var parentOrigin = 'https://mywebsite.com';“ with the actual domain of your website. Important it has to be the domain and not the specific page where the Palisis Webshop is embedded.
<script type="text/javascript"> (function() { // If not in iframe, do nothing try { console.log("First Call"); if (window.top === window.self){ console.log("Self Call"); return; } } catch(e) {} var date = new Date(); var day = date.getDate(); var month = date.getMonth() + 1; var year = date.getFullYear(); var time = date.getTime(); // This arrangement can be altered based on how we want the date's format to appear. var currentDate = day + '-' + month + '-' + year + '-' + time; console.log('iframe is started loading: ' + currentDate); // Set to false to prevent dataLayer messages from being sent to parent var sendDataLayerMessages = true; // Set the prefix that will be used in the event name, and under which all // the dataLayer properties will be embedded var dataLayerMessagePrefix = 'iframe'; // Set to parent origin ("https://www.domain.com") var parentOrigin = 'https://mywebsite.com'; // Maximum time in milliseconds to poll the parent frame for ready signal var maxTime = 30000; // Don't touch anything that follows var pollInterval = 1000;//200; var parentReady = false; var postCallback = function(event) { console.log("(iframe) origin: " + event.origin); if (event.origin !== parentOrigin) return; console.log("(iframe) Data: (recieve) from " + event.origin); console.log("(iframe) frame: (recieve) event : " + event.data.event); console.log("(iframe) frame: (clientId): " + event.data.clientId); if (event.data.event !== 'clientId' && event.data !== 'parentReady') return; if (event.data.event === 'clientId') { window.dataLayer.push({ event: 'clientId', clientId: event.data.clientId }); } if (event.data === 'parentReady' && !parentReady) { window.clearInterval(poll); if (sendDataLayerMessages) startDataLayerMessageCollection(); parentReady = true; } }; var pollCallback = function() { // If maximum time is reached, stop polling maxTime -= pollInterval; if (maxTime <= 0) window.clearInterval(poll); // Send message to parent that iframe is ready to retrieve Client ID console.log("Child frame: (sent) 'childReady' message"); window.top.postMessage('childReady', parentOrigin); }; var createMessage = function(obj) { if (!Array.isArray(obj) && typeof obj === 'object') { var flattenObj = JSON.parse(JSON.stringify(obj)); var message = {}; // Add metadata about the page into the message message[dataLayerMessagePrefix] = { pageData: { url: document.location.href, title: document.title } }; for (var prop in flattenObj) { //console.log("Prop: " + prop + ': ' + flattenObj[prop]); if (flattenObj.hasOwnProperty(prop) && prop !== 'gtm.uniqueEventId') { if (prop === 'event') { message.event = dataLayerMessagePrefix + '.' + flattenObj[prop]; } else { message[dataLayerMessagePrefix][prop] = flattenObj[prop]; } } } if (!message.event) message.event = dataLayerMessagePrefix + '.Message'; return message; } return false; }; var startDataLayerMessageCollection = function() { // Send the current dataLayer content to top frame, flatten the object window.dataLayer.forEach(function(obj) { // console.log('dataLayer: ' + obj); var message = createMessage(obj); if (message) window.top.postMessage(message, parentOrigin); }); // Create the push listener for future messages var oldPush = window.dataLayer.push; window.dataLayer.push = function() { var states = [].slice.call(arguments, 0); states.forEach(function(arg) { var message = createMessage(arg); if (message) window.top.postMessage(message, parentOrigin); }); return oldPush.apply(window.dataLayer, states); }; }; // Start polling the parent page with "childReady" message var poll = window.setInterval(pollCallback, pollInterval); // Start listening for messages from the parent page window.addEventListener('message', postCallback); })(); </script>
Part 3 - Add custom GA4 events to the parent Google Tag
You must know how to add custom GA4 Events in Google Tag Manager. If you are unsure or don’t know it anymore please head over to the initial Google Tag Manager Integration support article.
It is important that in the parent Google Tag is an GA4 Configuration Google Tag which contains the measurement ID of your Google Analytics Account where you like to collect the tracking data.
Adding User-Defined Variable
Step 1: Navigate in the workspace section of the Google Tag Manager to “Variables” and there to “User-Defined Variables”.
Step 2: We will now add 3 User-Defined Variables; iframeCurrency, iframeValue, and iframeItems. Let’s start with iframeCurrency.
Step 3: Click on “new”
Step 4: “Variable Configuration” is “Data Layer Variable”
Step 5: In the Data Layer Variable Name, enter “iframe.2.currency”, and the Data Layer Version is “Version 2”
Step 6: Click on save and save it under the name “iframeCurrency”. Next is iframeValue.
Step 7: Click on “new”
Step 8: “Variable Configuration” is “Data Layer Variable”
Step 9: In the Data Layer Variable Name, enter “iframe.2.value” and the Data Layer Version is “Version 2”
Step 10: Click on save and save it under the name “iframeValue”. Next is iframeItems.
Step 11: Click on “new”
Step 12: “Variable Configuration” is “Data Layer Variable”
Step 13: In Data Layer Variable Name, enter “iframe.2.items” and the Data Layer Version is “Version 2”
Step 14: Click on save and save it under the name “iframeItems”. We are done in this section, so you can head over to the next one.
Video on how to add the User-Defined Variable iframeCurrency
Adding User-Defined Variables for custom tracking events
Similar to the step before, we have to create a user-defined variable for all custom tracking events. That means for add_to_cart, remove_from_cart, begin_checkout, purchase, and add_payment_info, or at least for the events you like to track. I will show it using the purchase event as an example; the process must then be repeated for all other events you like to track.
Step 1: Navigate in the workspace section of the Google Tag Manager to “Variables” and there to “User-Defined Variables”.
Step 2: Click on “new”
Step 3: “Variable Configuration” is “Data Layer Variable”
Step 4: In the Data Layer Variable Name, enter “iframe.1” and the Data Layer Version is “Version 2”
Step 5: Click on save and save it under the name “iframePurchaseEvent”.
Step 6: Repeat steps 2 to 5 for all the other events you want to track. Just adapt the naming.
Step 7: You can head to the next section if you have added all custom tracking events.
Video on how to add the User-Defined Variable for custom tracking event purchase
Adding custom iframe GA4 Events to the parent Tag
Now that all the preparation work is done, we can start adding the custom iframe events. This is the last section before we can start testing the setup.
Step 1: Navigate to Tags in the workspace section.
Step 2: Click on “New”
Step 3: Tag Configuration is “Google Analytics: GA4 Event”
Step 4: Paste in your “Measurement ID” from Google Analytics.
Step 5: Event Name is “iframe.Message”
Step 6: For event parameters, enter the following:
|
Event Parameter |
Value |
|---|---|
|
items |
{{iframeItems}} |
|
currency |
{{iframeCurrency}} |
|
value |
{{iframeValue}} |
Step 7: Click on Triggering and the “+” in the upper right corner.
Step 8: Click on Trigger Configuration and select “Custom Event”
Step 9: The event name is “iframe.Message”
Step 10: Select “This Trigger fires on Some Custom Events”
Step 11: In the event dropdown, select the corresponding event you like to set up, for example, “iframePurchaseEvent”. Continue with setting the second dropdown to “equals” and write in the third field name of the custom event, In the example of the Purchase Event this would be “purchase”. In the example of Purchase, you should have the following: “iframePurchaseEvent - equals - purchase”
Step 12: Click on Save and name the event trigger (event name). In the purchase event example, this would be a “purchase event trigger.”
Step 13: Click on save and name the trigger iFrame - (custom event name). In the example of the purchase event, this would be “iFrame - Purchase”.
Step 14: Repeat steps 2 to 13 for every custom GA 4 event you like to track. We support “add_to_cart,” “purchase,” “remove_from_cart,” “begin_checkout,” and “add_payment_info.”
Step 15: If you have added all the events you can head over to part 4 of the testing.
Video on how to add the custom iframe purchase GA4 Event to the parent Tag
Part 4 - Test if you have set it up correctly
If you have followed all the steps above, we can test if the setup works correctly.
Step 1: Make sure the child Tag is published without any error.
Step 2: Ensure you added the child Tag GTM-XXXXXX code to the Palisis webshop configuration.
Step 3: Go to the parent tag and click on “Preview”
Step 4: A Pop-up opens where you have to enter the URL of your domain and then click connect.
Step 5: If it works, you should see events on the left with the prefix “iframe.” This indicates that we receive the events from the child tag and send them to the parent tag.
Step 6: You are good to go and can publish the parent tag. If not, please check to see if you have followed the steps.