当 ReactJS 遇上 Facebook Audience Network 移动网络原生广告

Question

有人知道在React.js中生成虚拟DOM时如何处理fb:ad标签吗？

编译jsx/babel文件时出现错误：

Namespace tags are not supported. ReactJSX is not XML.

下面是the layout of native ads of mobile web of facebook audience network

的示例代码

<body>
    <fb:ad placementid="[PLACEMENT_ID]" format="native" nativeadid="ad_root"></fb:ad>
    <div id="ad_root">
        <a class="fbAdLink">
            <div class="fbAdMedia thirdPartyMediaClass"></div>
            <div class="fbAdTitle thirdPartyTitleClass"></div>
            <div class="fbAdBody thirdPartyBodyClass"></div>
            <div class="fbAdCallToAction thirdPartyCallToActionClass"></div>
        </a>
    </div>
</body>

Answer 1

Facebook 意识到其 mWeb Audience 网络源代码的内部性质，并修改了其显示其网络原生广告组件的方式。他们现在使用带有脚本中引用的 ID 的标准 div。在这种情况下，您需要使用以下代码来呈现 Facebook 原生广告元素（获取 class 或分配 ID）：

<body>    <div class="fb-ad" data-placementid="[YOUR_PLACEMENT_ID]" data-format="native" data-nativeadid="ad_root" data-testmode="false"></div>

<div id="ad_root">
      <a class="fbAdLink">
        <div class="fbAdMedia thirdPartyMediaClass"></div>
        <div class="fbAdTitle thirdPartyTitleClass"></div>
        <div class="fbAdBody thirdPartyBodyClass"></div>
        <div class="fbAdCallToAction thirdPartyCallToActionClass"></div>
      </a> </div>

当 ReactJS 遇上 Facebook Audience Network 移动网络原生广告

When ReactJS meets Facebook Audience Network Mobile Web Native Ads

facebook

reactjs

react-jsx

facebook-audience-network