Как использовать Facebook Pixel с Next.js
Next.js - это круто. Это мой фреймворк при создании целевых страниц, блогов и статических страниц в целом. Но иногда мы натыкаемся на вещи, которые иначе легко сделать с другим стеком.
Одна из таких вещей - пиксели Facebook. Чтобы заставить их работать с Next, нужно кое-что обойти. И вот чему я сегодня научу. Кроме того, вы получите компонент многократного использования, который позволит вам легко и без усилий добавлять пиксели. Следовать по…
Сначала перейдите туда, где вы храните свои компоненты (не страницы), и создайте новую папку с именем Pixel. Внутри него создайте еще одну папку с именем facebook.
Теперь мы собираемся адаптировать пиксель Facebook для работы с Next.js. Для справки, пиксель facebook изначально выглядит так:
Но наш пиксель будет другим. Внутри этой facebook папки, которую вы только что создали, создайте файл с именем pixel-1.js со следующим:
Найдите минутку, чтобы сравнить их обоих. Обратите внимание, что все, что мы сделали, это взяли весь контент из тегов <script> и <noscript> и вставили их в свойство __html опоры dangerouslySetInnerHTML. Это все, что нам нужно.
Обратите внимание: я изменил параметр facebook id на XXXXXXXX
Теперь внутри папки Pixel создайте файл index.js и заполните его следующим кодом:
Опять же, найдите время, чтобы осознать, что мы здесь сделали. На самом деле все просто. Каждый раз, когда пользователь передает свойство name как FACEBOOK_PIXEL_1, мы добавляем соответствующий пиксель Facebook в <head> HTML-документа. Этого удалось добиться с помощью компонента <Head> из next.js.
Наконец, на любой из ваших страниц, когда вы хотите отобразить пиксель Facebook, просто сделайте следующее:
А затем вы можете проверить, сработало ли это, проверив свой источник! Вот и все. Удачного кодирования, ребята!
