在 React 上实现 Bing Pixel（UET 标签）

Question

我的任务是在 React 应用程序的每个页面上实施 Microsoft 的 UET 标签。我成功地将其添加到 defaultLayout 组件中，以确保设置 UET Tag 的功能在每个页面上运行。但是，似乎存在一个问题，因为标签只出现在每隔一个页面上。例如，它会出现在第 1 页，但不会出现在第 2 页。然后，当从第 2 页移动到第 3 页时，它会再次显示。但是，当从第 3 页返回第 1 页时，标签不会出现。为了确认 UET 标签是否正在运行，我被指示使用 UET 标签助手。

代码如下：

defaultLayout.js

import { useEffect } from "react";
import { Outlet } from "react-router-dom";

const DefaultLayout = () => {

    const analytics = {
        bing: `Bing-ID-Goes-Here`
    }

    const createUETScript = async () => {
        if (!!document.getElementById(`bing-${analytics.bing}`)) {
            document.getElementById(`bing-${analytics.bing}`).remove();

        }

        var scriptParent = document.getElementsByTagName('script')[0];
        var script = document.createElement("script");
        script.id = `bing-${analytics.bing}`;

        script.text = `(function(w,d,t,r,u){var f,n,i;w[u]=w[u]||[],f=function(){var o={ti:"${analytics.bing}"};o.q=w[u],w[u]=new UET(o),w[u].push("pageLoad")},n=d.createElement(t),n.src=r,n.async=1,n.onload=n.onreadystatechange=function(){var s=this.readyState;s&&s!=="loaded"&&s!=="complete"||(f(),n.onload=n.onreadystatechange=null)},i=d.getElementsByTagName(t)[0],i.parentNode.insertBefore(n,i)})(window,document,"script","//bat.bing.com/bat.js","uetq");`
        // Note that the text script was given by the client and that the only modification made was setting the ID to a variable rather than being fixed
        script.setAttribute("async", "async");

        scriptParent.parentNode.insertBefore(script, scriptParent);

        console.log(`Bing Pixel: ${analytics.bing}`);
    }

    useEffect(() => {
        createUETScript();
    },[]);

    return <div>
        <Outlet/>
    </div>
}