Gatsby js/React js 中的 Facebook 像素-6ren

Gatsby js/React js 中的 Facebook 像素

转载作者：行者123 更新时间：2023-12-02 22:02:45

25

4

我最近使用 gatsbyjs 开发了网站，我想在网站上使用 facebook 转换像素(以及 Google 分析)。我需要想法或帮助来使其发挥作用，以便我可以转换转化类型的广告。如果你像一个 5 岁的 child 一样对我说话，那将会有很大帮助。

呈现 <head> 的代码是:

module.exports = React.createClass({
  propTypes () {
    return {
      body: React.PropTypes.string,
    }
},

render () {
  const head = Helmet.rewind()
  let css
  if (process.env.NODE_ENV === 'production') {
  css = <style dangerouslySetInnerHTML={{ __html: require('!raw!./public/styles.css') }} />
    }

return (
  <html lang="en">
    <head>
      <meta charSet="utf-8" />
      <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
      <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
      />
      {head.title.toComponent()}
      {head.meta.toComponent()}
      <TypographyStyle typography={typography} />
      <GoogleFont typography={typography} />
      {css}
    </head>
    <body>
      <div id="react-mount" dangerouslySetInnerHTML={{ __html: this.props.body }} />
        <script src={prefixLink(`/bundle.js?t=${BUILD_TIME}`)} />
      </body>
    </html>
      )
    },
  })

我的 Facebook 像素如下所示:

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

最佳答案

React 不允许您直接在 script 标记中嵌入可运行的代码。相反，您需要使用听起来很奇怪的 API dangerouslySetInnerHTML。您的代码应类似于:

<script
  dangerouslySetInnerHTML={{ __html: `
    !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', 'pixelID');
    fbq('track', 'PageView');
  `}}
/>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=pixelID&ev=PageView&noscript=1"
/></noscript>

将此代码添加到 html.js 页面的底部，它应该可以正常执行。

关于Gatsby js/React js 中的 Facebook 像素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40109828/

25

4

0

文章推荐： javascript - 有没有办法在警报框中显示对象的输入值？

文章推荐： hadoop - 尝试执行 Hive 命令时出错

文章推荐： html - 以纯文本格式从小节中获取数据

gatsby - 如何在 Gatsby-plugin-image 中将图像路径作为 Prop 传递给 Gatsby
我正在尝试将图像的路径作为 Prop 传递给组件注意:组件和索引页都可以通过相同的路径访问图像。当我将路径作为 Prop 传递时它不起作用在下面的代码中，我尝试使用 GatbsyImage 和 S
gatsby - 使用 gatsby 谷歌字体插件时仍然会出现无样式文本
我在 gatsby 中的主要字体是在 index.scss 文件夹中定义的，就像这样在 body 标签中。 body { font-family: "Trebuchet MS", "Helveti
gatsby - Strapi & Gatsby 图像问题
我一直在遵循以下步骤:https://github.com/strapi/gatsby-source-strapi 由于 image >> publicURL 也不起作用，我重新安装了最新版本的 ga
gatsby - 如何从索引中排除 gatsby 创建的页面？
语境 Gatsby ， headless CMS 奇迹，旁边是 gatsby-plugin-advanced-sitemap 使生成一个强大的 sitemap.xml文件轻而易举。该插件支持通过 s
gatsby - 如何将两个 Gatsby 站点组合在一起
目前，我有两个使用 gatsby.js 开发的站点部署到 example.com 和 blog.example.com。我想创建一个 blog.example.com 的子目录到 example.co
gatsby - 人们如何在现实世界中使用 gatsby-image？
我一直在学习本教程 https://www.gatsbyjs.org/packages/gatsby-image/#art-directing-multiple-images但普通人不可能写出 50
gatsby - 如何对嵌套数据使用 Gatsby createResolver
我正在使用 Gatsby 的 createResolver API 将 markdown 转换为 html。它在顶层数据上运行良好。但是，我无法让它在嵌套更深的数组上工作。这是有效的: functi
gatsby - 如何在 Gatsby 中的页面之间传递数据？
当我使用 Gatsby (V2) 路由到新页面时，我正在尝试传递数据我希望然后能够检索该页面上的数据。这可能吗？我已经研究了很多但没有运气所以我觉得我一定错过了什么......谢谢最佳答案如果你
gatsby - 如何更改 Gatsby 博客文章页面的生成路径？
默认情况下，我的 Gatsby 网址类似于 2018-09-06-hexagon 有什么办法可以让他们变成/blog/2018/09/06/hexagon ? 这是我的 gatsby-node.js
gatsby - 如何在 gatsby 源插件上加载本地镜像？
我有一个 json 文件和一个包含图像的文件夹 plugins/ └── gatsby-source-cars/ ├── images/ ├── cars.json └── g
gatsby - WorkerError，无法处理图像。 Gatsby
在生产环境中运行 gatsby。 16. 在开发机器上工作。来自服务器的错误: success write out redirect data - 0.002s success Build mani
gatsby - 由于尖锐而无法安装 gatsby starter
当我想安装 gatsby starter 时，我在终端中遇到了这些错误。任何人都知道如何解决它？ [4/4] 🔨 Building fresh packages... [6/13] ⠁ shar
gatsby - 使用 gatsby 创建新项目的命令不起作用
我正在创建一个名为“new-app”的项目。成功安装 gatsby 后，我尝试运行命令“gatsby new my-app”。我总是收到一个错误，其中指出: ERROR eating new site
gatsby - 在公司防火墙后面运行 Gatsby cli
我无法使用 gatsby cli 克隆 gatsby-starter-default.git，因为它使用的“git”url 被我们的防火墙规则阻止我也尝试将以下内容添加到 git config 但仍
gatsby - 使用 gatsby 创建新项目的命令不起作用
我正在创建一个名为“new-app”的项目。成功安装 gatsby 后，我尝试运行命令“gatsby new my-app”。我总是收到一个错误，其中指出: ERROR eating new site
gatsby - 如何使用带有 gatsby-source-sanity 的 sanity.io 和 gatsby 中的内部链接？
我按照健全性文档创建了一个 internalLink 类型，并根据有关将 internalLinks 与 graphql api 一起使用的提示，我将其创建为单独的类型，如下所示: export de
gatsby - "x-robots-tag: none"在 Gatsby Cloud 托管的 Gatsby 网站上，内容丰富
我创建了由 Gatsby Cloud(个人试用计划)托管并使用 Contentful 的 Gatsby.js 网站。虽然我没有设置 Robot.txt，但生产站点自动在 HTTP header 处添加
gatsby - "Gatsby-plugin-sharp wasn' t 在 gatsby-config.js 中正确设置。确保将它添加到插件数组中。”
最令人沮丧的部分是我之前有这个工作然后不知何故破坏了它，但我正在使用 gatsby-plugin-sharp 和 gatsby-plugin-image 将照片添加到我的主页并看到这个错误: Gats
gatsby - "x-robots-tag: none"在 Gatsby Cloud 托管的 Gatsby 网站上，内容丰富
我创建了由 Gatsby Cloud(个人试用计划)托管并使用 Contentful 的 Gatsby.js 网站。虽然我没有设置 Robot.txt，但生产站点自动在 HTTP header 处添加
gatsby - "Gatsby-plugin-sharp wasn' t 在 gatsby-config.js 中正确设置。确保将它添加到插件数组中。”
最令人沮丧的部分是我之前有这个工作然后不知何故破坏了它，但我正在使用 gatsby-plugin-sharp 和 gatsby-plugin-image 将照片添加到我的主页并看到这个错误: Gats

首页

博学

6Ren·AI

商城

Gatsby js/React js 中的 Facebook 像素