Перейти к содержимому

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

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

Попробовать

Запускается на этой странице.
dataLayer
Пока пусто
Тег Custom HTML
<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;
  fireConfetti();
})();
</script>

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

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

Установка

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

Вопросы

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

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

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

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