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.