时间戳

首页 > 解决方案 > 如何将状态传递给 gtm.js 函数？

javascript - 如何将状态传递给 gtm.js 函数？

问题描述

我是一家初创公司的实习生，我是唯一的前端开发人员。
我必须在 Next.js 中编写一个网站，我的老板让我添加 Google 跟踪代码管理器。
我按照 Next 在他们的 github 示例中给出的示例进行操作。
现在我的老板要求我在我的 gtm.js 中添加一个 searchTerm，如下所示：

export const GTM_ID = process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID;

export const pageview = (url) => {
  console.log("search ", searchCity);
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: "search",
    searchTerm: searchCity, //this should be dynamically replaced with an actual search query
    page: url,
  });
};

我在 _app.js 中声明了 searchCity 状态：

import GoogleTagManager from "../components/GoogleTagManager";

function MyApp({ Component, pageProps }) {
 
  // manage search queries
  const [searchCity, setSearchCity] = useState("");
  return (
    <GoogleTagManager>
      <Component
        {...pageProps}
        searchCity={searchCity}
        setSearchCity={setSearchCity}
      />
    </GoogleTagManager>
  );
}

export default MyApp;

但是如何将 searchCity 传递给函数 pageview ？
该功能位于应用程序组件之外的 googleTagManager 组件中，因此我无法将 searchCity 作为道具传递。

标签： javascriptreactjsfunctionnext.jsgoogle-tag-manager

解决方案

好吧，你会为函数命名第二个searchCity参数pageview：

export const pageview = (url, searchCity) => {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: "search",
    searchTerm: searchCity,
    page: url,
  });
};

在您的GoogleTagManager.js中，您可以像这样传递参数：

router.events.on("routeChangeStart", url => gtm.pageview(url, searchCity));

编辑：

您将它传递给_app.js中的错误组件。它应该如下所示：

<GoogleTagManager  searchCity={searchCity} setSearchCity={setSearchCity}>
  <Component
    {...pageProps}  
  />
</GoogleTagManager>

); }

现在您可以像这样在GoogleTagManager.js中对其进行解构：

const GoogleTagManager = ({ children, setSearchCity, searchCity}) => {

推荐阅读