CookieFirst API

Nachtfalke

Hallo, ich glaube ich bin zu doof und blöde.
Gibt es ein Tutorial zum CookieFirst API ? Ich blicke da nicht durch. Wo mus was hin…?

Registrieren auf https://cookiefirst.com/de ist klar.

Moin,

ja - das ist teilweise ziemlich schwierig. Manche Sachen werden automatisch gesperrt - andere nicht. Da muss man ganz genau gucken.

Ein Tutorial habe ich nicht geschrieben.

Übrigens am 26.06.2023 (verschoben auf den 03.07.2023) wird "CookieFirst" ein Update des Cookie-Banners fahren - ich weiß noch nicht, inwieweit das für uns relevant sein wird. Ich glaube das Symbol wird dann auch kleiner.

Die Verlinkung zur API (hier meine ID geändert) sieht ungefähr so aus und muss als erstes Skript im <head> von Mobirise stehen.

Aufruf von "CookieFirst" im <head>:

Code: Alles auswählen

<script src="https://consent.cookiefirst.com/sites/mobirise-tutorials.com-f6a24dff-9a11-3ac8-bd8d-a158db844677/consent.js"></script>

Ich weiß ja nicht, was Du nun schützen willst - hier mal meine verwendeten Skripte, die dann zum Beispiel "YouTube" vor der Zustimmung nicht anzeigen oder auch einen Iframe. Man kann sich dort auf HTML-Tags oder auch auf IDs oder z.B. auch auf CSS-Klassen beziehen - oder diese Dinge auch kombinieren.

Das Skript ist immer gleich nur ändert sich der Bezug in dieser Zeile - hier als Beispiel ein iframe:

var elements = document.querySelectorAll("iframe");

... was zum Beispiel bei Google-Maps verwendet wird.

Das JavaScript gehört dann direct unter den Link zur API von "CookieFirst"

Code: Alles auswählen

YouTube Hintergrund-Video nach ID:

  <!-- Start hide or show div based on advertising - here YouTube video -->
  <script>
        function handle_consent_event(e) {
            var consent = e.detail || { necessary: true };
            var elements = document.querySelectorAll("#video1-a");
            elements.forEach(function(el) {
                // no consent yet or advertising not accepted, hide div
                if (!consent || !consent.advertising) {
                    el.style.display = 'none';
                    var btn = document.createElement('button');
                    btn.innerHTML = 'Bitte akzeptieren Sie Werbung Cookies, um diesen Inhalt zu sehen';
                    var click = function() { CookieFirst.acceptCategory('advertising');window.location.reload(); };
                    btn.addEventListener('click', click);
                    el.before(btn);
                    var src = el.getAttribute('src');
                    el.setAttribute('data-src', src);
                    el.setAttribute('src', '');
                } else {
                    el.style.display = 'block';
                    var src = el.getAttribute('data-src');
                    if(src) {
                        el.setAttribute('src', src);
                        el.setAttribute('data-src', '');
                    }
                }
            });
        }
        window.addEventListener("cf_consent", handle_consent_event);
        window.addEventListener("cf_consent_loaded", handle_consent_event);
  </script>
  <!-- End hide or show div based on advertising -->



Aufruf Google Maps nach Class und iframe:

  <!-- Start hide or show div based on advertising - here Google Maps -->
  <script>
        function handle_consent_event(e) {
            var consent = e.detail || { necessary: true };
            var elements = document.querySelectorAll(".google-map  iframe");
            elements.forEach(function(el) {
                // no consent yet or advertising not accepted, hide div
                if (!consent || !consent.advertising) {
                    el.style.display = 'none';
                    var btn = document.createElement('button');
                    btn.innerHTML = 'Bitte akzeptiere Werbung Cookies, um Google Karte zu sehen';
                    var click = function() { CookieFirst.acceptCategory('advertising');window.location.reload(); };
                    btn.addEventListener('click', click);
                    el.before(btn);
                    var src = el.getAttribute('src');
                    el.setAttribute('data-src', src);
                    el.setAttribute('src', '');
                } else {
                    el.style.display = 'block';
                    var src = el.getAttribute('data-src');
                    if(src) {
                        el.setAttribute('src', src);
                        el.setAttribute('data-src', '');
                    }
                }
            });
        }
        window.addEventListener("cf_consent", handle_consent_event);
        window.addEventListener("cf_consent_loaded", handle_consent_event);
  </script>
  <!-- End hide or show div based on advertising -->
  

Inhalt zentrieren damit Button auch zentriert erscheint:

class="d-flex justify-content-center"

  
  
CSS für Button wenn gesperrt:
  
  
button {
  color: red;
  text-decoration: underline;
  border: 1px solid #fff;
  border-radius: 20px;
  background-color: #e2e2e2;
  height: 100px;
  margin: 20px;
  padding-left: 20px;
  padding-right: 20px;
  box-shadow: 2px 2px 3px #999999;
  font-size: 1.2rem;
}
button:hover {
  color: blue;
}



