Перейти к содержимому
ГлавнаяСкрипты/confetti-growth-celebration

Конфетти при конверсии в GTM

Рисует короткий залп конфетти на canvas по вашему триггеру Thank You, показывает бейдж со скидкой на пять секунд и пушит growth_milestone_unlocked в dataLayer. Около 65 строк, без библиотек.

Попробовать
Показывает пример отчёта, а не запуск в вашем аккаунте.
dataLayer
Пока пусто
GTM Custom HTML Tag (JavaScript)
<script>
(function() {
  function fireConfetti() {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: 'growth_milestone_unlocked',
      timestamp: new Date().toISOString()
    });

    var canvas = document.createElement('canvas');
    canvas.style.cssText = 'position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:999999;pointer-events:none;';
    document.body.appendChild(canvas);

    var ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    var colors = ['#16A34A', '#2563EB', '#F59E0B', '#EC4899', '#8B5CF6'];
    var particles = [];
    for (var i = 0; i < 100; i++) {
      particles.push({
        x: canvas.width / 2,
        y: canvas.height / 2 - 50,
        vx: (Math.random() - 0.5) * 16,
        vy: (Math.random() - 0.8) * 18,
        size: Math.random() * 8 + 5,
        color: colors[i % colors.length],
        gravity: 0.35,
        tilt: Math.random() * 10
      });
    }

    var frame = 0;
    function render() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      for (var j = 0; j < particles.length; j++) {
        var p = particles[j];
        p.x += p.vx;
        p.y += p.vy;
        p.vy += p.gravity;
        p.tilt += 0.1;
        ctx.fillStyle = p.color;
        ctx.fillRect(p.x, p.y, p.size, p.size * Math.cos(p.tilt));
      }
      frame++;
      if (frame < 160) requestAnimationFrame(render);
      else canvas.remove();
    }
    render();

    var badge = document.createElement('div');
    badge.style.cssText = 'position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#16A34A;color:#fff;padding:14px 24px;border-radius:100px;box-shadow:0 10px 30px rgba(22,163,74,0.4);font-family:sans-serif;font-weight:600;font-size:14px;z-index:9999999;animation:fadeIn 0.3s ease;';
    badge.innerText = "🎉 Milestone Unlocked: 15% Consulting Discount Applied!";
    document.body.appendChild(badge);
    setTimeout(function() { badge.remove(); }, 5000);
  }

  window.__goodlabs_confetti = fireConfetti;
})();
</script>

Как это работает

  1. Внедряет полноэкранный прозрачный canvas поверх страницы.
  2. Генерирует 100 квадратов со случайной скоростью и цветом и одинаковой гравитацией.
  3. Анимируется на requestAnimationFrame 160 кадров, затем удаляет canvas. Бейдж со скидкой держится 5 секунд.
  4. Пушит событие growth_milestone_unlocked в dataLayer.

Инструкция по установке

  1. Создайте тег Custom HTML в GTM с кодом выше.
  2. Назначьте триггер успешной отправки формы заявки или страницы Thank You.
  3. Проверьте срабатывание в GTM Preview.

Частые вопросы

Можно ли привязать к клику по кнопке?

Назначьте тегу триггер клика вместо триггера успешной отправки формы. Код не зависит от того, какой триггер его запустил.

Нужен скрипт под вашу задачу?

Пишем скрипты Google Ads, настраиваем server-side GA4 и собираем отчётность под конкретные вопросы бизнеса.