Cookie Banner selber coden und integrieren

Hallo Freunde!

Ich habe einen simplen Cookie Banner in HTML / CSS / JS erstellt und möchte diesen nun in eine Wordpress Seite integrieren. Wie bekomme ich den Code in meine Wordpress Seite?

Vielen Dank für eure Hilfe!

Danke für deine Antwort!

Was ist denn der Unterschied zu den Plugins? Ist das Code Snippets Plugin nur für PHP Code?

Ich suche eine Möglichkeit den HTML / CSS und JS Code als snippet einzufügen und diesen Code dann direkt beim Start der Seite auszuführen. Das müsste doch eigentlich mit beiden Plugins funktionieren?

Kann ich auch HTML in das custom CSS /JS Plugin einfügen?

Stimmt, ich bin allerdings noch mit dem JS Code für den Cookie beschäftigt und weiß nicht genau wie ich bei Akzeptanz den Google Analytics code ausführen kann. Kann man hier im Forum auch JavaScript Fragen stellen?

Ok, also das hier ist der JavaScipt Code für den Cookie Banner:
[FONT=Tahoma]
[COLOR=#0000ff]let cookieModal = document.querySelector('.cookie-consent-modal');
let cancelCookieBtn = document.querySelector('.btn.cancel');
let acceptCookieBtn = document.querySelector('.btn.accept');

cancelCookieBtn.addEventListener('click', function () {
cookieModal.classList.remove('active');
});

acceptCookieBtn.addEventListener('click', function () {
cookieModal.classList.remove('active');
localStorage.setItem('cookieAccepted', 'yes');
});

setTimeout(function () {
let cookieAccepted = localStorage.getItem('cookieAccepted');
if (cookieAccepted != 'yes') {
cookieModal.classList.add('active');
}
}, 2000);[/COLOR][/FONT]

Wenn nun jemand auf "Akzeptieren" klickt, soll der folgende Google Analytics Code ausgeführt werden:

[FONT=Tahoma][COLOR=#ff0080] <!-- Global site tag (gtag.js) - Google Analytics -->

<script async src="https://www.googletagmanager.com/gtag/js?id=PASTIDHERE"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'PASTIDHERE');
</script>

[/COLOR]
[COLOR=#000000]Meine Fragen ist:
Wie kann ich den Google Analytics Code in den JavaScript Code integrieren, so das dieser bei Akzeptanz ausgeführt wird?[/COLOR][/FONT]

[FONT=Tahoma][COLOR=#000000]Ich bin sehr dankbar für Hilfe!!

[/COLOR][/FONT]

Vielen Dank für die Antwort!!

Ich habe den Google Analytics Code jetzt integriert und das ganze sieht jetzt so aus:

let cookieModal = document.querySelector('.cookie-consent-modal');
let cancelCookieBtn = document.querySelector('.btn.cancel');
let acceptCookieBtn = document.querySelector('.btn.accept');


cancelCookieBtn.addEventListener('click', function () {
  cookieModal.classList.remove('active');
});


acceptCookieBtn.addEventListener('click', function () {
  cookieModal.classList.remove('active');
  localStorage.setItem('cookieAccepted', 'yes');
});


setTimeout(function () {
  let cookieAccepted = localStorage.getItem('cookieAccepted');
  if (cookieAccepted != 'yes') {
    cookieModal.classList.add('active');
  } else cookieAccepted == 'yes';
  useGA();
}, 2000);




function useGA() {
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag('js', new Date());


  gtag('config', 'PASTIDHERE');
}

Ich habe also in der setTimeout function ein if /else statement hinzugefügt. Wenn die Cookies nicht akzeptiert wurden dann zeige den Cookie Banner beim erneuten laden, wenn die Cookies akzeptiert wurden dann useGA, also führe den Google Analytics Code aus.

Meinst du das stimmt so?

Noch eine andere Frage, was ist denn mit diesem Code:

<script async src="https://www.googletagmanager.com/gtag/js?id=PASTIDHERE"></script>

Sollte der nicht auch noch integriert werden?

Ok verstehe, die timeout function macht hier keinen Sinn, also einfach nur if cookie accepted useGA

Passt denn die Reihenfolge oder ist das egal?

Der Code sieht nun so aus:

let cookieModal = document.querySelector('.cookie-consent-modal');
let cancelCookieBtn = document.querySelector('.btn.cancel');
let acceptCookieBtn = document.querySelector('.btn.accept');


cancelCookieBtn.addEventListener('click', function () {
  cookieModal.classList.remove('active');
});


acceptCookieBtn.addEventListener('click', function () {
  cookieModal.classList.remove('active');
  localStorage.setItem('cookieAccepted', 'yes');
});


setTimeout(function () {
  let cookieAccepted = localStorage.getItem('cookieAccepted');
  if (cookieAccepted != 'yes') {
    cookieModal.classList.add('active');
  }
}, 2000);


let cookieAccepted = localStorage.getItem('cookieAccepted');
if (cookieAccepted == 'yes') {
  useGA();
}


function useGA() {
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag('js', new Date());


  gtag('config', 'PASTIDHERE');
}

Wie kann ich denn den Google tagmanager Code einbinden??
Auch in der function useGA??

Zitat von r23

ja klar ohne wird es nicht funktionieren. - wobei du bei PASTIDHERE auch noch durch deine ID austauschen solltest...

Ja die ID tausche ich noch aus, nur wo soll der tagmanager code rein?