Try it
↑ ↑ ↓ ↓ ← → ← → B AThe codes work on every page of this site, only the last pair changes: B A for rickroll, A B for doge, B B for the Harlem Shake. Esc puts it back.
dataLayer
Nothing yet
Custom HTML tag
<script>
(function() {
var easterEggMode = "rickroll";
var mobileTrigger = "all";
function mobileTriggerOn(name) {
return mobileTrigger === 'all' || mobileTrigger === name;
}
var kKeys = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];
var kIndex = 0;
document.addEventListener('keydown', function(e) {
if (e.keyCode === kKeys[kIndex]) {
kIndex++;
if (kIndex === kKeys.length) {
kIndex = 0;
triggerEasterEgg('desktop_keyboard');
}
} else {
kIndex = 0;
}
});
var swipePattern = ['U', 'U', 'D', 'D', 'L', 'R', 'L', 'R'];
var swipeIndex = 0;
var touchStartX = 0, touchStartY = 0;
document.addEventListener('touchstart', function(e) {
if (!mobileTriggerOn('swipe')) return;
if (e.touches.length === 1) {
touchStartX = e.touches[0].clientX;
touchStartY = e.touches[0].clientY;
}
}, { passive: true });
document.addEventListener('touchend', function(e) {
if (!mobileTriggerOn('swipe')) return;
if (!e.changedTouches || e.changedTouches.length === 0) return;
var dx = e.changedTouches[0].clientX - touchStartX;
var dy = e.changedTouches[0].clientY - touchStartY;
var absX = Math.abs(dx), absY = Math.abs(dy);
var dir = null;
if (Math.max(absX, absY) > 30) {
if (absY > absX) dir = dy > 0 ? 'D' : 'U';
else dir = dx > 0 ? 'R' : 'L';
}
if (dir) {
if (dir === swipePattern[swipeIndex]) {
swipeIndex++;
if (swipeIndex === swipePattern.length) {
swipeIndex = 0;
triggerEasterEgg('mobile_swipe');
}
} else {
swipeIndex = 0;
}
}
}, { passive: true });
var tapCount = 0;
var tapTimer = null;
document.addEventListener('click', function(e) {
if (!mobileTriggerOn('five_tap')) return;
var target = e.target.closest('.nav-logo, header, #logo');
if (target) {
tapCount++;
clearTimeout(tapTimer);
tapTimer = setTimeout(function() { tapCount = 0; }, 2200);
if (tapCount >= 5) {
tapCount = 0;
triggerEasterEgg('mobile_5_tap');
}
}
});
var lastX = null, lastY = null, lastZ = null;
window.addEventListener('devicemotion', function(e) {
if (!mobileTriggerOn('shake')) return;
var acc = e.accelerationIncludingGravity;
if (!acc) return;
if (lastX !== null) {
var delta = Math.abs(acc.x - lastX) + Math.abs(acc.y - lastY) + Math.abs(acc.z - lastZ);
if (delta > 25) {
triggerEasterEgg('device_shake');
}
}
lastX = acc.x; lastY = acc.y; lastZ = acc.z;
}, { passive: true });
function restoreWebsite() {
var imgs = document.querySelectorAll('img');
for (var i = 0; i < imgs.length; i++) {
if (imgs[i].getAttribute('data-orig-src')) {
imgs[i].src = imgs[i].getAttribute('data-orig-src');
imgs[i].removeAttribute('data-orig-src');
}
}
if (document.body.getAttribute('data-orig-font') !== null) {
document.body.style.fontFamily = document.body.getAttribute('data-orig-font');
document.body.removeAttribute('data-orig-font');
}
var banner = document.getElementById('gtm-easteregg-banner');
if (banner) banner.remove();
stopMusic();
var dogeWords = document.querySelectorAll('.gtm-doge-word');
for (var d = 0; d < dogeWords.length; d++) dogeWords[d].remove();
clearTimeout(harlemDrop);
clearTimeout(harlemEnd);
while (eggCleanup.length) { try { eggCleanup.pop()(); } catch (err) {} }
var moving = document.querySelectorAll('.gtm-egg-solo, .gtm-egg-dance');
for (var m = 0; m < moving.length; m++) {
moving[m].className = moving[m].className
.replace(/gtm-egg-solo/g, '')
.replace(/gtm-egg-dance/g, '')
.replace(/gtm-egg-dance-d/g, '')
.trim();
}
}
function mountRestoreBanner(label, color) {
var existing = document.getElementById('gtm-easteregg-banner');
if (existing) existing.remove();
var banner = document.createElement('div');
banner.id = 'gtm-easteregg-banner';
banner.style.cssText = 'position:fixed;top:16px;left:50%;transform:translateX(-50%);background:#0f172a;color:#fff;padding:10px 18px;border-radius:9999px;border:2px solid ' + (color || '#22c55e') + ';box-shadow:0 12px 36px rgba(0,0,0,0.6);font-family:sans-serif;font-weight:600;font-size:13px;z-index:9999999;cursor:pointer;display:flex;align-items:center;gap:10px;';
banner.innerHTML = '<span>' + label + '</span><span style="padding:2px 8px;border-radius:9999px;background:rgba(255,255,255,0.15);font-size:11px;">Restore ✕</span>';
banner.onclick = restoreWebsite;
document.body.appendChild(banner);
}
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' || e.keyCode === 27) restoreWebsite();
});
function triggerEasterEgg(source) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'easter_egg_triggered',
easter_egg_type: easterEggMode,
trigger_source: source || 'unknown',
timestamp: new Date().toISOString()
});
if (navigator.vibrate) {
try { navigator.vibrate([30, 50, 30]); } catch(e) {}
}
if (easterEggMode === 'doge') runDogeMode();
else if (easterEggMode === 'harlem') runHarlemMode();
else if (easterEggMode === 'matrix') runMatrixMode();
else if (easterEggMode === 'last_click') runLastClickMode();
else if (easterEggMode === 'consent') runConsentMode();
else if (easterEggMode === 'sampled') runSampledMode();
else if (easterEggMode === 'bots') runBotsMode();
else runRickRollMode();
}
var harlemDrop = null;
var harlemEnd = null;
var eggCleanup = [];
var eggLastClickHandler = null;
function harlemStyles() {
if (document.getElementById('gtm-egg-harlem-css')) return;
var css = document.createElement('style');
css.id = 'gtm-egg-harlem-css';
css.textContent = [
'@keyframes gtmEggSolo{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-2px,1px) rotate(-3deg)}50%{transform:translate(2px,-1px) rotate(3deg)}75%{transform:translate(-1px,2px) rotate(-2deg)}}',
'@keyframes gtmEggShake{0%,100%{transform:translate(0,0) rotate(0)}20%{transform:translate(-6px,4px) rotate(-8deg)}40%{transform:translate(6px,-5px) rotate(9deg)}60%{transform:translate(-5px,-3px) rotate(-6deg)}80%{transform:translate(4px,5px) rotate(7deg)}}',
'@keyframes gtmEggSwing{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}',
'@keyframes gtmEggPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.28)}}',
'@keyframes gtmEggSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}',
'@keyframes gtmEggHop{0%,100%{transform:translateY(0)}40%{transform:translateY(-22px)}70%{transform:translateY(6px)}}',
'@keyframes gtmEggWobble{0%,100%{transform:skewX(0) translateX(0)}30%{transform:skewX(-16deg) translateX(-10px)}60%{transform:skewX(16deg) translateX(10px)}}',
'.gtm-egg-solo{animation:gtmEggSolo .28s linear infinite !important}',
'.gtm-egg-dance{animation-iteration-count:infinite !important;animation-timing-function:ease-in-out !important;will-change:transform}',
'.gtm-egg-dance-0{animation-name:gtmEggShake !important;animation-duration:.4s !important}',
'.gtm-egg-dance-1{animation-name:gtmEggSwing !important;animation-duration:.32s !important}',
'.gtm-egg-dance-2{animation-name:gtmEggPulse !important;animation-duration:.46s !important}',
'.gtm-egg-dance-3{animation-name:gtmEggSpin !important;animation-duration:.9s !important;animation-timing-function:linear !important}',
'.gtm-egg-dance-4{animation-name:gtmEggHop !important;animation-duration:.52s !important}',
'.gtm-egg-dance-5{animation-name:gtmEggWobble !important;animation-duration:.38s !important}'
].join('');
document.head.appendChild(css);
}
function runHarlemMode() {
harlemStyles();
playMusic('qV0LHCHf-pE');
mountRestoreBanner('Harlem Shake — wait for the drop, or press Esc', '#8b5cf6');
var soloist = document.querySelector('.nav-logo, header, #logo') || document.querySelector('h1');
if (soloist) soloist.className += ' gtm-egg-solo';
harlemDrop = setTimeout(function() {
if (soloist) soloist.className = soloist.className.replace(/gtm-egg-solo/g, '').trim();
var viewport = window.innerWidth || document.documentElement.clientWidth || Infinity;
var all = document.querySelectorAll('main *, header *, footer *, body > div > *');
var picked = [];
for (var i = 0; i < all.length && picked.length < 120; i++) {
var el = all[i];
if (el.id === 'gtm-easteregg-banner' || el.id === 'gtm-easteregg-music') continue;
var box = el.getBoundingClientRect();
if (box.width < 24 || box.height < 16 || box.width >= viewport * 0.98) continue;
var inside = false;
for (var p = 0; p < picked.length; p++) {
if (picked[p].contains(el)) { inside = true; break; }
}
if (inside) continue;
picked.push(el);
el.className += ' gtm-egg-dance gtm-egg-dance-' + (picked.length % 6);
}
}, 15000);
harlemEnd = setTimeout(restoreWebsite, 32000);
}
function eggPanel(head, row, note) {
var panel = document.createElement('div');
panel.className = 'gtm-egg-panel';
panel.style.cssText = 'position:fixed;bottom:80px;left:16px;max-width:22rem;padding:12px 14px;border-radius:12px;background:#111827;color:#fff;font-family:sans-serif;font-size:13px;line-height:1.4;z-index:9999998;box-shadow:0 12px 32px rgba(0,0,0,0.35);';
var h = document.createElement('div');
h.style.cssText = 'font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;opacity:.8;';
h.textContent = head;
var r = document.createElement('div');
r.style.cssText = 'font-weight:600;';
r.textContent = row;
var n = document.createElement('div');
n.style.cssText = 'margin-top:6px;font-size:11px;opacity:.7;';
n.textContent = note;
panel.appendChild(h); panel.appendChild(r); panel.appendChild(n);
document.body.appendChild(panel);
return { panel: panel, row: r, note: n };
}
function eggBoxes(limit) {
var viewport = window.innerWidth || document.documentElement.clientWidth || Infinity;
var all = document.querySelectorAll('main *, header *, footer *, body > div > *');
var picked = [];
for (var i = 0; i < all.length && picked.length < limit; i++) {
var node = all[i];
if (node.className && String(node.className).indexOf('gtm-egg') === 0) continue;
var box = node.getBoundingClientRect();
if (box.width < 24 || box.height < 16 || box.width >= viewport * 0.98) continue;
var inside = false;
for (var p = 0; p < picked.length; p++) { if (picked[p].contains(node)) { inside = true; break; } }
if (inside) continue;
picked.push(node);
}
return picked;
}
function runLastClickMode() {
var ui = eggPanel('Attribution: last click', 'Click anything.', 'Every other touch gets nothing.');
var credited = null;
var conversions = 0;
eggLastClickHandler = function(e) {
if (!e.target || e.target.closest('.gtm-egg-panel') || e.target.id === 'gtm-easteregg-banner') return;
if (credited) credited.style.outline = credited.getAttribute('data-egg-outline') || '';
credited = e.target;
credited.setAttribute('data-egg-outline', credited.style.outline);
credited.style.outline = '2px solid #2563eb';
conversions++;
var text = (credited.textContent || credited.tagName).trim().replace(/s+/g, ' ').slice(0, 28);
ui.row.textContent = text + ' — 100%';
ui.note.textContent = conversions + ' conversion(s) credited. Everything else: 0%.';
};
document.addEventListener('click', eggLastClickHandler, true);
eggCleanup.push(function() {
document.removeEventListener('click', eggLastClickHandler, true);
if (credited) credited.style.outline = credited.getAttribute('data-egg-outline') || '';
ui.panel.remove();
});
mountRestoreBanner('Last-click attribution — click to restore, or press Esc', '#2563eb');
}
function runConsentMode() {
var vendors = 63;
var open = 0;
function spawn(depth) {
if (open >= 12) return;
open++;
var b = document.createElement('div');
b.className = 'gtm-egg-consent';
b.style.cssText = 'position:fixed;left:50%;transform:translateX(-50%);bottom:' + (80 + depth * 14) + 'px;width:min(92vw,30rem);display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px;border-radius:8px;background:#fff;color:#111827;font-family:sans-serif;font-size:13px;box-shadow:0 10px 28px rgba(0,0,0,0.22);z-index:9999998;';
var t = document.createElement('div');
t.style.cssText = 'flex:1 1 12rem;';
t.textContent = 'We and ' + vendors + ' partners use cookies to measure things about you.';
var accept = document.createElement('button');
accept.type = 'button';
accept.textContent = 'Accept all';
accept.style.cssText = 'padding:6px 12px;border:1px solid #111827;border-radius:8px;background:#111827;color:#fff;font-size:11px;cursor:pointer;';
var reject = document.createElement('button');
reject.type = 'button';
reject.textContent = 'Reject';
reject.style.cssText = 'padding:6px 12px;border:1px solid #111827;border-radius:8px;background:transparent;color:#111827;font-size:11px;cursor:pointer;';
function next() { b.remove(); open--; vendors *= 2; spawn(depth + 1); spawn(depth + 1); }
accept.onclick = next;
reject.onclick = next;
b.appendChild(t); b.appendChild(accept); b.appendChild(reject);
document.body.appendChild(b);
}
spawn(0);
eggCleanup.push(function() {
var all = document.querySelectorAll('.gtm-egg-consent');
for (var i = 0; i < all.length; i++) all[i].remove();
});
mountRestoreBanner('Consent — press Esc when you have had enough', '#dc2626');
}
function runSampledMode() {
var boxes = eggBoxes(200);
var hidden = [];
for (var i = 0; i < boxes.length; i++) {
if (Math.random() > 0.1) { boxes[i].style.visibility = 'hidden'; hidden.push(boxes[i]); }
}
var ui = eggPanel('Sampled report', 'Showing ' + (boxes.length - hidden.length) + ' of ' + boxes.length + ' elements', 'Based on 10% of sessions. ±4.2% margin of error.');
eggCleanup.push(function() {
for (var j = 0; j < hidden.length; j++) hidden[j].style.visibility = '';
ui.panel.remove();
});
mountRestoreBanner('Sampled at 10% — click to restore, or press Esc', '#0891b2');
}
function runBotsMode() {
var style = document.createElement('style');
style.id = 'gtm-egg-bots-css';
style.textContent = '@keyframes gtmEggBot{0%,100%{transform:translate(0,0)}20%{transform:translate(90px,-60px)}40%{transform:translate(-70px,50px)}60%{transform:translate(120px,70px)}80%{transform:translate(-90px,-40px)}}';
document.head.appendChild(style);
var made = [];
for (var i = 0; i < 14; i++) {
var c = document.createElement('div');
c.className = 'gtm-egg-bot';
c.style.cssText = 'position:fixed;left:' + (Math.random() * 84 + 4) + 'vw;top:' + (Math.random() * 74 + 8) + 'vh;width:0;height:0;border-left:8px solid #7c3aed;border-right:5px solid transparent;border-bottom:13px solid transparent;z-index:9999997;pointer-events:none;animation:gtmEggBot ' + (Math.random() * 2 + 1.6).toFixed(2) + 's ease-in-out infinite;animation-delay:' + (Math.random() * -6).toFixed(2) + 's;';
document.body.appendChild(c);
made.push(c);
}
var ui = eggPanel('Traffic quality', '0 sessions', '0.0s average duration, 100% bounce, all from one subnet');
var sessions = 0;
var timer = setInterval(function() {
sessions += Math.floor(Math.random() * 9) + 3;
ui.row.textContent = sessions + ' sessions';
}, 260);
eggCleanup.push(function() {
clearInterval(timer);
for (var k = 0; k < made.length; k++) made[k].remove();
ui.panel.remove();
style.remove();
});
mountRestoreBanner('Bot traffic — click to restore, or press Esc', '#7c3aed');
}
function runRickRollMode() {
var imgs = document.querySelectorAll('img');
for (var i = 0; i < imgs.length; i++) {
if (!imgs[i].getAttribute('data-orig-src')) {
imgs[i].setAttribute('data-orig-src', imgs[i].src);
}
imgs[i].src = 'https://media.giphy.com/media/Vuw9m5wXviFIQ/giphy.gif';
}
playMusic();
mountRestoreBanner('Rickroll mode — click to restore, or press Esc', '#22c55e');
}
function playMusic(videoId) {
var id = videoId || 'dQw4w9WgXcQ';
if (!id) return;
stopMusic();
var frame = document.createElement('iframe');
frame.id = 'gtm-easteregg-music';
frame.title = 'Easter egg';
frame.allow = 'autoplay; encrypted-media';
frame.src = 'https://www.youtube-nocookie.com/embed/' + id + '?autoplay=1';
frame.style.cssText = 'position:fixed;left:-9999px;top:0;width:320px;height:180px;border:0;pointer-events:none;';
document.body.appendChild(frame);
}
function stopMusic() {
var existing = document.getElementById('gtm-easteregg-music');
if (existing) existing.remove();
}
function runDogeMode() {
var imgs = document.querySelectorAll('img');
var dogeUrl = 'https://media.giphy.com/media/DlK2z5qILD0fC/giphy.gif';
for (var i = 0; i < imgs.length; i++) {
if (!imgs[i].getAttribute('data-orig-src')) {
imgs[i].setAttribute('data-orig-src', imgs[i].src);
}
imgs[i].src = dogeUrl;
}
if (document.body.getAttribute('data-orig-font') === null) {
document.body.setAttribute('data-orig-font', document.body.style.fontFamily || '');
}
document.body.style.fontFamily = '"Comic Sans MS", "Comic Neue", cursive, sans-serif';
var words = ['wow', 'such attribution', 'much conversion', 'very dataLayer', 'so GA4', 'many events', 'such CAPI', 'wow'];
var colors = ['#f59e0b', '#ec4899', '#3b82f6', '#10b981', '#8b5cf6'];
for (var w = 0; w < 8; w++) {
var el = document.createElement('div');
el.className = 'gtm-doge-word';
el.innerText = words[w % words.length];
el.style.cssText = 'position:fixed;top:' + (Math.random() * 65 + 15) + '%;left:' + (Math.random() * 65 + 15) + '%;color:' + colors[w % colors.length] + ';font-size:' + (Math.random() * 12 + 22) + 'px;font-family:"Comic Sans MS", cursive;font-weight:bold;z-index:999999;pointer-events:none;text-shadow:0 2px 4px rgba(0,0,0,0.8);';
document.body.appendChild(el);
}
mountRestoreBanner('Doge mode — click to restore, or press Esc', '#f59e0b');
}
function runMatrixMode() {
var c = document.createElement('canvas');
c.style.cssText = 'position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.9);z-index:999999;cursor:pointer;';
document.body.appendChild(c);
c.onclick = function() { c.remove(); };
var ctx = c.getContext('2d');
c.width = window.innerWidth;
c.height = window.innerHeight;
var letters = '0123456789ABCDEFGA4GTM';
var fontSize = 16;
var cols = Math.floor(c.width / fontSize);
var drops = [];
for (var d = 0; d < cols; d++) drops[d] = 1;
var timer = setInterval(function() {
ctx.fillStyle = 'rgba(0, 0, 0, 0.08)';
ctx.fillRect(0, 0, c.width, c.height);
ctx.fillStyle = '#16A34A';
ctx.font = fontSize + 'px monospace';
for (var k = 0; k < drops.length; k++) {
var text = letters[Math.floor(Math.random() * letters.length)];
ctx.fillText(text, k * fontSize, drops[k] * fontSize);
if (drops[k] * fontSize > c.height && Math.random() > 0.975) drops[k] = 0;
drops[k]++;
}
}, 33);
setTimeout(function() { clearInterval(timer); c.remove(); }, 6000);
}
})();
</script>How it works
- Listens for
keydownand matches the sequence[38, 38, 40, 40, 37, 39, 37, 39, 66, 65](↑ ↑ ↓ ↓ ← → ← → B A). - Reads
touchstartandtouchendto catch eight swipes: up, up, down, down, left, right, left, right. - Five taps on the logo (
.nav-logo,headeror#logoby default), each within about two seconds of the last, start it without a keyboard. - Listens to
devicemotionand starts on a phone shake. - Pushes
window.dataLayer.push({ event: 'easter_egg_triggered', easter_egg_type: mode, trigger_source: source }). - Runs the selected mode. Rickroll and Doge swap the
srcof every image and keep the originals indata-orig-src; Rickroll also opens an offscreen youtube-nocookie player with the track. Harlem Shake shakes one element for 15 seconds, then makes the page dance at the drop. Last-click, Consent, Sampled and Bots are jokes about the job. A restore bar and the Esc key put everything back.
Installation
- Open your container in Google Tag Manager.
- Tags > New > Custom HTML.
- Paste the code from this page into the HTML field.
- Set the trigger to All Pages, or DOM Ready, or only the landing pages you want.
- Save and check in GTM Preview: type the sequence on desktop or tap the logo five times on a phone.
- In GA4 DebugView, confirm easter_egg_triggered arrives with the trigger_source you used.
- If the site sends a Content-Security-Policy: img-src has to allow media.giphy.com (or host the GIFs yourself and put your URLs in the parameters), frame-src has to allow www.youtube-nocookie.com for the music, and img-src has to allow i.ytimg.com for the player poster. Clear musicVideoId to skip the music.
Questions
How does it work on a phone without a keyboard?
Three mobile triggers: eight swipes (up, up, down, down, left, right, left, right), five fast taps on the logo, and a phone shake.
Will this affect page speed?
About 20 KB of inline JavaScript, and it makes no network request until someone enters the code. The touch listeners are passive, so they do not block scrolling.
Can I see in GA4 who found it?
The script pushes easter_egg_triggered with easter_egg_type and trigger_source (desktop_keyboard, mobile_swipe, mobile_5_tap or device_shake). You still need a GA4 event tag in GTM listening for it.