{"id":58141,"date":"2023-08-30T21:23:03","date_gmt":"2023-08-30T15:53:03","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=58141"},"modified":"2025-08-01T14:27:58","modified_gmt":"2025-08-01T08:57:58","slug":"pass-digital-data-layer-to-adobe-analytics-using-javascript","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/pass-digital-data-layer-to-adobe-analytics-using-javascript\/","title":{"rendered":"Pass digital data layer to Adobe analytics using javascript"},"content":{"rendered":"<h2><strong>Requirement<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">In general, data is passed to Adobe Analytics on page load. Sometimes it is required to load page content without reloading\/refreshing the page. For example, if a web application has page navigation based on the Table Of Content and page refresh, and not a requirement, but content should get updated.<\/span><\/p>\n<h2><strong>Solution<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Without loading a page, content can be fetched from the server side using javascript\/ajax and the current page DOM can be replaced with the latest DOM fetched by making an Ajax call. But by doing so, page load analytics will not be triggered, and data will not be sent to Adobe Analytics.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To pass the data to <a href=\"https:\/\/www.tothenew.com\/adobe-analytics\"><strong>Adobe Analytics<\/strong><\/a> we need to create the digitalData layer with the updated content and trigger the analytics event.<\/span><\/p>\n<h2><strong>Implementation steps<\/strong><\/h2>\n<p><strong>1. <\/strong>A<span style=\"font-weight: 400;\">dd an onclick function to the link and define and implement the onclick function; let&#8217;s say the function name is <strong>loadPageContent(linkToPage)<\/strong>.<\/span><\/p>\n<p><strong>2. <\/strong>A<span style=\"font-weight: 400;\">s an implementation to the <strong>loadPageContent(linkToPage)<\/strong> make an Ajax call to the page and, in the success method, play around with the newly fetched DOM and replace the current page DOM with the clicked link page content DOM.<\/span><\/p>\n<p><strong>3. <\/strong>I<span style=\"font-weight: 400;\">f a digital data layer is available(if set on the server side) on the page DOM, extract it out and put it in the success method after step #2.<\/span><\/p>\n<p><strong>4. <\/strong>I<span style=\"font-weight: 400;\">f the digital data layer is not available in the fetched DOM, create and initialize values in the success method itself after step #2.<\/span><\/p>\n<p><strong>5. <\/strong>O<span style=\"font-weight: 400;\">nce digital data layer initialization is done, add the <strong>_satellite.track(&#8216;ajaxPageLoad&#8217;);<\/strong> as a last line of the success method. This line will trigger the Adobe Analytics call and send the latest available data in the digital data layer to Adobe Analytics.<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignleft wp-image-58139 size-large\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/08\/Screenshot-2023-08-25-at-10.43.31-PM-1024x693.png\" alt=\"\" width=\"625\" height=\"423\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/08\/Screenshot-2023-08-25-at-10.43.31-PM-1024x693.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2023\/08\/Screenshot-2023-08-25-at-10.43.31-PM-300x203.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/08\/Screenshot-2023-08-25-at-10.43.31-PM-768x520.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/08\/Screenshot-2023-08-25-at-10.43.31-PM-1536x1040.png 1536w, \/blog\/wp-ttn-blog\/uploads\/2023\/08\/Screenshot-2023-08-25-at-10.43.31-PM-2048x1386.png 2048w, \/blog\/wp-ttn-blog\/uploads\/2023\/08\/Screenshot-2023-08-25-at-10.43.31-PM-624x422.png 624w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><\/p>\n<p>_<span style=\"font-weight: 400;\">satellite.track(&#8216;<strong>ajaxPageLoad<\/strong>&#8216;) to work, a rule needs to be added on Adobe Analytics side with an identifier \u201c<strong>ajaxPageLoad<\/strong>\u201d as follows:<\/span><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignleft wp-image-58140 size-large\" src=\"\/blog\/wp-ttn-blog\/uploads\/2023\/08\/Screenshot-2023-08-25-at-11.11.24-PM-1024x451.png\" alt=\"\" width=\"625\" height=\"275\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2023\/08\/Screenshot-2023-08-25-at-11.11.24-PM-1024x451.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2023\/08\/Screenshot-2023-08-25-at-11.11.24-PM-300x132.png 300w, \/blog\/wp-ttn-blog\/uploads\/2023\/08\/Screenshot-2023-08-25-at-11.11.24-PM-768x338.png 768w, \/blog\/wp-ttn-blog\/uploads\/2023\/08\/Screenshot-2023-08-25-at-11.11.24-PM-1536x677.png 1536w, \/blog\/wp-ttn-blog\/uploads\/2023\/08\/Screenshot-2023-08-25-at-11.11.24-PM-2048x902.png 2048w, \/blog\/wp-ttn-blog\/uploads\/2023\/08\/Screenshot-2023-08-25-at-11.11.24-PM-624x275.png 624w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><\/p>\n<p><strong>References<\/strong><\/p>\n<p><a href=\"https:\/\/experienceleague.adobe.com\/docs\/experience-platform\/tags\/client-side\/satellite-object.html?lang=en\"><span style=\"font-weight: 400;\">https:\/\/experienceleague.adobe.com\/docs\/experience-platform\/tags\/client-side\/satellite-object.html?lang=en<\/span><\/a><\/p>\n<div class=\"ap-custom-wrapper\"><\/div><!--ap-custom-wrapper-->","protected":false},"excerpt":{"rendered":"<p>Requirement In general, data is passed to Adobe Analytics on page load. Sometimes it is required to load page content without reloading\/refreshing the page. For example, if a web application has page navigation based on the Table Of Content and page refresh, and not a requirement, but content should get updated. Solution Without loading a [&hellip;]<\/p>\n","protected":false},"author":1357,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":249},"categories":[5868,4685,4831,2251,1964,4112,3887,446,3109,4488],"tags":[5409,4847,1397,55],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/58141"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1357"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=58141"}],"version-history":[{"count":3,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/58141\/revisions"}],"predecessor-version":[{"id":73803,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/58141\/revisions\/73803"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=58141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=58141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=58141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}