Fakecentrics - Custom HTML Tag Code for Google Tag Manager: Dummy Consent Dialog for Testing Purposes

fakecentrics.html

<script>
/**
 * Fakecentrics - Shakespeare Edition
 * ===================================
 * creates a simple fake consent dialog to accept or decline
 * all services defined in a "consentKeys" array. 
 * pushes consent to dataLayer in a Usercentrics-like format.  
 *
 * @version 1.0.4
 * @author Markus Baersch <mail@markus-baersch.de>
 */

  /*********************************** SETUP *****************************/
  //add service names to be covered in dataLayer pushes 
  var consentKeys = [
    "Google Analytics 4", 
    "Facebook Pixel",
  ];
  
  //session cookie name for consent choice   
  var fc_cookie = "fakeconsent";
  
  //path to image file (will be scaled 150 pixels wide) 
  var fc_img = "/areyouhere.png";
  
  //translate title and button captions
  var fc_text = {title: "Sein oder Nichtsein?", accept: "Sein!", decline: "Nichtsein!"};
  /********************************* END SETUP ***************************/  
</script>
<style>
  #fakeconsent{z-index:1000;position:fixed;background:#fff1df;border-radius: 16px; 
    padding:3em;top:50%;left:50%;color:#222;text-align:center;margin:auto;transform:translate(-50%, -50%);
    border:5px solid #222;box-shadow: #000000ab 0 0 10000px 10000px}
  .btrw {display:flex;gap:2em;justify-content:center;flex-wrap:wrap;margin:2em 3em 0 3em}
  .btrw button{letter-spacing:1px;min-width:8em;border-radius:6px;border:5px solid #222;color:#fff1df;
    background:#ff3434;padding:0.6em 1.8em; font-size:1em;font-weight:bold}
  #fc_c{text-decoration:none;display:block;float:right;margin:-2em;background:#b49f83;color:#fff;
    padding: 1px 10px;border-radius:50%}
  #fc_i{width:150px;margin:2em auto}
  #fc_t{font-size:2em;font-weight:bold}
</style>
<div id="fakeconsent" style="display:none">
  <a id="fc_c" href="javascript:closeFakeConsent()">X</a>
  <div id="fc_t">Cookies okay?</div>
  <img id="fc_i" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
  <div class="btrw">
    <button id="fc_ba" onclick="closeFakeConsent(true)" style="background:#52b752">Accept</button>
    <button id="fc_bd" onclick="closeFakeConsent(false)">Decline</button>
  </div>
</div>

<script>
  document.getElementById('fc_t').innerHTML = fc_text.title;
  document.getElementById('fc_ba').innerHTML = fc_text.accept;
  document.getElementById('fc_bd').innerHTML = fc_text.decline;
  
  function push2dl(cns, ac, tp) {
    var o={event: "consent_status", 
           action: ac||"onInitialPageLoad", 
           type: tp||"explicit",
          };
    consentKeys.forEach(function(x){o[x] = cns});
    window.dataLayer.push(o);
  }
  
  function closeFakeConsent(cns) {
    if (cns != undefined) {
      document.cookie = fc_cookie+"="+cns.toString()+";path=/";
      push2dl(cns, cns ? "onAcceptAllServices" : "onDenyAllServices");
    } else { 
      push2dl(false, "onUpdateServices");
    }  
    fc_dlg.style.display = "none";
  } 
  
  var fc_dlg = document.getElementById("fakeconsent");
  if (fc_img) document.getElementById("fc_i").src = fc_img;  
  if (document.cookie.indexOf(fc_cookie+"=") >= 0) {
    push2dl(document.cookie.indexOf(fc_cookie+"=true") >= 0);
  } else {
    push2dl(false, null, "implicit");
    fc_dlg.style.display = "block"; 
  }
</script>

consent push to dataLayer:

example img (created by DALL-E) :