如何在 Next Js (React) 中实现 adobe 分析？

IT技术 javascript reactjs react-native next.js adobe-analytics
2021-05-17 16:20:24

我已经要求在我构建的 react js 应用程序中添加 adobe 分析。

请向我道歉，我对如何实施它没有任何基本的想法/理解，因此专家的帮助对我非常有帮助。

要求是我需要在next js with typescript我内置的项目中实现adobe analytics ..

我只能在官方文档中找到谷歌分析示例，但在 adobe 中找不到。

完整的示例工作应用程序代码在这里...

索引.tsx：

import React from "react";
import Container from "@material-ui/core/Container";
import Typography from "@material-ui/core/Typography";
import Box from "@material-ui/core/Box";
import Link from "../src/Link";

export default function Index() {
  return (
    <Container maxWidth="sm">
      <Box my={4}>
        <Typography variant="h4" component="h1" gutterBottom>
          Next.js with TypeScript example
        </Typography>
        <Link href="/about" color="secondary">
          Go to the about page
        </Link>
      </Box>
    </Container>
  );
}

从链接中提供的源代码中，请帮助我应该从哪里开始以及我应该如何实施 Adob​​e Analytics？

我在这里找到了SSR的链接， https://docs.adobe.com/content/help/en/experience-manager-65/developing/headless/spas/spa-ssr.html但它没有提供有关代码内部实现。

在此处提出查询：https : //github.com/zeit/next.js/discussions/10679但我无法从任何人那里获得适当的帮助..

正如问题标题所示，我需要adobe 分析实施，而不是谷歌分析。

我谦虚的请求，请通过分叉上述具有工作条件的代码和框来提供解决方案。

3个回答

步骤1：

下载AppMeasurement.js文件。它不适用于访客用户，但应该可供登录的付费用户使用。从这里 有关如何下载文件的更多信息，请单击此处。

第二步： 在AppMeasurement.js文件中定义配置变量。完整的细节在这里，但为了方便起见，我会在这里复制。

更改userID和trackingServer。

var s_account = "examplersid"; // Change this
var s=s_gi(s_account); // Instantiation
s.trackingServer = "example.omtrdc.net"; // Change this

// Page Level variables

s.pageName = "Example page";
s.eVar1 = "Example eVar";
s.events = "event1";

第 3 步：

然后将它们添加到您<head>的文档中。您可以通过将其添加到_document.js文件中来做到这一点。或者使用 Next.jsnext/headmodule在每页中包含它。以下是将其包含在<Head>Next.js module中的代码。（确保 的路径AppMeasurement.js适用于每个页面。）

import Head from 'next/head';

export default () => {
....
  <Head><script src="AppMeasurement.js"></script></Head>
....

}

我自己没有使用 Adob​​e Analytics，因为它是一项付费服务​​。但是已经与其他几个基于 JS 的分析平台合作过。我认为上述程序应该有效。如果遇到任何问题，请告诉我。

参考 ：

  1. JS实现
  2. 插入代码
  3. 有关将 JSX 添加到标头的更多信息
  4. https://docs.adobe.com/content/help/en/analytics/implementation/other/dtm/t-analytics-deploy.html
  5. https://docs.adobe.com/content/help/en/analytics/implementation/launch/overview.html

如果您是服务器端渲染，难道不能只从 Adob​​e 后期渲染中删除一个衬垫吗？“Adobe Experience Platform Launch：实施 Adob​​e Analytics 的标准化和推荐方法。在每个页面上放置一个加载程序标签，并使用 Launch 的界面来确定如何定义每个变量”来自 Adob​​es 文档https://experienceleague.adobe.com/docs /analytics/implementation/home.html#key-analytics-implementation-articles

理想情况下，您不想花时间将 nextJS 代码与 Adob​​e 交织在一起，而只想使用单独的工具来捕获事件

您将如何在静态页面上实施 Adob​​e？

您最好的资源将是nextjs 存储库中的示例目录。

检查Google Analytics 实施，您可以获得有关如何执行的基本想法。

但总而言之，您需要：

1）在_document.js页面的Head组件中添加分析脚本 

<Head>
{/* Global Site Tag (gtag.js) - Google Analytics */}
  <script
    async
    src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
  />
  <script
    dangerouslySetInnerHTML={{
      __html: `
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', '${GA_TRACKING_ID}', {
      page_path: window.location.pathname,
    });
  `,
    }}
  />
</Head>

2) 监听 _app.js 页面上的页面更改事件，并使用您的分析库 api 手动触发操作。

Router.events.on('routeChangeComplete', url => gtag.pageview(url))

ps：如果您没有自定义_app 和 _document 页面，您可能需要创建它们

其它你可能感兴趣的问题
上一篇react：element.getBoundingClientRect 不是函数 下一篇如果“react”是“react”的默认导出，为什么我们不能使用其他名称而不是“react”