4

私は最近、gatsbyjs を使用してサイトを開発しました。サイトで Facebook 変換ピクセルを使用したいと考えています (Google アナリティクスと同様に)。コンバージョン タイプの広告を掲載できるように、それらを機能させるためのアイデアやサポートが必要です。5歳児のように話しかけてくれると、とても助かります。

レンダリングするコード<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 -->

4

5 に答える 5

6

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 ページの下部に追加すると、正常に実行されるはずです。

于 2016-10-19T16:39:13.413 に答える
0

最初のギャツビーでは、このようにスクリプトを使用できません。使用する必要があります。

   <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');
  `}}
/></script>

2 番目: noscript はできません。通常のスクリプトにする必要があります。次のようにします。

<script type="text/javascript" dangerouslySetInnerHTML={{
      __html: `
    <img height="1" width="1" style="display:none"
      src="https://www.facebook.com/tr?id=678059259599817&ev=PageView&noscript=1"
    />`}}></script>
于 2021-04-07T17:16:46.023 に答える