Elementor Cookie Consent Popup Widget
Create and style you own GDPR/AVG Compliant Cookie Consent Popup and integrate the settings with Google Tag Manager.
Are you using cookies who need consent from your users? With this widget you can create and style a GDPR/AVG Compliant Cookie Consent Popup inside Elementor and integrate the settings with Google Tag Manager. Inside the popup a visitor can set his/her cookie preferences. These preferences can be passed through GTM so you can load cookie scripts based on these settings.
Standard Features for the Cookie Consent Popup widget
- Integration with Google Tag Manager
- Easy control of popup text
- Support for Functional, Analytical and Advertisement Cookies
- Various Styling Options
- Hidding popup on selected pages
- Support for display popup button
- Automatic hidding popup after accepting cookie settings
- Simple and easy cookie selection for users
- Popup horizontal orientation positioning below
Premium Features for the Cookie Consent Popup widget
- Vertical and Horizontal orientation
- Background layer
- Top, Below and Centered positioning of the popup
Installation and Configuration
After you activated this plugin you can add the cookie consent popup widget to your pages. If you want to show the popup on all pages, just add the popup to the footer section of your site and configure the widget there. Once configured and styled you’ll see the popup appear on each page.
Once the user clicks on the accept button, a (functional) cookie will be set containing the cookie settings the use agreed upon. If this cookie is set the popup won’t be shown anymore.
Adding a popup button
This widget also support the ability the change the cookie settings afterwards. Just a button with the id cookieconsentdisplaybutton to your page. Once clicked the popup will appear and the user can adjust the settings.
Integration with Google Tag Manager
For the integration with Google Tag Manager of other scripts the cookies settings are scripted to the window.datalayer array. See below. The values inside this datalayer are then picked up by the GTM-scripts.
<script type='text/javascript' id='missingwidgets-js-before'>
<!-- Missing Widget code for GTM -->
//<![CDATA[
window.dataLayer = window.dataLayer ? window.dataLayer : [];
let layer = {};layer["functionalCookies"] = 0;layer["analyticalCookies"] = 0;layer["advertisementCookies"] = 0;window.dataLayer.push(layer);//]]><!-- Missing Widget code for GTM -->
</script>
Once you’ve added the Google Tag Manager code inside your website header, you can use these datalayer input inside Google Tag Manager to load certain scripts based on the user preferences. You can check if it works by using the Google Tag Manager Preview functionality inside Google Tag Manager.If you’ll see the settings appear inside the preview you can proceed to set the tag, triggers and variables inside GTM.
NOTE: Make sure you have disabled all adblockers inside your browser before you go to test your website.
1. Adding Data Layer Variable
To use the settings inside GTM, first you’ll need to add 3 Data Layer Variables; for functionalCookies, analyticalCookies and advertisementCookies. Be sure to set your default value to either 0 (not set) or 1 (set).
2. Adding the Triggers
For each created Data Layer Variable you can create a GTM trigger. If the value of this Data Layer Variable equals to 1 then the trigger will be fired by GTM.
3. Adding the tags
Now that you’ve created the trigger you can attached them to the various scripts you’ve defined inside GTM. In this case the Google Analytics Script can only be fired if the conditions of the analytics cookies trigger are met. If they are not met the script won’t be loaded inside you website by Google Tag Manager.
4. Test to see it's working
Once you’ve configured the tags inside GTM, test it again and if the tag is fired you’ve succesfully integrated the cookie consent popup with GTM.
Why do i need the Elementor Cookie Consent Popup widget?
Integration with Google Tag Manager
This widget is able to send the cookie preferences of a user to Google Tag Manager (GTM) so you can manage the loading of the various scripts inside GTM bases on the user personal settings.
No coding required
Simply Drag and Drop the widget inside your footer template, configure the widget and Google Tag Manager and your site is AVG/GDPR ready.
Make your website AVG/GDPR proof
This widget gives your users control which data they want to share with your website.
