How to implement adobe analytics in Next Js (React )?

Asked 24/2, 2020 at 12:32 Answered 18/3, 2021 at 13:1

javascript reactjs react-native next.js adobe-analytics

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.

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

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

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?

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.

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

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

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

Kandi answered 24/2, 2020 at 12:32 Comment(2)

Do you want it to be server rendered? Or is it ok even if it is client rendered? Generally for Analytics it does not matter if it is SSR or CSR – Adamite 29/2, 2020 at 9:43

@Tessaracter, Yes I need to implement Adobe analytics in nextjs application which almost is SSR.. I have also provided sample code in that example I am in the need to apply Adobe analytics which is the requirement.. – Kandi 1/3, 2020 at 13:5

Step 1:

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

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

Change the 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:

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>
....

}

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.

References :

Adamite answered 1/3, 2020 at 13:59 Comment(4)

@Test User If you find it helpful do upvote. If it solved the problem pls accept the answer. If you are facing any issues do comment here – Adamite 7/3, 2020 at 15:22

This is still not resolved.. I have already given codesandbox, please make your solution work in codesandbox with adobe analytics implementation.. I will then implement it into my project and will do the needful.. – Kandi 6/4, 2020 at 15:0

@TestUser Stackoverflow is not a place to ask someone else to do your job. This is not a place you ask your homework. You cannot ask someone to implement on codesandbox. This is unreasonable. – Adamite 6/4, 2020 at 15:41

No problem and thanks for your help.. But unfortunately this doesn't help.. Moreover I have given my code in sandbox, I am just asking if possible you implement the solution in sandbox for better understanding and nothing more.. I am not forcing you.. Once again thanks for the help.. – Kandi 7/4, 2020 at 1:16

If you're server side rendering wouldn't it be possible to just drop a one liner from Adobe post render? "Adobe Experience Platform Launch: The standardized and recommended method to implement Adobe Analytics. Place a loader tag on each page, and use Launch’s interface to determine how each variable is defined" from Adobes documentation https://experienceleague.adobe.com/docs/analytics/implementation/home.html#key-analytics-implementation-articles

Ideally you don't want to spend time intertwining the nextJS code with Adobe and just use a separate tool to capture the events

How would you implement Adobe on a static page?

Gone answered 18/3, 2021 at 13:1 Comment(0)

-1

Your best resource will be the examples directory in nextjs repository.

Check the Google Analytics implementation and you can get a basic idea on how to do it.

But summarizing, you need to:

1) Add analytics script to Head component in _document.js Page

<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) Listen for page change event on _app.js Page, and manually trigger the action with your analytics lib api.

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

p.s.: If you don't have custom _app and _document pages you may need to create them

Mandarin answered 24/2, 2020 at 17:50 Comment(3)

Thanks for your answer.. But i am in the need to implement Adobe analytics and not google analytics.. – Kandi 25/2, 2020 at 4:25

Well, all the steps are there. It's not hard to figure what you need to change. Just check Adobe docs for AJAX – Mandarin 25/2, 2020 at 16:54

Really I am unable to find anything useful related with this question in the link provided docs.adobe.com/content/help/en/analytics/implementation/other/….. If possible please provide a correct example in using adobe with next js.. – Kandi 26/2, 2020 at 4:25

Recommended topics

Hot tags