反应页面中的Facebook像素

时间:2019-02-15 00:33:18

标签: reactjs facebook gatsby

对于某些人来说,这可能是最简单的问题,但是我不知道如何添加Facebook像素事件来响应页面。我正在使用Gatsbyjs,并尝试在/ thank-you页面上添加综合浏览量事件。

import React from 'react';
import '../../components/genflow.sass';
import Helmet from '../../components/helmet';
import Navbar from '../../components/navbar';
import Footer from '../../components/footer';

const ThankYouPage = () => (

<div>
<Helmet/>

  <section className="hero influencer-hero page-hero gradientBg">
        <Navbar />
        <div className="hero-body page-body">
            <div className="container center">
                <article className="media">
                    <div className="media-content">
                        <div className="content">
                            <h1 className="is-size-2 has-text-white">
                                Thank you
                            </h1>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </section>

    <section className='section'>
      <div className='container'>
          <div className='columns'>
            <div className='column title-col is-10 is-offset-1'>
              <div className='content'>
                <div className='has-text-centered'>

                  <p>Thank you for your message. We will get back to you soon.</p>

                </div>
              </div>
            </div>
          </div>
      </div>
    </section>

<Footer/>

</div>

);

export default ThankYouPage;

如果在页面末尾使用 dangerouslySetInnerHTML 添加fb像素脚本,则会出现错误。不确定什么是最好的解决方案。我是编程的新手,所以请耐心等待。谢谢

1 个答案:

答案 0 :(得分:1)

确保已安装gatsby-plugin-facebook-pixel。 然后将组件从功能组件更改为类组件,并将其添加到componentDidMount中。

if (typeof window !== "undefined") {
  if (window.fbq != null) { 
    window.fbq('track', 'PageView')
  }
}

希望这会有所帮助。