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

Question

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

javascriptreactjsreact-nativenext.jsadobe-analytics

10

我已经提出要在我建立的React.js应用程序中添加Adobe Analytics的要求。

非常抱歉我对如何实现它没有任何基本的想法/理解，所以专家的帮助对我来说将非常有帮助。

要求是我需要在我建立的next js with typescript项目中实现Adobe Analytics。

在官方文档中，我只能找到Google Analytics示例，但没有Adobe Analytics的样本。

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

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。

我在这里找到了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 Analytics而严格不使用Google Analytics。

我恳求，请通过fork上面的CodeSandbox并提供工作条件来提供解决方案。

- user12856847

你想让它在服务器端渲染吗？或者即使是客户端渲染也可以吗？通常对于分析来说，无论是SSR还是CSR都没有关系。 - Trect

@Tessaracter，是的，我需要在几乎是SSR的nextjs应用程序中实现Adobe分析。我还提供了示例代码，在那个示例中，我需要应用要求的Adobe分析。 - user12856847

3个回答

0

如果您正在进行服务器端渲染，那么是否可以在 Adobe 渲染后仅添加一行代码？ "Adobe Experience Platform Launch：实现 Adobe Analytics 的标准和推荐方法。在每个页面上放置一个加载器标签，并使用 Launch 的界面确定如何定义每个变量"，来自 Adobe 文档 https://experienceleague.adobe.com/docs/analytics/implementation/home.html#key-analytics-implementation-articles

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

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

- climboid

-1

你最好的资源将是Next.js存储库中的示例目录。

检查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))

附注：如果您没有自定义的{{link1：_app和_document页面}}，则可能需要创建它们

- Italo Ayres

1

谢谢你的回答。但我需要实现 Adobe 分析，而不是 Google 分析。 - user12856847

好的，所有步骤都在那里。弄清楚需要更改什么并不难。只需查看Adobe AJAX文档。 - Italo Ayres

实际上，我在提供的链接https://docs.adobe.com/content/help/en/analytics/implementation/other/ajax.html中未能找到与此问题相关的任何有用信息。如果可能的话，请提供一个正确的示例，演示如何在Next.js中使用Adobe。 - user12856847

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Trect · Accepted Answer

步骤1：

下载AppMeasurement.js文件。该文件不适用于访客用户，但应该对已登录的付费用户可用。从此处下载。

有关如何下载文件的详细信息，请参见此处。

步骤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";

第三步：

接下来将它们添加到文档的 <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的分析平台。我认为上述步骤应该有效。如果遇到任何问题，请告诉我。

参考文献：