Как добавлять скрипты счетчиков на страницы React?

Question

[Андрей Охотников]

Необходимо интегрировать несколько сервисов в приложения на react и react-narive. В инструкциях предусмотрено добавление скриптов на каждую страницу
Например код

<script>(function(w, d, s, p) { var f = d.getElementsByTagName(s)[0], j = d.createElement(s); j.async = true; j.src = '//cdn.rutarget.ru/static/tag/tag.js'; f.parentNode.insertBefore(j, f); w[p] = {rtgNoSync: false, rtgSyncFrame: true}; })(window, document, 'script', '_rtgParams');</script>

А затем при некоторых действиях вызывать код

var _rutarget = window._rutarget || [];
_rutarget.push({'event': 'showOffer'});

Так вот как это правильно реализовать на React?

Answer 1

[Антон Спирин]

1. Добавляем скрипт в html шаблон к которому крепится приложение.
2. Инициализируем пустой массив в точке входа:
window._rutarget = [];
3. Пользуемся в любой части приложения:
window._rutarget.push({ 'event': 'showOffer' });

Можно написать свою обертку:

window._rutarget = [];

const AdService = {
  showOffer() {
    window._rutarget.push({'event': 'showOffer'});
  }, 
};

export default AdService;

В React Native тэг script использовать не получится, можно разве попробовать использовать WebVIew.

Comments

[Андрей Охотников]

Спасибо, а как добавлять подобные счетчики в приложение без webview?

[Антон Спирин]

Андрей Охотников, тут только искать решение для React Native или решение с API. Ну либо reverse engineering и писать свою библиотеку, которая будет слать запросы по нужным адресам с нужными параметрами.

[Андрей Охотников]

Антон Спирин, а ведь если есть скрипт с какой то самовызывающейся функцией, почему я не могу при инициализации компонента страницы просто вызвать эту функцию без подключения тега script? Это так не работает?

[Антон Спирин]

Андрей Охотников, потому что эти скрипты работают с браузерными API.