程序员经验分享-hwhale

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

2023-12-30

我已经提出了在我构建的 React js 应用程序中添加 adobe Analytics 的要求。

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

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

我只能找到谷歌分析样本在这里 https://github.com/zeit/next.js/tree/canary/examples/with-google-analytics在官方文档中，但在 adobe 中没有..

完整的示例工作应用程序代码在这里...... https://codesandbox.io/s/fervent-resonance-2k7xd

索引.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 here, https://docs.adobe.com/content/help/en/experience-manager-65/developing/headless/spas/spa-ssr.html https://docs.adobe.com/content/help/en/experience-manager-65/developing/headless/spas/spa-ssr.html但它没有提供有关代码内部实现的必要细节。

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

正如问题标题所示，我需要adobe 分析实施和严格来说不是谷歌分析..

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


Step 1:

下载AppMeasurement.js文件。它不适用于访客用户，但应可供登录的付费用户使用。从here https://docs.adobe.com/content/help/en/analytics/implementation/js/overview.html有关如何下载文件的更多信息，请参阅here https://docs.adobe.com/help/en/analytics/implementation/other/dtm/analytics-tool/t-appmeasurement-code.html.

Step 2:定义配置变量AppMeasurement.js文件。完整的详细信息在这里，但为了方便起见，我将在此处复制。

改变userID and 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";

Step 3:

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

import Head from 'next/head';

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

}

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

参考 ：

  1. JS 实现 https://docs.adobe.com/content/help/en/analytics/implementation/js/overview.html
  2. 插入代码 https://docs.adobe.com/help/en/analytics/implementation/other/dtm/analytics-tool/t-appmeasurement-code.html
  3. 有关将 JSX 添加到标头的更多信息 https://nextjs.org/docs/api-reference/next/head
  4. https://docs.adobe.com/content/help/en/analytics/implementation/other/dtm/t-analytics-deploy.html 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 https://docs.adobe.com/content/help/en/analytics/implementation/launch/overview.html
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

ReactJS

ReactNative

Nextjs

adobeanalytics

如何在 Next Js (React) 中实施 adobe 分析？ 的相关文章

随机推荐

热门标签