Aufruf YouTube im Iframe. Bei Mobirise4 - Themen und eingebauten Videos eventuell die IP der gesamten SECTION eintragen (dann ohne CSS):

  <!-- Start hide or show div based on advertising - here iframe -->
  <script>
        function handle_consent_event(e) {
            var consent = e.detail || { necessary: true };
            var elements = document.querySelectorAll("iframe");
            elements.forEach(function(el) {
                // no consent yet or advertising not accepted, hide div
                if (!consent || !consent.advertising) {
                    el.style.display = 'none';
                    var btn = document.createElement('button');
                    btn.innerHTML = 'Bitte akzeptiere Werbung Cookies, um YouTube Video zu sehen';
                    var click = function() { CookieFirst.acceptCategory('advertising');window.location.reload(); };
                    btn.addEventListener('click', click);
                    el.before(btn);
                    var src = el.getAttribute('src');
                    el.setAttribute('data-src', src);
                    el.setAttribute('src', '');
                } else {
                    el.style.display = 'block';
                    var src = el.getAttribute('data-src');
                    if(src) {
                        el.setAttribute('src', src);
                        el.setAttribute('data-src', '');
                    }
                }
            });
        }
        window.addEventListener("cf_consent", handle_consent_event);
        window.addEventListener("cf_consent_loaded", handle_consent_event);
  </script>
  <!-- End hide or show div based on advertising -->
  


  
ElectricBlaze YouTube nach CSS-Class
  

  <!-- Start hide or show div based on advertising - here ElectricBlaze YouTube -->
  <script>
        function handle_consent_event(e) {
            var consent = e.detail || { necessary: true };
            var elements = document.querySelectorAll(".eb-youtube-feed");
            elements.forEach(function(el) {
                // no consent yet or advertising not accepted, hide div
                if (!consent || !consent.advertising) {
                    el.style.display = 'none';
                    var btn = document.createElement('button');
                    btn.innerHTML = 'Bitte akzeptieren Sie Werbung Cookies, um diesen Inhalt zu sehen';
                    var click = function() { CookieFirst.acceptCategory('advertising');window.location.reload(); };
                    btn.addEventListener('click', click);
                    el.before(btn);
                    var src = el.getAttribute('src');
                    el.setAttribute('data-src', src);
                    el.setAttribute('src', '');
                } else {
                    el.style.display = 'block';
                    var src = el.getAttribute('data-src');
                    if(src) {
                        el.setAttribute('src', src);
                        el.setAttribute('data-src', '');
                    }
                }
            });
        }
        window.addEventListener("cf_consent", handle_consent_event);
        window.addEventListener("cf_consent_loaded", handle_consent_event);
  </script>
  
  
  
  <!-- Start hide or show div based on advertising - here ElectricBlaze YouTube -->
  <script>
        function handle_consent_event(e) {
            var consent = e.detail || { necessary: true };
            var elements = document.querySelectorAll(".electricblaze-id-2Uhx5ja");
            elements.forEach(function(el) {
                // no consent yet or advertising not accepted, hide div
                if (!consent || !consent.advertising) {
                    el.style.display = 'none';
                    var btn = document.createElement('button');
                    btn.innerHTML = 'Bitte akzeptieren Sie Werbung Cookies, um diesen Inhalt zu sehen';
                    var click = function() { CookieFirst.acceptCategory('advertising');window.location.reload(); };
                    btn.addEventListener('click', click);
                    el.before(btn);
                    var src = el.getAttribute('src');
                    el.setAttribute('data-src', src);
                    el.setAttribute('src', '');
                } else {
                    el.style.display = 'block';
                    var src = el.getAttribute('data-src');
                    if(src) {
                        el.setAttribute('src', src);
                        el.setAttribute('data-src', '');
                    }
                }
            });
        }
        window.addEventListener("cf_consent", handle_consent_event);
        window.addEventListener("cf_consent_loaded", handle_consent_event);
  </script>
  <!-- End hide or show div based on advertising -->

Oben also meine "Sammlung" unterschiedlicher Scripte.

Bei Fragen muss man die Webseite sehen (URL) und dann frage ganz gezielt, was Du machen willst. Dann kann ich versuchen das zu beantworten - aber so ganz richtig habe ich "CookieFirst" auch noch nicht verstanden.

"CookieFirst" hat aber einen hervorragenden Support, der immer schnell und hilfreich antwortet.

Die Verweise zu "Google-Fonts" kannst Du damit aber nicht sperren. Dazu müsstest Du meine Anleitungen lesen:

https://www.mobirise-tutorials.com/Local-Fonts/

oder

https://www.mobirise-tutorials.com/Local-Fonts-Weights/

... aber eigentlich geht das inzwischen auch sehr gut über den "Cookie Alert" von Mobirise (Option 2):

https://www.mobirise-tutorials.com/Test ... e-Alert-1/

https://www.mobirise-tutorials.com/Test ... e-Alert-2/

Nachtfalke

Hallo Tommy,

danke für die Info. Eigentlich müsste „nur“ eine kleine Webseite Rechtssicher erstellt werden. Ich schau mal, ob vielleicht sogar der "Cookie Alert" von Mobirise (Option 2) ausreichend ist. Das mit den lokale Fonts habe ich versanden und auch schon ohne Probleme umgesetzt.

Mobirise-Tutorials.com

CookieFirst API

Re: CookieFirst API

Re: CookieFirst API

Re: CookieFirst API

Re: CookieFirst API

Wer ist online?