{"id":28419,"date":"2022-04-06T02:43:34","date_gmt":"2022-04-06T02:43:34","guid":{"rendered":"http:\/\/next-track-image-impression"},"modified":"2022-04-06T02:43:34","modified_gmt":"2022-04-06T02:43:34","slug":"next-track-image-impression","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/next-track-image-impression\/","title":{"rendered":"Track Image impressions in Next.js"},"content":{"rendered":"

An impression in web statistics counts how many times a user views a particular element on a website. The element could be an ad, image, or something else.<\/p>\n

Impressions are an essential piece of data that analytics software tracks.<\/p>\n

In this article, we will learn how to use react-intersection-observer<\/code> to track image impressions and then how to store them in our browser\u2019s localStorage.<\/p>\n

Sandbox<\/h2>\n

The completed project is on Codesandbox<\/a>. Fork it and run the code.<\/p>\n

<Codesandbox<\/span> id<\/span>=\"image-intersection-observer-lkhpbg\"<\/span> title<\/span>=\"image-intersection-observer\"<\/span> \/><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Prerequisites<\/h2>\n
The knowledge of Next.js and the localStorage API<\/a> is required to get the most out of this article. We will also use the react-intersection-observer<\/a> library to create the demo, so familiarity with it will be helpful.<\/p>\n
Getting Started<\/h2>\n
We create a new Next.js application by running the command below in our terminal.<\/p>\n
npx create-next-app next-image-intersection-observer-app\n<\/code><\/span><\/pre>\n
Next, we navigate into the project directory.<\/p>\n
cd next-image-intersection-observer-app\n<\/code><\/span><\/pre>\n
Then run the code below to install react-intersection-observer<\/code>.<\/p>\n
npm install react-intersection-observer\n<\/code><\/span><\/pre>\n
What we are building<\/h2>\n
We are building an image tracking application. As the user scrolls through an application, we track and increase an impression count when the user scrolls past a particular image.<\/p>\n
We will also add a visual indicator to the image to inform us when it is in view.<\/p>\n
This demo is similar to an analytics system that tracks impressions.<\/p>\n
\"\"<\/p>\n
Adding the Content<\/h2>\n
Update the index.js<\/code> file with the code below:<\/p>\n
import<\/span> Image from<\/span> \"next\/image\"<\/span>;\nexport<\/span> default<\/span> function<\/span> Home<\/span>(<\/span>) <\/span>{\n  return<\/span> (\n    <div<\/span> className<\/span>=\"w-full h-full flex flex-col justify-center items-center px-10  pt-10 bg-zinc-900 relative\"<\/span>><\/span>\n    \n      <h1<\/span> className<\/span>=\"text-4xl font-bold text-white mb-16 text-center\"<\/span>><\/span>\n        Next.js Intersection Observer Article\n      <\/h1<\/span>><\/span>\n      \n      {Array.from(Array(3).keys()).map((i) => (\n        <p<\/span> className<\/span>=\"text-white text-2xl mb-16\"<\/span> key<\/span>={i}<\/span>><\/span>\n          Irure pariatur velit est anim ipsum anim aliquip officia velit\n          consectetur. Duis sint ut consectetur ea anim. Sit proident culpa\n          velit officia do incididunt Lorem in deserunt non adipisicing occaecat\n          magna. Occaecat occaecat esse excepteur consequat occaecat cupidatat\n          aliquip labore esse ad ea. Laboris id excepteur nisi voluptate sunt\n          anim commodo amet reprehenderit.\n        <\/p<\/span>><\/span>\n      ))}\n      \n      <div<\/span> className<\/span>=\"mb-10\"<\/span>><\/span>\n        <Image<\/span>\n          src<\/span>=\"\/images\/1.png\"<\/span>\n          width<\/span>={300}<\/span>\n          height<\/span>={400}<\/span>\n          alt<\/span>=\"something amazing\"<\/span>\n        \/><\/span>\n      <\/div<\/span>><\/span>\n      \n      {Array.from(Array(5).keys()).map((i) => (\n        <p<\/span> className<\/span>=\"text-white text-2xl mb-16\"<\/span> key<\/span>={i}<\/span>><\/span>\n          Irure pariatur velit est anim ipsum anim aliquip officia velit\n          consectetur. Duis sint ut consectetur ea anim. Sit proident culpa\n          velit officia do incididunt Lorem in deserunt non adipisicing occaecat\n          magna. Occaecat occaecat esse excepteur consequat occaecat cupidatat\n          aliquip labore esse ad ea. Laboris id excepteur nisi voluptate sunt\n          anim commodo amet reprehenderit.\n        <\/p<\/span>><\/span>\n      ))}\n      \n    <\/div<\/span>><\/span><\/span>\n  );\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Here, we create an array, loop through some dummy text, and add the image between the text.<\/p>\n
Integrating react-intersection-observer<\/code><\/h2>\n
react-intersection-observer is an implementation of the Intersection Observer API for React. It informs us when an element enters or leaves the viewport.<\/p>\n
It provides a useInView<\/code> hook we can use to monitor the inView<\/code> state of components. There is also a custom InView<\/code> component, which we will be using. We modify the index.js file to include these with:<\/p>\n
import<\/span> Image from<\/span> \"next\/image\"<\/span>;\nimport<\/span> { InView } from<\/span> \"react-intersection-observer\"<\/span>;\n\nexport<\/span> default<\/span> function<\/span> Home<\/span>(<\/span>) <\/span>{\n  return<\/span> (\n    <div<\/span> className<\/span>=\"w-full h-full flex flex-col justify-center items-center px-10  pt-10 bg-zinc-900 relative\"<\/span>><\/span>\n      <h1<\/span> className<\/span>=\"text-4xl font-bold text-white mb-16 text-center\"<\/span>><\/span>\n        Next.js Intersection Observer Article\n      <\/h1<\/span>><\/span>\n      \n      {Array.from(Array(3).keys()).map((i) => (\n        <p<\/span> className<\/span>=\"text-white text-2xl mb-16\"<\/span> key<\/span>={i}<\/span>><\/span>\n          Irure pariatur velit est anim ipsum anim aliquip officia velit\n          consectetur....\n        <\/p<\/span>><\/span>\n      ))}\n      \n      <InView<\/span> threshold<\/span>={0.6}<\/span>><\/span>\n        {({ ref, inView }) => (\n          <div<\/span> className<\/span>=\"mb-10\"<\/span> ref<\/span>={ref}<\/span>><\/span>\n            <Image<\/span>\n              src<\/span>=\"\/images\/1.png\"<\/span>\n              width<\/span>={300}<\/span>\n              height<\/span>={400}<\/span>\n              alt<\/span>=\"something amazing\"<\/span>\n            \/><\/span>\n            <p<\/span>\n              className<\/span>={<\/span>`text-white<\/span> text-2xl<\/span> font-bold<\/span> ${\n                inView<\/span> ? \"text-green-600<\/span>\" :<\/span> \"text-red-600<\/span>\"\n              }`}\n            ><\/span>{`Image in view? ${inView} `}<\/p<\/span>><\/span>\n          <\/div<\/span>><\/span>\n        )}\n      <\/InView<\/span>><\/span>\n      \n      {Array.from(Array(5).keys()).map((i) => (\n        <p<\/span> className<\/span>=\"text-white text-2xl mb-16\"<\/span> key<\/span>={i}<\/span>><\/span>\n          Irure pariatur velit est anim ipsum anim aliquip officia velit\n          consectetur....\n        <\/p<\/span>><\/span>\n      ))}\n      \n    <\/div<\/span>><\/span><\/span>\n  );\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
In the code above, we do the following:<\/p>\n
The source code is also available on GitHub<\/a>.<\/p>\n