Установка Нотифлоу на WordPress: код в тему или GTM

Нотифлоу на WordPress подключается обычной вставкой <script>-сниппета — отдельного плагина для этого не нужно. Чище всего сделать это через хук wp_head в functions.php дочерней темы: сниппет переживет обновление основной темы, не зависит от FTP и легко расширяется идентификацией пользователя. Альтернативы — прямая вставка в header.php или подключение через Google Tag Manager.

Что выбрать: хук wp_head, header.php или GTM?

Хук wp_head в дочерней теме — для большинства сайтов. Не зависит от темы, переживет обновления, легко добавить условную идентификацию для залогиненных пользователей.

Прямая вставка в header.php — самый простой вариант, но привязан к конкретной теме: при смене темы код потеряется. Подходит для разовой быстрой установки.

GTM — если в команде маркетолог управляет тегами через Tag Manager, и не хочется давать ему доступ к коду темы. Минус — еще одна зависимость в цепочке загрузки.

Способ 1: вставка через хук wp_head (рекомендуется)

В functions.php вашей дочерней темы добавьте функцию-хук:

add_action('wp_head', 'notiflow_widget_loader', 99);
function notiflow_widget_loader() {
    if (is_admin()) return;
    ?>
    <script>
        (function(w,d,s,o,f,js,fjs){
            w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
            js=d.createElement(s),fjs=d.getElementsByTagName(s)[0];
            js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
        }(window,document,'script','nw','https://cp.notiflow.ru/js/widget.js'));
        nw('init', {apiKey:'YOUR_API_KEY_UUID'});
    </script>
    <?php
}

YOUR_API_KEY_UUID замените на ключ из кабинета Нотифлоу («Подписка»). Проверка is_admin() исключает админку — там виджет не нужен. После сохранения откройте сайт в инкогнито — иконка чата появится через 1-2 секунды.

Для авторизованного пользователя сразу пробросьте идентификацию:

add_action('wp_head', 'notiflow_identify_user', 100);
function notiflow_identify_user() {
    if (!is_user_logged_in()) return;
    $user = wp_get_current_user();
    ?>
    <script>
      nw('identify', '<?= esc_js($user->ID) ?>', {
        email: '<?= esc_js($user->user_email) ?>',
        name: '<?= esc_js($user->display_name) ?>'
      });
    </script>
    <?php
}

Способ 2: вставка прямо в header.php

Если работаете без дочерней темы (что нежелательно — обновление основной темы сотрет правки), вставьте сниппет в header.php перед </head>:

<!-- В файле wp-content/themes/вашатема/header.php, перед </head> -->
<script>
    (function(w,d,s,o,f,js,fjs){
        w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
        js=d.createElement(s),fjs=d.getElementsByTagName(s)[0];
        js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
    }(window,document,'script','nw','https://cp.notiflow.ru/js/widget.js'));
    nw('init', {apiKey:'YOUR_API_KEY_UUID'});
</script>
</head>

Сразу после правки сбросьте кэш темы и плагин-кэширования.

Способ 3: подключение через Google Tag Manager

Если на сайте уже стоит контейнер GTM:

1. GTM → «Теги → Создать»
2. Тип тега — «Пользовательский HTML»
3. Вставьте <script> Нотифлоу из кабинета
4. Триггер — «Все страницы → All Pages»
5. Сохраните и опубликуйте версию контейнера

Плюс — маркетолог обновляет код без помощи разработчика. Минус — еще одна зависимость в цепочке загрузки. На критичных к скорости сайтах не лучший вариант.

Совместимость с WP Rocket, LiteSpeed Cache, W3 Total Cache

Нотифлоу — внешний скрипт с cp.notiflow.ru, кэш-плагины его не трогают. Конфликтов нет ни с одним из распространенных решений.

Но плагины с агрессивной оптимизацией JS (Autoptimize, LiteSpeed JS Combine) могут попытаться объединить и отложить инициализацию nw('init'). Это ломает виджет — он ждет глобальную функцию, которой еще нет.

Решение — добавить ключевое слово или домен в исключения JS Combine:

• WP Rocket → «File Optimization → JavaScript → Excluded Inline JavaScript» — добавьте nw(
• LiteSpeed Cache → «Page Optimization → JS Settings → JS Excludes» — добавьте cp.notiflow.ru
• Autoptimize → «JS, CSS & HTML → JavaScript → Exclude scripts from Autoptimize» — добавьте nw(

После правки исключений сбросьте кэш и проверьте сайт в инкогнито.

Установка на WooCommerce: триггеры на корзину и заказ

В WooCommerce полезно триггерить события Нотифлоу на ключевых шагах воронки. В functions.php дочерней темы:

add_action('woocommerce_add_to_cart', 'notiflow_track_add_to_cart', 10, 6);
function notiflow_track_add_to_cart($cart_item_key, $product_id, $quantity, $variation_id, $variation, $cart_item_data) {
    $product = wc_get_product($product_id);
    add_action('wp_footer', function() use ($product, $quantity) {
        ?>
        <script>
          if (window.nw) {
            nw('track', 'product_added', {
              product_id: <?= (int) $product->get_id() ?>,
              product_name: '<?= esc_js($product->get_name()) ?>',
              price: <?= (float) $product->get_price() ?>,
              quantity: <?= (int) $quantity ?>
            });
          }
        </script>
        <?php
    });
}

После этого в кабинете Нотифлоу можно настроить попап «брошенная корзина» — показывать через 2 минуты неактивности тем, кто добавил товар, но не оформил заказ. Сценарий описан в проактивных попапах для e-commerce.

Для события заказа используйте woocommerce_thankyou — оно срабатывает один раз на странице «Спасибо за заказ»:

add_action('woocommerce_thankyou', 'notiflow_track_purchase');
function notiflow_track_purchase($order_id) {
    $order = wc_get_order($order_id);
    ?>
    <script>
      if (window.nw) {
        nw('track', 'purchase', {
          order_id: '<?= esc_js($order_id) ?>',
          revenue: <?= (float) $order->get_total() ?>,
          currency: '<?= esc_js($order->get_currency()) ?>'
        });
      }
    </script>
    <?php
}

Как проверить, что чат не замедляет сайт?

После установки прогоните страницу через PageSpeed Insights (pagespeed.web.dev). Сравните три метрики до и после:

• LCP (Largest Contentful Paint) — не должен вырасти больше чем на 50 мс
• TBT (Total Blocking Time) — не должен вырасти больше чем на 30 мс
• Размер JS — +35 КБ gzipped (это сам Нотифлоу)

Если LCP вырос на 200+ мс — у вас проблема с загрузкой темы или конкурирующим скриптом, не с Нотифлоу. Подробнее про оптимизацию — в статье онлайн-чат WordPress без замедления.

Что делать, если чат не отображается?

1. Сбросьте кэш плагина (WP Rocket / LiteSpeed / W3 Total Cache)
2. Откройте сайт в инкогнито — обычная вкладка может держать старую версию
3. В DevTools Console проверьте ошибки. Failed to load cp.notiflow.ru/js/widget.js — проблема с сетью или AdBlock
4. Проверьте, что в Нотифлоу домен совпадает с реальным URL (с/без www, http/https)
5. Если стоит JS Combine от Autoptimize или LiteSpeed — добавьте nw( или cp.notiflow.ru в исключения

Часто задаваемые вопросы

Поставьте Нотифлоу на WordPress за 5 минут — создайте аккаунт, скопируйте сниппет из «Подписка» и вставьте в functions.php дочерней темы. Дальше пригодится статья онлайн-чат WordPress без замедления и установка на Tilda. Подробнее о виджете — на странице чата.