настроить пиксель Facebook только для производства в ReactJS - PullRequest
Новая
       3

настроить пиксель Facebook только для производства в ReactJS

0 голосов
/ 02 января 2019

Я использую React в качестве внешнего интерфейса (а Rails - в качестве внутреннего).

Я настраиваю Менеджер событий в пикселях Facebook, чтобы отслеживать мои объявления в Facebook на моем сайте.

Поэтому я добавил этот скрипт в свой public / index.html: 

<!-- Facebook Pixel Code -->
<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', 'MYID');
  fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id=MYID&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

и в своих React Components я добавлял эту функцию обратного вызова каждый раз, когда нажимали кнопку и вызывали событие:

() => fbq('track', 'MyEvent');

Кажется, что это работает, хотя мои пиксели нужны только в производстве. Я не могу получить доступ к process.env.NODE_ENV в public/index.html.

Что я могу сделать, чтобы этот код использовался только в производстве?

Ответы [ 2 ]

0 голосов
/ 03 января 2019

благодаря @Dvid Silva и @Russ Brown я наконец выбрал следующее решение: создайте два отдельных файла index.html: dev-index.html и prod-index.html

в моем config/path.js: 

module.exports = {
#[...]
  appHtml: process.env.NODE_ENV === 'production' ? resolveApp('public/prod-index.html') : resolveApp('public/dev-index.html'),
#[...]
};

Оба индексных файла идентичны, за исключением того, что в производственном файле есть тег Facebook Pixel внутри тега <head>.

0 голосов
/ 02 января 2019

В большинстве моих простых приложений я выбираю управление этим путем печати переменной JS на html-странице. Я предпочитаю перейти на Handlebars, и я добавлю объект config в заголовок, который будет содержать что-то вроде. 

    <script type="application/javascript">
      var CONFIG = {
        fbPixel: '{{ fbPixel }}'
      }
    </script>

fbPixel происходит из файла конфигурации и заполняется только в промежуточных и производственных средах. В разработке это не определено / пусто. Быстрая и простая в настройке. В моих более сложных приложениях я, в основном, делаю то же самое, но в середине использую вспомогательную функцию для проверки и разрешения параметров по умолчанию.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...