如何链接Facebook像素并做出反应?

时间:2020-07-02 15:54:33

标签: reactjs facebook-pixel

如何在不使用库的情况下链接Facebook像素并做出反应?

Public / index.html:

<head>
    <!-- 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 -->
</head>

产品购物车(ViewContent事件):

import React from 'react'; // When opening the product card, call ViewContent event

const ProductCart = () => {
  return (
    <div className="cart__product">Product</div>
  )
}  
...

目录产品(AddToCart活动):

import React from 'react';

const CatalogProducts = () => {
  return (
    <>
    <div className="product"><button>Add product 1</button></div> // AddToCart event
    <div className="product"><button>Add product 2</button></div> // AddToCart event
    <div className="product"><button>Add product 3</button></div> // AddToCart event
    </>
  )
}  
...

订单(购买事件):

import React from 'react';

const Order = () => {
  return (
    <button className="buy">Buy product</button> // Purchase event
  )
}  
...

请帮助我把这一切联系起来

0 个答案:

没有答案