Español

ASM Cookie Consent Advice aims to offer a simple, open source and free solution to the obligation on the part of the webmaster to notify and offer cookie management on their websites .

The problem

In recent years (starting with the new data protection law of 2108) we have seen how the warning messages of cookies on the webs went from a simple warning to offering complex self-configuration systems. I started looking for a solution for my websites, but I did not find any free open source script that would perform that function. All the scripts or solutions that were capable of managing (not just warning) the configuration of cookies offered a free version (up to a certain number of visits) and later became paid. In addition to not being completely free, they were very intrusive and inefficient. Intrusivebecause you have to let them track the code of the web to protect every certain period of time, information that I suppose later they check with their databases. Inefficient because they deactivated all the scripts capable of inserting the cookies not allowed by the user, that is, if you did not accept the cookies, almost nothing would work. I also verified that they were not 100% effective and cookies were not deleted. The problem is aggravated given the large number of webmasters without the necessary knowledge to be able to manage this obligation. Many of them don't even know what a cookie is.

Many of the webmasters who have to put a warning / cookie manager do not even know what a cookie is.

I believe that it is a necessity that the browser should manage (Safari and Firefox already do it) and it seems that Google announces that by the end of 2021 it will also eliminate third-party cookies ( Cookieless ). Therefore, it is likely that this need to notify and offer cookie management may be temporary.

The Objetive

After observing the problem, I set my goal:

