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

问题描述

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

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

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

我只能在官方文档中找到谷歌分析示例，但在 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>
  );
}

从链接中给出的源代码中，请帮助我应该从哪里开始以及我应该如何实施 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 分析实施，而不是谷歌分析。

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

标签： javascriptreactjsreact-nativenext.jsadobe-analytics

解决方案

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

第 3 步：

然后将它们添加到您<head>的文档中。您可以通过将其添加到_document.js文件中来执行此操作。next/head或者使用 Next.js模块在每页中包含它。以下是将其包含在<Head>Next.js 模块中的代码。（确保的路径AppMeasurement.js适合每个页面。）

import Head from 'next/head';

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

}

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

参考：

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

问题描述

解决方案

推荐阅读