Что такое явный и прямой код для пикселя Facebook

Question

(я все еще совершенствую этот вопрос, не стесняйтесь формулировать мой вопрос лучше для меня. Я завершил свой собственный ответ, и это должно помочь лучше сформулировать этот вопрос)

Явный - означает «прямой» в данной ситуации. Предоставляемая Facebook минимизирована и содержит отложенный инжектор тега script.

Как это разбивается на логические части, которые можно было бы более явно кодировать без минимизации и без отложенной загрузки скрипта? Как можно напрямую включить тег сценария для https://connect.facebook.net/en_US/fbevents.js?

Текущий установленный блок:

<!-- 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', 'your-pixel-id-goes-here');
  fbq('track', 'PageView');
</script>
<noscript>
  <img height="1" width="1" style="display:none" 
       src="https://www.facebook.com/tr?id=your-pixel-id-goes-here&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->

Почему может быть желательна версия explicit:

• Эффективность - которая может многое значить
• многословие и ясность
• Образование - чтобы узнать, как работают эти виды сценариев и как вы можете делать свои собственные
• Интеграция - у вас может быть что-то вроде SquareSpace, где вы принимаете идентификатор пикселя в качестве параметра для вашей интеграции с Facebook

Я планирую использовать рабочий ответ вместе с Как добавить javascript в существующий HTML-ответ с помощью node.js и работников cloudflare для себя. Поэтому, пожалуйста, не отвечайте словами «Вы не хотите этого, потому что я этого не хочу».

Answer 1

По состоянию на 2019-06-24 и с учетом текущего предписанного блока:

<!-- 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', 'your-pixel-id-goes-here');
  fbq('track', 'PageView');
</script>
<noscript>
  <img height="1" width="1" style="display:none" 
       src="https://www.facebook.com/tr?id=your-pixel-id-goes-here&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->

Есть 4 отдельные части:

1. Переменные окна и столкновение с двойной установкой. Код по умолчанию, кажется, загружает сценарий асинхронно и устанавливает функцию fbq для постановки команд в очередь до загрузки сценария.
2. Включение зависимого тега скрипта
3. Использование команд fbq для инициализации и отслеживания просмотра страницы
4. Загрузка изображения, если нет поддержки javascript

Предполагая, что у вас есть полный контроль над содержимым веб-страницы, и вы знаете, что не будет повторных попыток загрузить пиксель Facebook - это можно развернуть более явно с помощью:

1) Поместите загрузку этого скрипта перед следующим в разделе head

<script async src="https://connect.facebook.net/en_US/fbevents.js"></script>

2) Поместите этот переменный блок кода скрипта в заголовок после [1]

<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=[];}(window, document,'script'); //Same as usual but with the script injection part removed.

  fbq('init', 'your-pixel-id-goes-here');
  fbq('track', 'PageView');
</script>

3) Поместите эту секцию noscript в конец тела

<noscript>
  <img height="1" width="1" style="display:none" 
       src="https://www.facebook.com/tr?id=your-pixel-id-goes-here&ev=PageView&noscript=1"/>
</noscript>

(успешно протестировано)