本文介绍了如何在 Next Js (React) 中实现 adobe 分析?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I have given the requirement to add adobe analytics in the react js application that I have built.

请原谅我对如何实现它没有任何基本的想法/理解,所以专家的帮助对我很有帮助.

Please apologize me that I don't have any basic idea/ understanding on how to implement it, So help from experts would be very helpful for me.

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

Requirement is that I need to implement the adobe analytics in the next js with typescript project that I have built in..

我只能在这里找到 谷歌分析示例 在官方文档中,但不是 adobe..

I could find only google analytics sample here in official documentation but not 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?

From the source code given in the link, please help me where should I start and how exactly should I need to implement Adobe Analytics?

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

I found the link for SSR here, https://docs.adobe.com/content/help/en/experience-manager-65/developing/headless/spas/spa-ssr.html but it doesn't provide necessary details about implementation inside code.

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

Raised a query here: https://github.com/zeit/next.js/discussions/10679 but I couldn't get the appropriate help from anyone..

正如问题标题所示,我需要 adobe analytics 实施和严格来说不是 google analytics..

As like the question title indicates, I am in the need of adobe analytics implementation and strictly not google analytics..

我谦虚的请求,请通过分叉上述codeandbox的工作条件提供解决方案.

I humble request, please provide the solution by forking the above codesandbox with working condition.

推荐答案

第一步:

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

Download the AppMeasurement.js file. It is not available for guest user but should be available for logged in paid user. from hereMore on how to download the file is available here.

第 2 步:AppMeasurement.js 文件中定义配置变量.完整的细节在这里,但为方便起见,我将在这里复制.

Step 2:Define the configuration variables in the AppMeasurement.js file. The complete details are here but I will reproduce here for convenience.

更改 userIDtrackingServer.

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 的路径适合每个页面.)

Then add them to your <head> of the document. You can do this by adding it to the _document.js file. Or include it per page using the Next.js next/head module. The following is the code to include it in the <Head> module of Next.js. (Ensure that the path of AppMeasurement.js is appropriate for each page.)

import Head from 'next/head';

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

}

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

I have myself not used Adobe Analytics considering it to be a paid service. But have worked with several other JS based analytics platforms. I think the above procedure should work. Let me know if face any issue.

参考资料:

  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

这篇关于如何在 Next Js (React) 中实现 adobe 分析?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-23 06:23
查看更多