Попробовать
Комбинация: ↑ ↑ ↓ ↓ ← → ← → B A
Те же комбинации работают на всём сайте, меняется только последняя пара: B A — Rickroll, A B — Doge, B B — Harlem Shake. Esc возвращает всё обратно.
dataLayer
Пока пусто
GTM Custom HTML Tag (JavaScript)
<script>
(function() {
var easterEggMode = "rickroll";
var customMsg = "Konami code detected";
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>Как это работает
- Отслеживает события
keydownдля стандартной комбинации[38, 38, 40, 40, 37, 39, 37, 39, 66, 65](↑ ↑ ↓ ↓ ← → ← → B A). - Отслеживает направление свайпов (Вверх, Вверх, Вниз, Вниз, Влево, Вправо, Влево, Вправо + 2 тапа).
- 5 быстрых нажатий на логотип (
.nav-logo/#logo) активируют пасхалку без ввода текста. - Использует сенсор
devicemotionдля запуска по встряхиванию смартфона. - Отправляет структурированное событие
window.dataLayer.push({ event: 'easter_egg_triggered', easter_egg_type: mode, trigger_source: source }). - Запускает выбранный режим. Rickroll и Doge подменяют
srcу картинок, сохраняя оригиналы вdata-orig-src; Rickroll вдобавок открывает скрытый плеер youtube-nocookie с треком. Harlem Shake трясёт один элемент 15 секунд, а на дропе заставляет страницу танцевать. Last-click, Consent, Sampled и Bots — шутки про профессию. Плашка восстановления и клавиша Esc возвращают всё обратно.
Инструкция по установке
- Откройте контейнер Google Tag Manager (tagmanager.google.com).
- Перейдите в Теги > Создать > Тип тега: Пользовательский HTML (Custom HTML).
- Вставьте сгенерированный JavaScript код в поле HTML.
- В блоке Триггеры выберите «All Pages» (Все страницы) или «DOM Ready».
- Сохраните тег, включите режим предварительного просмотра (GTM Preview) и протестируйте ввод на десктопе или 5 тапов по логотипу на мобильном.
- Проверьте в GA4 DebugView, что событие easter_egg_triggered приходит и trigger_source совпадает со способом запуска.
- Если сайт отдаёт Content-Security-Policy: в img-src нужен media.giphy.com (либо разместите GIF у себя и укажите свои URL в полях справа), во frame-src — www.youtube-nocookie.com для музыки, в img-src — i.ytimg.com для постера плеера. Чтобы обойтись без музыки, очистите musicVideoId.
Частые вопросы
Как это работает на смартфонах без клавиатуры?
Скрипт содержит 3 мобильных триггера: (1) Свайпы пальцем по экрану (Вверх-Вверх-Вниз-Вниз-Влево-Вправо-Влево-Вправо), (2) Быстрый 5-кратный тап по логотипу, и (3) Встряхивание телефона по датчику акселерометра.
Влияет ли это на скорость загрузки сайта?
Около 20 КБ инлайн-JavaScript, и до момента ввода кода он не делает ни одного сетевого запроса. Слушатели тачей зарегистрированы как passive и не блокируют скролл.
Можно ли отследить в GA4, кто её нашёл?
Скрипт пушит easter_egg_triggered с параметрами easter_egg_type и trigger_source (desktop_keyboard, mobile_swipe, mobile_5_tap или device_shake). Тег GA4, который слушает это событие, всё равно нужно создать в GTM.