To develop a universal, efficient, non-intrusive script that would help me integrate this functionality into my web pages, and if it was successful and a little time, release it as open source and free.

    The solution

    The solution that I have managed to develop is called ASM Cookie Consent Advice , a free , open source script , developed in native ,  non-intrusive and efficient javascript , integrated with Google Consent Mode and that offers a solution to those web developers who have a commitment with the adequacy of its code to the user privacy protection regulations.

    Main features:

    • Made in native javascript, independent and compatible with other libraries used on each website. 
    • Of open source (GNU 3.0) and free .
    • Compatible and integrated with Google Consent Mode (perfect to make the use of Google Analytics or Google ads compatible).
      Thanks to Google Consent Mode we will be able to record visit data even if they only accept the necessary cookies.
    • Three levels of acceptance of cookies:
      • (1) Only the necessary ones (session or technical cookies, necessary for the operation of the web).
      • (2) Statistics cookies are accepted .
      • (3) All cookies are accepted .
    • Clean and non-intrusive code .
    • Compatible with all screen formats (obvious).
    • Cookie acceptance status notice .
    • Minimized version for mobiles and previously accepted cookies .
    • Launcher via HTML link.
    • It allows the management of multi-language websites .

    Programmer comments:

    • It is a solution aimed at developers : although it is easy to install and configure, it is aimed at developers or administrators with minimal programming knowledge. One of the objectives is to take control of cookies and take care of the user, not complying with the file by activating a plugin. If you do not know anything about HTML, javascript or you do not know how to differentiate a session cookie from a third party one, this may not be your solution.
    • By integrating Google Consent Mode we can collect minimum statistics via Google Analytics even if only the necessary cookies are accepted or nothing is accepted.
      This is thanks to this Google method, it allows us to collect visits but not sessions, or bounce percentages, etc ... (WOW!)
    • The script is in beta , foreseeably new versions will be generated, but I have no commitment or obligation to do so, that is why it is available as open source and free.
    • The three levels seek to be able to manage cookies by interests (necessary, statistical and all) but above all not to confuse or make the user dizzy.
    • Be careful, it is possible that there are already other open source and free solutions that have been developed while I was doing mine ... I don't know.

    Installation and configuration:

    To download ASM Cookie Consent Advice you can do it from GitHub:

    Download on GitHub

    The installation:

    1. Add the Google Tag Manager script and the two ASM scripts to the header of the web:
      <script async src="https://www.googletagmanager.com/gtag/js?id=xxxx"></script>
      <script src="/your-folder-installation/asm_config.js"></script>  
      <script src="/your-folder-installation/asm_content.js"></script>
    2. Edit the asm_config.js file and set the asmconfig variable:
      var asmconfig = {
                gaid : 'xxx',
                  ad_not_acepted : 'Estado: <strong>Aceptas</strong> las cookies necesarias.',
                  ad_acepted : 'Estado: <strong>Has aceptado</strong> todas las cookies.',
                  ad_acepted_stats : 'Estado: <strong>Has aceptado</strong> las cookies necesarias y de estadísticas.',
                  aviso : '<p>Este sitio ultiliza cookies necesarias, y otras que se usan para funciones avanzadas, estadísticas o acciones de marketing.</p><p>Puedes aceptarlas todas o configurar su uso:</p>',
                  aviso2 : 'Pincha <a href="/cookies" class="asm-more-info">aquí</a> para saber más.',
                  pie : '<div class="pieadvice"><a href="https://algosemueve.es/asm-cookie-consent" class="asmlink" target="_blank">ASM Cookie Consent</a></div>',    
                  taceptar1 : 'Aceptar solo necesarias',
                  taceptar2 : 'Aceptar estadísticas',
                  taceptar3 : 'Aceptar todas',
                  tconfig: 'Configurar'
              }

       In the asm_config variable , texts, links and the Google Tag id are configured.

    3. To configure the language in asm_config.js we can choose a single asm_config variable or a variable for each language.

      For example, in this case if the user's language is es-ES we show the data in Spanish and if we don't do it in English:
          var lng = window.navigator.userLanguage || window.navigator.language;
       
          if(lng=='es-ES') {
              
              var asmconfig = {
                  gaid : 'xxxx',
                  ad_not_acepted : 'Estado: <strong>Aceptas</strong> las cookies necesarias.',
                  ad_acepted : 'Estado: <strong>Has aceptado</strong> todas las cookies.',
                  ad_acepted_stats : 'Estado: <strong>Has aceptado</strong> las cookies necesarias y de estadísticas.',
                  aviso : '<p>Este sitio ultiliza cookies necesarias, y otras que se usan para funciones avanzadas, estadísticas o acciones de marketing.</p><p>Puedes aceptarlas todas o configurar su uso:</p>',
                  aviso2 : 'Pincha <a href="/cookies" class="asm-more-info">aquí</a> para saber más.',
                  pie : '<div class="pieadvice"><a href="https://algosemueve.es/asm-cookie-consent" class="asmlink" target="_blank">ASM Cookie Consent</a></div>',    
                  taceptar1 : 'Aceptar solo necesarias',
                  taceptar2 : 'Aceptar estadísticas',
                  taceptar3 : 'Aceptar todas',
                  tconfig: 'Configurar'
              }                
              
          } else {
              
              var asmconfig = {
                  gaid : 'xxxx',
                  ad_not_acepted : 'State: <strong>You have accepted</strong> the necessary cookies.',
                  ad_acepted : 'State: <strong>You have accepted</strong> all cookies.',
                  ad_acepted_stats : 'State: <strong>Has aceptado</strong> the necessary and statistics cookies.',
                  aviso : '<p>This site uses necessary cookies, and others that are used for advanced functions, statistics or marketing actions.</p><p>You can accept them all or configure their use:</p>',
                  aviso2 : 'Click <a href="/en/cookies" class="asm-more-info">here</a> for more info.',
                  pie : '<div class="pieadvice"><a href="https://algosemueve.es/en/asm-cookie-consent" class="asmlink" target="_blank">ASM Cookie Consent</a></div>',
                  taceptar1 : 'Accept only necesary',
                  taceptar2 : 'accept stats',
                  taceptar3 : 'Accept all',
                  tconfig: 'Config'
              }    

          }
      Keep in mind that the above is for the language that the user has configured in the client (their browser or operating system).
      If we want to offer a different message for the different versions depending on the language that the user chooses on the site, we have to find another solution via server programming . For example we can load a different file depending on the language chosen by the user, mix PHP + javascript, etc ...

    4. We proceed to the configuration of the scripts that will be executed when the user accepts all cookies (level 3).
      It is at this point where you may need some programming knowledge, and the consequences of activating or deactivating a certain code, both at the level of cookies and at the level of functionality.

      We must know which codes are incompatible with the non-acceptance of "all cookies" so as not to execute them until the user accepts them.
      We must also be aware that certain functionalities (those that use third-party cookies, or non-necessary own cookies) will stop working until all cookies are accepted. 

      We have two ways to disable scripts and enable them by "accepting all cookies":

      The first
      is to replace the type = "text / javascript" property with "text / plain" in both script links and code snippets:
      <script type="text/plain" src="/xxxx.js"></script>

      <script type="text/plain" > alert('hola');</script>    
      The idea is none other than to prevent the scripts from being executed, once the user accepts the cookies, all the scripts with type = "text / plain" will be activated one by one.

      If we want one of those scripts not to run until another does, we must add the dataset data-main and data-child to relate them:
      <script type="text/plain" src="/xxxx.js" data-child="nombre"></script>

      <script type="text/plain"  data-main="nombre"> alert('hola');</script>   

      This way the alert ('hello') will only be executed when /xxxx.js has finished loading.

      The second way is to enter your own code in asm_content.js :
      if(modo==2) {
                          
                      //HERE YOU CAN ENTER YOUR OWN SCRIPTS
                      //loadjs('/media/aceptar.js');            
                      /* insert code here */
                      /* end code */

                      var scripts = document.getElementsByTagName('script');            
                      for (var i = 0; i < scripts.length; i++) {
                          if(scripts[i].type == 'text/plain' && !scripts[i].dataset.main) {    
                              if (scripts[i].src) loadjs(scripts[i].src, scripts[i].dataset.child);                
                              else eval(scripts[i].innerHTML);
                          }
                      }

                  }

      When the user accepts "all cookies" is when the == 2 mode comes into action and that is where we can insert our code.

    5. Window design configuration: for the moment, CSS knowledge will be needed, since until the next version we can extract the design variables to the configuration file, the css are inside the asm_content.js file:
          //css
          document.write('<style>div#cookie_button {z-index: 999999999;position: fixed; bottom: 0; right:0; color: #fff;transition: all 2s ease-in;}.aviso.hidden{opacity:0; visibility:hidden; transition: all 1s ease-in;}.aviso {z-index: 999999999;visibility: visible;opacity: 1;position: fixed;;bottom: 0;right: 0;width: 100%;max-width: 100%;background-color: #fff;color: #000;PADDING: 50px;transition: opacity 1s;font-size: 16px;font-family: Arial;line-height: 20px;text-align: center;}.aviso p {margin: 0;margin-bottom: 10px;}.asm-button {padding: 10px;margin: 7px;border: 0;font-size: 15px;cursor: pointer; background-color: #fff;}a.asm-more-info {color: #fff;}svg#Capa_1 {width: 40px;height: 40px;fill: #ca7c1b;position: relative;top: 8px;left: 8px;}button#cookie_button_b {background-color: transparent;margin: 0;padding: 20px;border-radius: 140px 0 0;}button#acepta,button#acepta1, button#acepta2 {background-color: darkcyan;color: #fff;font-size: 16px;} svg#config{position: relative;top: 5px;margin-right: 3px;margin-top: -11px;fill: #333;}button#rechaza {background-color: #ccc;font-size: 16px;color: #333;}a.asm-more-info {color: #008b8b;font-weight: 700;text-decoration: underline;}div#asm_state {margin-top: 20px;margin-bottom: 10px;}.pieadvice {position: absolute;bottom: 10px;right: 10px;font-size: 12px;padding: 2px;color: #666;}button#acepta2, button#acepta1 {background-color: #757c7c;}svg#closeams {position: absolute;top: 20px;right: 20px;cursor: pointer;}</style>');
      Also I am aware that document.write is not the most elegant way to add CSS via javascript, it will be changed later.

    6. We can launch the window at any time (for example from the cookie policy section) by calling the function onclick = " show_popup (); " from any HTML element that allows it, for example a link:
      <a href="javascript:void();" onclick="show_popup();">Muestra el aviso</a>
      And this would be the result: Show the notice (demo)

    Farewell
    Well, for now, nothing more, I hope the script will help you like me, and if you want to contact me you have me at:

    If you want to help me
    Oh, and finally, if you want to help me continue developing free and open software, you can
    buy me a beer :) It would be really cool if:
    Donate a beer

     

    This site uses third-party cookies to measure and improve your experience.
    You decide whether to accept or reject them:
    More info