Custom Data Layer Configuration in CookieYes
Last updated on September 30, 2024
Overview
A dataLayer is a JavaScript object that stores and sends information from your website to the Tag Management system. CookieYes provides flexibility for websites to customize the name of their dataLayer, enabling seamless integration with Google Tag Manager (GTM) and other analytics setups without modifying the current dataLayer structure. If your website uses a custom dataLayer name, CookieYes allows easy configuration to recognize and use that name. This ensures that your existing dataLayer setup remains intact and operational without causing conflicts.
Default Behavior in CookieYes
CookieYes interacts with the default dataLayer name, dataLayer
. This is a common naming convention, especially for sites using GTM. If no configuration is provided, CookieYes will assume the dataLayer is named dataLayer
and proceed with operations accordingly.
How to Configure the Custom Data Layer Name
To configure CookieYes to recognize a custom dataLayer name, follow these steps:
Step 1: Identify your custom dataLayer name
If your website is using a specific name for its dataLayer (e.g., mySiteDataLayer), you’ll need to apply that name in the CookieYes configuration.
Step 2: Insert the custom script before the CookieYes script
To use the custom name mySiteDataLayer
for the dataLayer, add the following script in your website’s header before the CookieYes script. This ensures that CookieYes will load and interact with the correct dataLayer.
<script> window.ckySettings = { dataLayerName: 'mySiteDataLayer' // Replace 'mySiteDataLayer' with your your website’s custom dataLayer name. }; </script>
Step 3: Ensure the Google Tag Manager script is also configured with the same custom dataLayer name.
Ensure your GTM setup aligns with your custom dataLayer name. This guarantees both CookieYes and GTM interact with the same dataLayer.
Example Implementation
Here’s a complete example of how to implement a custom dataLayer name with CookieYes:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Custom Data Layer Example</title> <!-- Custom Data Layer Configuration --> <script> window.ckySettings = { dataLayerName: 'mySiteDataLayer' }; </script> <!-- CookieYes Script --> <!-- Start cookieyes banner --> <script id="cookieyes" type="text/javascript" src="https://cdn-cookieyes.com/client_data/XXXXXXXXXXXXXXX/script.js"></script> <!-- End cookieyes banner --> <!-- Google Tag Manager --> <script> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','mySiteDataLayer','GTM-XXXXXXX'); </script> <!-- End Google Tag Manager --> </head> <body> <!-- Your website content here --> </body> </html>
In this example:
- We set the custom data layer name to ‘mySiteDataLayer’.
- The CookieYes script is loaded after the custom configuration.
- The Google Tag Manager script is also configured to use the custom dataLayer name.
Conclusion
By configuring the custom dataLayer name, you ensure that CookieYes integrates smoothly with your existing tracking setup without requiring disruptive changes.