{"id":28282,"date":"2022-04-06T02:40:54","date_gmt":"2022-04-06T02:40:54","guid":{"rendered":"http:\/\/track-image-impressions-with-intersection-observer-and-localstorage-in-nuxtjs"},"modified":"2022-04-06T02:40:54","modified_gmt":"2022-04-06T02:40:54","slug":"track-image-impressions-with-intersection-observer-and-localstorage-in-nuxtjs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/track-image-impressions-with-intersection-observer-and-localstorage-in-nuxtjs\/","title":{"rendered":"Track Image Impressions in LocalStorage and NuxtJS"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>An impression is when any form of digital media appears on a user\u2019s screen. Knowing what kind of content your users often view can help you focus on delivering better content to improve user experience.<\/p>\n<p>This article demonstrates how to track image impressions using Intersection Observer API and store impression counts in your browser\u2019s local storage.<\/p>\n<p>According to MDN Docs:<\/p>\n<blockquote>\n<p>\u201cThe <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/IntersectionObserver\">Intersection Observer API<\/a> provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document\u2019s viewport.\u201d<\/p>\n<\/blockquote>\n<p>With this API, you can track your images and execute a callback function when each image comes into view on your browser.<\/p>\n<p><a href=\"https:\/\/nuxtjs.org\/\">NuxtJS<\/a> is an open-source framework that enhances the capabilities of VueJS with features such as fast server-side rendering, pre-configurations, and a large ecosystem of modules. All these tools provide an excellent developer experience.<\/p>\n<h2>CodeSandbox and GitHub Repo<\/h2>\n<p>Click the CodeSandbox link below to view a complete demo of the content presented in this article:<\/p>\n<p><a href=\"https:\/\/codesandbox.io\/embed\/silly-curie-89ek8e?fontsize=14&amp;hidenavigation=1&amp;theme=dark\">https:\/\/codesandbox.io\/embed\/silly-curie-89ek8e?fontsize=14&amp;hidenavigation=1&amp;theme=dark<\/a><\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/silly-curie-89ek8e?theme=dark&amp;codemirror=1&amp;highlights=&amp;editorsize=50&amp;fontsize=14&amp;expanddevtools=0&amp;hidedevtools=0&amp;eslint=0&amp;forcerefresh=0&amp;hidenavigation=0&amp;initialpath=%2F&amp;module=&amp;moduleview=0&amp;previewwindow=&amp;view=&amp;runonclick=1\"\n      height=\"500\"\n      style=\"width: 100%;\"\n      title=\"track image impressions in localstorage and nuxtjs\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n  <div class=\"wp-block-cloudinary-markdown \"><p>To view its source code on GitHub, click <a href=\"https:\/\/github.com\/dpkreativ\/nuxt-image-impressions\">here<\/a>.<\/p>\n<h2>Prerequisites<\/h2>\n<p>To understand the concepts presented in this article, you need the following:<\/p>\n<ul>\n<li>Good knowledge of JavaScript and VueJS.<\/li>\n<li>Experience with NuxtJS is not strictly required, but it will make things easier.<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/console\">Create a free<\/a> <a href=\"https:\/\/cloudinary.com\/console\">Cloudinary account<\/a> to store, manipulate, and deliver your images.<\/li>\n<\/ul>\n<h2>Get started with <code>create-nuxt-app<\/code><\/h2>\n<p>In your terminal, navigate to your preferred project folder and run the command below to set up Nuxt for the project:<\/p>\n<pre><code>npx create-nuxt-app nuxt-image-impressions\n<\/code><\/pre>\n<p>You will be prompted with selections to aid project setup. Choose based on the recommendations below:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_28EBF690440D18E58BFDD351D2A357DD851D59EF4B7CD4A77C2067C8A606B1C9_1648177617920_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"935\" height=\"271\"\/><\/p>\n<p>After a successful setup, open the project in your preferred code editor, and run the command below in its terminal:<\/p>\n<pre><code>yarn dev\n<\/code><\/pre>\n<p>This will set up a dev environment with hot reload that you can view on your browser at <code>localhost:3000<\/code>.<\/p>\n<h2>Set up the project<\/h2>\n<p>In your project, navigate to <code>pages\/index.vue<\/code> and update <code>&lt;script&gt;<\/code> with the code below:<\/p>\n<pre><code>&lt;script&gt;\nexport default {\n  name: 'IndexPage',\n  data() {\n    return {\n      count: 0,\n      poems: [\n        {\n          text: `Low-anchored cloud, Newfoundland air, fountain head and source of rivers, dew-cloth, dream drapery, and napkin spread by fays; Drifting meadow of the air, where bloom the dasied banks and violets, and in whose fenny labyrinth the bittern booms and heron wades; Spirit of the lake and seas and rivers, bear only perfumes and the scent Of healing herbs to just men's fields! - Henry David Thoreau`,\n          imageUrl: `https:\/\/res.cloudinary.com\/dpkreativ\/image\/upload\/v1646749176\/wallpapers\/mist.jpg`,\n          imageAlt: `mist`,\n        },\n        {\n          text: `Last night I drove a car, not knowing how to drive; not owning a car, I drove and knocked down people I loved...went 120 through one town. I stopped at Hedgeville and slept in the back seat... excited about my new life. - Gregory Corso`,\n          imageUrl: `https:\/\/res.cloudinary.com\/dpkreativ\/image\/upload\/v1646483551\/wallpapers\/car.jpg`,\n          imageAlt: `car`,\n        },\n        {\n          text: `As your screen began to fade &amp; flicker, and I shut you down &amp; closed your cover, I knew all you needed was a little rest; I am so sorry for putting you to the test, but I cannot get through a day without you; You know how much I need you in all I do; You knew I would just die without your light; Good little laptop you gave me such a fright - Tia Maria`,\n          imageUrl: `https:\/\/res.cloudinary.com\/dpkreativ\/image\/upload\/v1646695756\/wallpapers\/laptop.jpg`,\n          imageAlt: `laptop`,\n        },\n      ],\n    }\n  },\n}\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>In the code above, <code>data()<\/code> returns a <code>count<\/code> variable with its initial value at 0; it also returns an array of objects accessed by the variable <code>poems<\/code>.<\/p>\n<p>You will use this data to set up the project\u2019s markup dynamically.<\/p>\n<p>In your <code>pages\/index.vue<\/code>, update <code>&lt;template&gt;<\/code> with the code below:<\/p>\n<pre><code>&lt;template&gt;\n  &lt;div&gt;\n    &lt;nav class=&quot;sticky top-0 bg-white font-bold text-2xl p-5 shadow&quot;&gt;\n      &lt;h1&gt;Impressions: {{ count }}&lt;\/h1&gt;\n    &lt;\/nav&gt;\n    &lt;div class=&quot;w-full max-w-4xl p-5 mx-auto&quot;&gt;\n      &lt;div v-for=&quot;(poem, idx) in poems&quot; :key=&quot;idx&quot;\n        class=&quot;grid lg:grid-cols-12 gap-4 min-h-screen content-center&quot;\n      &gt;\n        &lt;div class=&quot;lg:col-span-7&quot;&gt;\n          &lt;div&gt;\n            &lt;img :src=&quot;poem.imageUrl&quot; :alt=&quot;poem.imageAlt&quot; \n              class=&quot;w-full&quot; \/&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;lg:col-span-5&quot;&gt;\n          &lt;p class=&quot;text-xl&quot;&gt;{{ poem.text }}&lt;\/p&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;\n<\/code><\/pre>\n<p>In this step, you created a sticky <code>nav<\/code> to display the image impressions when you begin tracking them. You also used <code>v-for<\/code> to iterate through the <code>poems<\/code> array, showing each of the poems and their images.<\/p>\n<h2>Implement Intersection Observer API<\/h2>\n<p>In Vue\/Nuxt applications, you can implement the Intersection Observer API manually or use <code>[vue-intersection-observer](https:\/\/www.npmjs.com\/package\/vue-intersection-observer)<\/code>, a component that greatly simplifies the process.<\/p>\n<p>To install, run the command below in your project\u2019s terminal:<\/p>\n<pre><code>yarn add vue-intersection-observer\n<\/code><\/pre>\n<p>After its successful installation, update <code>&lt;script&gt;<\/code> in your <code>pages\/index.vue<\/code> with the code below:<\/p>\n<pre><code>&lt;script&gt;\nimport Observer from 'vue-intersection-observer'\n\nexport default {\n  \/\/ pre-existing code, add the new ones below\n  components: {\n    Observer,\n  },\n  methods: {\n    onChange(entry) {\n      if (entry.isIntersecting) {\n        this.count = this.count + 1;\n      }\n    }\n  }\n}\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>In the code above:<\/p>\n<ul>\n<li>You imported <code>Observer<\/code> from <code>vue-intersection-observer<\/code> and specified it as a component.<\/li>\n<li>\n<code>entry.isIntersecting<\/code> checks whether the specified element is in view and runs the <code>onChange<\/code> function to update the impression <code>count<\/code>.<\/li>\n<\/ul>\n<p>Next, update your <code>&lt;template&gt;<\/code> code to implement the <code>Observer<\/code> component on the images you want to track:<\/p>\n<pre><code>&lt;template&gt;\n  &lt;!-- pre-existing code, update only parent div for img element --&gt;\n  &lt;observer @on-change=&quot;onChange&quot;&gt;\n    &lt;img :src=&quot;poem.imageUrl&quot; :alt=&quot;poem.imageAlt&quot; class=&quot;w-full&quot; \/&gt;\n  &lt;\/observer&gt;\n&lt;\/template&gt;\n<\/code><\/pre>\n<p>In the code above:<\/p>\n<ul>\n<li>You changed the parent <code>&lt;div&gt;<\/code> of your <code>&lt;img \/&gt;<\/code> element to <code>&lt;observer&gt;<\/code>.<\/li>\n<li>You added an <code>@on-change<\/code> attribute to execute the callback function when the view is active.<\/li>\n<\/ul>\n<p>When you scroll up and down in your browser, you will notice that the number of image impressions is being recorded and displayed on the <code>nav<\/code>, as shown below:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_28EBF690440D18E58BFDD351D2A357DD851D59EF4B7CD4A77C2067C8A606B1C9_1648201746538_ezgif.com-gif-maker+6.gif\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"480\" height=\"221\"\/><\/p>\n<h2>Store impression counts in <code>localStorage<\/code><\/h2>\n<p>To store your impression counts in <code>localStorage<\/code>, navigate to <code>pages\/index.vue<\/code> and update <code>methods:<\/code> in your <code>&lt;script&gt;<\/code> with the code below:<\/p>\n<pre><code>&lt;script&gt;\nexport default {\n\/\/ pre-existing code\n  methods: {\n    onChange(entry) {\n      if (entry.isIntersecting) {\n        this.count = this.count + 1\n        localStorage.setItem('Impressions', this.count)        \n      }\n    }\n  }\n}\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>In your browser, check your localStorage to be sure it works:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_28EBF690440D18E58BFDD351D2A357DD851D59EF4B7CD4A77C2067C8A606B1C9_1648203122699_image.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1201\" height=\"353\"\/><\/p>\n<h2>Conclusion<\/h2>\n<p>In this article, you learned how to track impressions in your Nuxt project with Intersection Observer API and store impression counts in your browser\u2019s local storage. To learn more about these concepts, check out the resources below.<\/p>\n<h2>Resources<\/h2>\n<ul>\n<li>\n<a href=\"https:\/\/www.bigcommerce.com\/ecommerce-answers\/impressions-digital-marketing\/\">Understanding impressions in digital marketing<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Intersection_Observer_API#a_simple_example\">Intersection Observer API &#8211; Web APIs | MDN<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/medium.com\/@sebassegros\/using-intersectionobserver-with-vue-js-8d5dd0134606\">Using Intersection Observer with Vuejs &#8211; Sebastian Segura<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28283,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[332,134,370,177,371,315],"class_list":["post-28282","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-api","tag-guest-post","tag-image","tag-javascript","tag-under-review","tag-vue"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Track Image Impressions in LocalStorage and NuxtJS<\/title>\n<meta name=\"description\" content=\"This article demonstrates how to track image impressions using Intersection Observer API and store impression counts in your browser\u2019s local storage.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/track-image-impressions-with-intersection-observer-and-localstorage-in-nuxtjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Track Image Impressions in LocalStorage and NuxtJS\" \/>\n<meta property=\"og:description\" content=\"This article demonstrates how to track image impressions using Intersection Observer API and store impression counts in your browser\u2019s local storage.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/track-image-impressions-with-intersection-observer-and-localstorage-in-nuxtjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-06T02:40:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924946\/Web_Assets\/blog\/d1abec29fb124b171cef3f1d75f0dfbe36eee0ce-1600x840-1_28283402f8\/d1abec29fb124b171cef3f1d75f0dfbe36eee0ce-1600x840-1_28283402f8.png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"840\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/track-image-impressions-with-intersection-observer-and-localstorage-in-nuxtjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/track-image-impressions-with-intersection-observer-and-localstorage-in-nuxtjs\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Track Image Impressions in LocalStorage and NuxtJS\",\"datePublished\":\"2022-04-06T02:40:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/track-image-impressions-with-intersection-observer-and-localstorage-in-nuxtjs\/\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/track-image-impressions-with-intersection-observer-and-localstorage-in-nuxtjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924946\/Web_Assets\/blog\/d1abec29fb124b171cef3f1d75f0dfbe36eee0ce-1600x840-1_28283402f8\/d1abec29fb124b171cef3f1d75f0dfbe36eee0ce-1600x840-1_28283402f8.png?_i=AA\",\"keywords\":[\"API\",\"Guest Post\",\"Image\",\"Javascript\",\"Under Review\",\"Vue\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/track-image-impressions-with-intersection-observer-and-localstorage-in-nuxtjs\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/track-image-impressions-with-intersection-observer-and-localstorage-in-nuxtjs\/\",\"name\":\"Track Image Impressions in LocalStorage and NuxtJS\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/track-image-impressions-with-intersection-observer-and-localstorage-in-nuxtjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/track-image-impressions-with-intersection-observer-and-localstorage-in-nuxtjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924946\/Web_Assets\/blog\/d1abec29fb124b171cef3f1d75f0dfbe36eee0ce-1600x840-1_28283402f8\/d1abec29fb124b171cef3f1d75f0dfbe36eee0ce-1600x840-1_28283402f8.png?_i=AA\",\"datePublished\":\"2022-04-06T02:40:54+00:00\",\"description\":\"This article demonstrates how to track image impressions using Intersection Observer API and store impression counts in your browser\u2019s local storage.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/track-image-impressions-with-intersection-observer-and-localstorage-in-nuxtjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/track-image-impressions-with-intersection-observer-and-localstorage-in-nuxtjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/track-image-impressions-with-intersection-observer-and-localstorage-in-nuxtjs\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924946\/Web_Assets\/blog\/d1abec29fb124b171cef3f1d75f0dfbe36eee0ce-1600x840-1_28283402f8\/d1abec29fb124b171cef3f1d75f0dfbe36eee0ce-1600x840-1_28283402f8.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924946\/Web_Assets\/blog\/d1abec29fb124b171cef3f1d75f0dfbe36eee0ce-1600x840-1_28283402f8\/d1abec29fb124b171cef3f1d75f0dfbe36eee0ce-1600x840-1_28283402f8.png?_i=AA\",\"width\":1600,\"height\":840},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/track-image-impressions-with-intersection-observer-and-localstorage-in-nuxtjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Track Image Impressions in LocalStorage and NuxtJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Track Image Impressions in LocalStorage and NuxtJS","description":"This article demonstrates how to track image impressions using Intersection Observer API and store impression counts in your browser\u2019s local storage.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/track-image-impressions-with-intersection-observer-and-localstorage-in-nuxtjs\/","og_locale":"en_US","og_type":"article","og_title":"Track Image Impressions in LocalStorage and NuxtJS","og_description":"This article demonstrates how to track image impressions using Intersection Observer API and store impression counts in your browser\u2019s local storage.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/track-image-impressions-with-intersection-observer-and-localstorage-in-nuxtjs\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-04-06T02:40:54+00:00","og_image":[{"width":1600,"height":840,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924946\/Web_Assets\/blog\/d1abec29fb124b171cef3f1d75f0dfbe36eee0ce-1600x840-1_28283402f8\/d1abec29fb124b171cef3f1d75f0dfbe36eee0ce-1600x840-1_28283402f8.png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/track-image-impressions-with-intersection-observer-and-localstorage-in-nuxtjs\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/track-image-impressions-with-intersection-observer-and-localstorage-in-nuxtjs\/"},"author":{"name":"","@id":""},"headline":"Track Image Impressions in LocalStorage and NuxtJS","datePublished":"2022-04-06T02:40:54+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/track-image-impressions-with-intersection-observer-and-localstorage-in-nuxtjs\/"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/track-image-impressions-with-intersection-observer-and-localstorage-in-nuxtjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924946\/Web_Assets\/blog\/d1abec29fb124b171cef3f1d75f0dfbe36eee0ce-1600x840-1_28283402f8\/d1abec29fb124b171cef3f1d75f0dfbe36eee0ce-1600x840-1_28283402f8.png?_i=AA","keywords":["API","Guest Post","Image","Javascript","Under Review","Vue"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/track-image-impressions-with-intersection-observer-and-localstorage-in-nuxtjs\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/track-image-impressions-with-intersection-observer-and-localstorage-in-nuxtjs\/","name":"Track Image Impressions in LocalStorage and NuxtJS","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/track-image-impressions-with-intersection-observer-and-localstorage-in-nuxtjs\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/track-image-impressions-with-intersection-observer-and-localstorage-in-nuxtjs\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924946\/Web_Assets\/blog\/d1abec29fb124b171cef3f1d75f0dfbe36eee0ce-1600x840-1_28283402f8\/d1abec29fb124b171cef3f1d75f0dfbe36eee0ce-1600x840-1_28283402f8.png?_i=AA","datePublished":"2022-04-06T02:40:54+00:00","description":"This article demonstrates how to track image impressions using Intersection Observer API and store impression counts in your browser\u2019s local storage.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/track-image-impressions-with-intersection-observer-and-localstorage-in-nuxtjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/track-image-impressions-with-intersection-observer-and-localstorage-in-nuxtjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/track-image-impressions-with-intersection-observer-and-localstorage-in-nuxtjs\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924946\/Web_Assets\/blog\/d1abec29fb124b171cef3f1d75f0dfbe36eee0ce-1600x840-1_28283402f8\/d1abec29fb124b171cef3f1d75f0dfbe36eee0ce-1600x840-1_28283402f8.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924946\/Web_Assets\/blog\/d1abec29fb124b171cef3f1d75f0dfbe36eee0ce-1600x840-1_28283402f8\/d1abec29fb124b171cef3f1d75f0dfbe36eee0ce-1600x840-1_28283402f8.png?_i=AA","width":1600,"height":840},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/track-image-impressions-with-intersection-observer-and-localstorage-in-nuxtjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Track Image Impressions in LocalStorage and NuxtJS"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924946\/Web_Assets\/blog\/d1abec29fb124b171cef3f1d75f0dfbe36eee0ce-1600x840-1_28283402f8\/d1abec29fb124b171cef3f1d75f0dfbe36eee0ce-1600x840-1_28283402f8.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28282","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28282"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28282\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28283"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28282"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28282"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28282"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}