On-page debug HUD

<script>
(function() {
  var hudId = 'goodlabs-debug-hud';
  var SHOW_PIXEL_STATUS = true;
  var SHOW_UTM_PARAMS = true;
  var SHOW_DATALAYER = true;
  
  function getUtms() {
    var params = new URLSearchParams(window.location.search);
    var utms = {};
    ['utm_source', 'utm_medium', 'utm_campaign', 'utm_content', 'utm_term', 'gclid', 'fbclid'].forEach(function(k) {
      if (params.get(k)) utms[k] = params.get(k);
    });
    return utms;
  }

  function renderHud() {
    var existing = document.getElementById(hudId);
    if (existing) { existing.remove(); return; }

    var hud = document.createElement('div');
    hud.id = hudId;
    hud.style.cssText = 'position:fixed;bottom:20px;right:20px;width:380px;max-height:480px;background:#111827;color:#f3f4f6;border-radius:12px;box-shadow:0 12px 36px rgba(0,0,0,0.5);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;z-index:9999999;border:1px solid rgba(255,255,255,0.15);overflow:hidden;display:flex;flex-direction:column;';

    var utms = getUtms();
    var utmHtml = Object.keys(utms).length 
      ? Object.keys(utms).map(function(k) { return '<div style="color:#60a5fa"><strong>' + k + ':</strong> ' + utms[k] + '</div>'; }).join('')
      : '<div style="color:#9ca3af">No UTM params found in URL</div>';

    var dl = window.dataLayer || [];
    var lastEvents = dl.slice(-5).map(function(e) {
      return '<div style="background:#1f2937;padding:6px 8px;border-radius:6px;margin-bottom:6px;border-left:3px solid #16a34a">' +
        '<span style="color:#34d399;font-weight:bold">' + (e.event || 'dataLayer.push') + '</span>' +
        '<pre style="margin:4px 0 0;font-size:11px;color:#d1d5db;overflow-x:auto">' + JSON.stringify(e, null, 2) + '</pre>' +
      '</div>';
    }).join('');

    var metaStatus = typeof window.fbq === 'function' ? '<span style="color:#34d399">Active ✓</span>' : '<span style="color:#f87171">Not Detected ✗</span>';
    var gtagStatus = typeof window.gtag === 'function' ? '<span style="color:#34d399">Active ✓</span>' : '<span style="color:#f87171">Not Detected ✗</span>';

    hud.innerHTML = 
      '<div style="padding:10px 14px;background:#1e293b;border-bottom:1px solid rgba(255,255,255,0.1);display:flex;justify-content:space-between;align-items:center;">' +
        '<div style="font-weight:600;color:#fff;display:flex;align-items:center;gap:6px;"><span>⚡</span> Goodlabs Debug HUD</div>' +
        '<button id="goodlabs-hud-close" style="background:none;border:none;color:#9ca3af;font-size:16px;cursor:pointer;padding:0 4px;">&times;</button>' +
      '</div>' +
      '<div style="padding:12px;overflow-y:auto;flex:1;">' +
        (SHOW_PIXEL_STATUS ? ('<div style="margin-bottom:12px;">' +
          '<div style="font-size:11px;letter-spacing:0.01em;color:#9ca3af;margin-bottom:4px;">Pixel status</div>' +
          '<div style="display:flex;gap:12px;"><div>Meta Pixel: ' + metaStatus + '</div><div>GA4/gtag: ' + gtagStatus + '</div></div>' +
        '</div>') : '') +
        (SHOW_UTM_PARAMS ? ('<div style="margin-bottom:12px;">' +
          '<div style="font-size:11px;letter-spacing:0.01em;color:#9ca3af;margin-bottom:4px;">Campaign and click IDs in the URL</div>' +
          utmHtml +
        '</div>') : '') +
        (SHOW_DATALAYER ? ('<div>' +
          '<div style="font-size:11px;letter-spacing:0.01em;color:#9ca3af;margin-bottom:4px;">Last dataLayer entries (' + dl.length + ' total)</div>' +
          (lastEvents || '<div style="color:#9ca3af">dataLayer is empty</div>') +
        '</div>') : '') +
      '</div>';

    document.body.appendChild(hud);
    document.getElementById('goodlabs-hud-close').onclick = function() { hud.remove(); };
  }

  document.addEventListener('keydown', function(e) {
    if (e.ctrlKey && e.shiftKey && (e.key === 'G' || e.key === 'g' || e.code === 'KeyG')) {
      e.preventDefault();
      renderHud();
    }
  });

  window.__goodlabs_debug_hud = renderHud;
})();
</script>