Question

我已要求在我构建的react js应用程序中添加Adobe Analytics。

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

要求是我需要在内置的next js with typescript项目中实现adobe分析。

我在官方文档中只能找到google analytics sample here，而在adobe中找不到。

The complete sample working application code here...

Index.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>
  );
}

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

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

在此处提出了一个查询：https://github.com/zeit/next.js/discussions/10679，但我没有从任何人那里得到适当的帮助。

就像问题标题所指出的那样，我需要 adobe analytics 实施，并且严格不需要google Analytics。

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

Answer 1

步骤1：

下载AppMeasurement.js文件。它不适用于来宾用户，但应适用于已登录的付费用户。来自here here提供了有关如何下载文件的更多信息。

步骤2： 在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.js next/head模块将其包含在每页中。以下是将其包含在Next.js的<Head>模块中的代码。（确保AppMeasurement.js的路径适合每个页面。）

import Head from 'next/head';

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

}

我没有使用Adobe Analytics，因为它是一项付费服务。但是已经与其他几个基于JS的分析平台合作。我认为上述程序应能奏效。让我知道是否遇到任何问题。

参考文献：

Answer 2

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

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

您将如何在静态页面上实施 Adobe？

Answer 3

您最好的资源将是examples directory in nextjs repository。

选中Google Analytics implementation，您将获得基本的操作方法。

但概括地说，您需要：

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页面上的页面更改事件，并使用您的Analytics lib API手动触发操作。

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

p.s .：如果您没有自定义_app and _document pages，则可能需要创建它们

如何在Next Js（React）中实施Adobe Analytics？

3 个答案: