Счетчик упаковок на лендинге: фишка для товарщиков и нутровиков

Этот гайдик уже 3 года лежит в базе знаний для баеров из нашей команды, за который отдельное спасибо нужно сказать @arbitrajtt, уже если честно и не вспомню исходный материал, так как нужно было немного его разжевать для джунов. Так что ссылку искать не буду. А вот нашу версию закинем в блог, пусть ребятам тоже будет полезно, потому что смотрю спай, там прокладок с такой фишкой нет от слова совсем. 

Материал подготовлен арбитражной командой Uragan Team!

В чем смысл скрипта данного счетчика

Обычно арбитражники прогревают пользователей акциями, таймером обратного отсчета, что вот мол через 20 минут цена будет х2 — покупайте. И да, это рабочая тема, что можно понять по куче прокл в SPY-сервисах. И этот дополнительных счетчик никак не конфликтует с этим способом. Просто кроме него вы получите еще один счетчик ниже формы, где пользователь будет видеть, что “о боже, количество товара очень быстро сокращается” и играть на его чувстве упущенной выгоды и срочности.

Если до сих пор не поняли о чем речь — вот скриншот:

Как выглядит скрипт

Ну что же, с этим разобрались, давайте теперь про то, как это установить у себя. Ниже собственно весь код, который нам понадобиться. Что куда вставлять покажу ниже!

Стиль блока со счетчиком (ставить в css):

.container2 {

  margin-top: 10px;

  margin-bottom: 20px;

  padding: 10px;

  border-radius: 10px;

  background-color: red;

  color: #fff;

  font-size: 38px;

  line-height: 44px;

  font-weight: bold;

}

Вместо цифры количества упаковок:

<b class=”prod_left_val”>17</b>

Скрипт счетчика (ставить перед </body>):

<script>

    $(document).ready(function ($) {

      var number_objects,

        packageCount = 143,

        displayObject = $(‘.prod_left_val’);

      function loadRandom() {

        number_objects = packageCount + Math.floor(Math.random() * 1);

      }

      function decreaseRandom() {

        number_objects -= Math.floor(Math.random() * 2) + 1;

      }

      function showRandom() {

        displayObject.text(number_objects);

      }

      loadRandom();

      showRandom();

      var interval = setInterval(function () {

        decreaseRandom();

        showRandom();

        if (number_objects <= 5) {

          clearInterval(interval);

        }

      }, 9000);

    });

  </script>

Как сделать счетчик оставшихся упаковок на лендинге

Теперь поехали с пошаговой инструкцией! Важно — каждая прокла немного отличается визуалом кода, если видите, что у вас немного не так, то скормите статью GPT и скриншотами показывайте ему что у вас. Он направит вас по правильному пути. Работает безотказно!

В общем, открываем index.html и ищем то место, куда вы планируете вставить счетчик. Для нас логично его вставлять рядом с формой заказа. Обычно тут же вставляют колеса фортуны, боксы, двери и прочий интерактив. 

Если совсем не шарите в коде, то просто посмотрите какие фразы текста есть рядом и ищите в коде эти слова (можно через быстрый поиск command+F). Нам удобно расположить счетчик между сообщением об акции и формой заказа. Нашли фразу про окончание акции (выделено на скриншоте). Вот после и будем тулить наш код. 

Вставляем сроку <p class=”container2″>Осталось упаковок: <b class=”prod_left_val”>17</b></p>

Дальше листаем файл index.html до самого конца и перед тегом </body> вставляем сам скрипт счетчика. Можете его забрать в начале статьи. И не забывает нажать на “Сохранить”. Вот как это должно выглядеть:

Остается в правильное место закинуть стили. Для этого находим файл index.css или он может у вас называться style.css. В вставляем стиль блока со счетчиком внизу (вообще без разницы где, но для порядка). Полный код опять же дал выше.

Все, сохраняемся и идем проверять свою проклу! Ах да, самое главное, в скрипте есть вот такая строка “ }, 9000);“. Она задает правило, что счетчик активируется каждые 9 секунд. То есть по пачке товара уходит каждый 9 секунд. Если хотите ускорить — просто замените 9000 на 2000 или сколько вам нужно для реалистичности. 

Еще момент

Если у вас вдруг не работает данный скрипт, то вам нужно убедиться, что к прокле подключена библиотека  jQuery. Так как скрипт использует jQuery ($(document).ready()), поэтому библиотека jQuery должна быть подключена.

Убедитесь, что перед вашим скриптом (или в <head> вашего документа) есть подключение к библиотеке jQuery, например:

<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>

Если нет, то можете либо подключить библиотеку, либо юзать вот этот скрипт на чистом JS: 

‹script>

document.addEventListener (“DOMContentLoaded”, function () {

var number_objects,

packageCount = 143,

displayObject = document.querySelector(‘-prod_left_val’);

function loadRandom) <

number_objects = packageCount + Math. floor (Math. random () * 1);

}

function decreaseRandom ) ‹

number_objects -= Math.floor (Math. random () * 2) + 1;

}

function showRandom) ‹

displayobject.textContent = number_objects;

}

loadRandom () ;

showRandom () ;

var interval = setInterval (function ()

decreaseRandom () ; showRandom ();

if (number_objects < 5) 1 clearInterval (interval);

}

}, 9000);

}) ;

Резюме

Добавление счетчика оставшихся упаковок на лендинг — это простая, но эффективная фишка, которая усиливает эффект срочности и подогревает интерес пользователей. Этот элемент легко интегрируется в прокладку, дополняя стандартные маркетинговые инструменты, такие как таймеры обратного отсчета или акции.

Если вам нужны дополнительные советы или готовые решения, подписывайтесь на наш блог и делитесь своим опытом в комментариях! Всем профита!