Santosh Kumar, Author at Accreas

September 2, 2025

Adobe Target in Single-Page Applications: Real-World Challenges and Solutions

Many of the websites you use every day, for example Gmail, Facebook, or Twitter, can feel so seamless, fast and smooth. You click, and content just appears, without the whole page blinking and reloading. That's the magic of a Single Page Application (SPA)! These web experiences are designed for speed and fluidity, but they introduce unique challenges when it comes to personalization tools like Adobe Target.

In this post, Santosh Kumar, Principal Consultant at Accrease, shares two real-world challenges that we faced when implementing Target in an SPA, and how our team developed scalable solutions.

What's an SPA?

Imagine a website that's not a series of separate pages, but rather a single, smart canvas. When a user first visits, the browser loads the essential HTML, CSS, and JavaScript. After that, interactions update only the parts of the page that change, without reloading the full page.

Why are SPAs so popular and powerful today?

Faster performance: Because only small chunks of data are exchanged and rendered, SPAs feel incredibly quick and responsive. This results in a significantly faster user experience.

Smooth navigation: The absence of full-page reloads eliminates the jarring "white flash" and makes the navigation feel continuous and fluid, almost like using a native mobile application.

Enhanced Efficiency: With less data being transferred between the server and the client, SPAs reduce server load and bandwidth consumption, leading to more efficient performance overall.

Modern Development: Developers leverage powerful, cutting-edge JavaScript frameworks like React, Angular, and Vue.js to build SPAs, making the development process more organized and the applications more robust.

For the user, this means a fluid, modern web experience. But for personalization platforms like Adobe Target, it breaks the traditional pattern of reloading and re-evaluating content at each navigation.

The challenge with Adobe Target and SPAs

Adobe Target is a leading personalization and A/B testing tool that empowers businesses to deliver tailored content and experiences to their website visitors. It's all about showing the right message to the right person at the right time.

However, SPAs present a unique challenge for traditional personalization tools. Normally, when a user navigates to a new page, a "hard reload" occurs, and Adobe Target's main script (alloy.js, used for Adobe Web SDK) is re-executed, triggering a new "mbox call" to check for personalized content. In an SPA, this only happens on the very first page load. After that, all subsequent navigations are "soft reloads", dynamic content updates without a full page refresh. This means Target doesn't automatically get the signal it needs to re-evaluate and deliver new personalized experiences.

To address this, Adobe Target uses a concept called "views." A view is simply a named state or screen within your SPA. Think of it like a virtual page, even though the browser isn't actually reloading. For example, "homepage," "product-details," "shopping-cart," or "checkout" could all be defined as distinct views. When a user transitions to a new view, we manually tell Adobe Target, "Hey, the user is now on the 'product-details' view!" This manual trigger allows Target to deliver the appropriate personalized content for that specific screen, even without a full page reload.

Illustrating the "View" concept:

Picture from: Adobe Experience League.

Solving real-world scenarios with Adobe Target in SPAs

While the "views" concept is foundational, we encountered a couple of significant real-world challenges when trying to implement Adobe Target for more complex personalization scenarios in an SPA environment.

Challenge #1: Personalizing across thousands of similar pages (The "Marketer's Nightmare")

Take a large hotel booking site. It might have thousands of unique hotel detail pages, each representing a different property. In an SPA, each of these pages would typically have its own unique "view" name (e.g., "hotel-london-view," "hotel-paris-view," "hotel-tokyo-view"). Now, imagine a marketing team wants to change a small, universal piece of text, perhaps a call-to-action button or a promotional banner, that appears on every single one of these thousands of hotel detail pages. If they had to set up thousands of individual personalization rules in Adobe Target, one for each unique view name, it would be an incredibly time-consuming, impractical, and unscalable "marketer's nightmare."

Our approach: The generic view name trick

To solve this, making personalization scalable, we implemented a generic view strategy. Instead of sending unique view names for each individual hotel detail page, we sent a single, generic view name (e.g., "hotel-page" or "en: hotel page") for all hotel detail pages. This simple yet effective "trick" means marketers only have to set up one personalization rule in Adobe Target for the "hotel-page" view, and it automatically applies the desired change to all thousands of hotel pages. This dramatically simplifies campaign management and deployment.

Supporting marketers with our Accrease Custom Chrome Extension

Even with a generic view name, Adobe Target’s Visual Experience Composer (VEC) can still be difficult to use in SPAs. The VEC often defaults to the most recent view triggered, which may not be the one marketers want to edit.

To solve this, we developed a custom Chrome extension! This tool is extremely helpful for marketers working with SPAs. It listens for all the "view" names triggered by alloy.js on a page and populates them into a simple dropdown list within the extension. Marketers open the extension, select the exact view they want to work with (such as "hotel-page"), click "Activate." Then that specific view becomes visible and editable in Adobe Target's VEC.

The extension also includes a custom text box, allowing marketers to manually enter and activate any view name, even if it hasn't been implemented in the tag manager yet. This is incredibly useful for planning and setting up campaigns in advance. This tool significantly reduces manual effort, improves efficiency, and accelerates campaign creation for SPA-based sites, particularly for marketers who may lack in-depth technical knowledge.

Here is a closer look at the extension:

Here's a visual representation of how our Chrome extension “Accrease SPA Helper” helps:

Behind the extension:

Building such an extension may sound straightforward, but it requires both strong front-end development skills and a deep understanding of how Adobe Target operates. As Adobe Experience Cloud experts, we combined that knowledge with modern development tools to accelerate the process. AI-assisted coding helped us move faster, but it still took multiple iterations, testing, and refinement before we reached a polished and reliable solution. The end result is what you are seeing today, a tool that makes personalization in SPAs far more accessible for marketers, delivered with both speed and quality.

Challenge 2: Inaccurate goal tracking in A/B tests goal (The conversion discrepancy)

While personalization was now scalable, we noticed another issue: conversion tracking in Target wasn’t aligning with Adobe Analytics data.

For example, in an A/B test where the goal was a visit to the thank-you page, Analytics showed far more completions than Target.

The root cause:

After a thorough investigation, we pinpointed the problem. Since our site is an SPA, most users navigate between pages using "soft reloads." During these soft reloads, the main "mbox call" (which is crucial for Adobe Target to register user actions, evaluate goals, and track conversions) was not being sent automatically. Target was only recording a goal completion if a user happened to perform a full "hard reload" on the "thank you" page. This explained the small number of conversions we were seeing in Target compared to Analytics.

The fix:

We escalated this issue to Adobe Client Care, who involved their engineering team. After several rounds of analysis and communication, they confirmed our findings and recommended a crucial adjustment to our tag manager setup, specifically, the order in which Target calls were being fired.

Before (The problematic setup):

On Hard Reload:

mbox call (decisionScope = __view__)
view call 1
view call 2
view call 3

On Soft Reload:

view call 1
view call 2
view call 3
(No mbox call here)

As you can see, the critical mbox call was absent on soft reloads, preventing Target from registering goal conversions.

After (The solution: Adobe's suggested Fix):

The fix involved ensuring the mbox call was always present, even on soft reloads, and crucially, fired after all view calls.

On Hard Reload:

mbox call (decisionScope = __view__)
view call 1
view call 2
view call 3

On Soft Reload:

view call 1
view call 2
view call 3
mbox call (decisionScope = __view__) ✅

By adding the mbox call at the end of soft reloads, Target is now able to evaluate goal conversions correctly, regardless of whether the user navigates via a hard or soft reload. This simple but vital change ensures accurate conversion tracking for all A/B tests.

What does this mean for marketers?

SPAs deliver the modern experiences users expect, but they also require rethinking how personalization and testing are implemented. Our work with clients has shown that:

Scalability matters. Using generic view names transforms personalization from unmanageable to efficient.
Ease of use is critical. Tools like the Accrease SPA Helper extension empower marketers to manage personalization without heavy technical support.
Accuracy is non-negotiable. Ensuring conversions are tracked correctly builds trust in testing results and enables data-driven decisions.

At Accrease, we bridge the gap between technical implementation and marketer usability. The result is personalization that’s not only possible in SPAs, but also scalable, reliable, and effective.

SPAs are here to stay, and personalization tools must adapt. By rethinking view management and conversion tracking, our team at Accrease has helped clients work the full potential of Adobe Target in SPA environments.

If your organization is facing similar challenges, we’d be happy to share our approach and explore how to make personalization more scalable and marketer-friendly in your setup. Contact us here

Acknowledgements

About the Author
Santosh Kumar, has more than a decade of experience in Digital Marketing and the Adobe stack. He holds more Adobe certifications than is humanly possible. When no one else can fix it, you call for Santosh.

A special thanks to Kurian George for his support in investigating these challenges, co-developing solutions, and ensuring smooth implementation. His expertise was essential in making these results possible.

Published by Santosh Kumar in Insights

Tags: Accrease, Adobe, Adobe Target, personalization, Single Page Application

February 11, 2025

Are Collapsed Customer Profiles Hurting Your Marketing? How Identity Optimization Can Fix the Problem.

Imagine pouring endless hours and resources into designing personalized marketing campaigns only to discover they’re based on flawed customer profiles….It’s like throwing darts in the dark. In today’s multi-device, hyperconnected world, this is an all-too-common scenario.

Shared devices and fragmented data inputs can lead to “collapsed profiles,” where behaviours and preferences from multiple users are mistakenly merged into one. The result? Wasted marketing budgets, diluted brand experiences, and missed opportunities to connect meaningfully with your audience.

But how can your businesses rise above this challenge? In the following blog post, Senior Consultant Santosh Kumar will show you the hidden cost of collapsed profiles and how advancements in  Identity Stitching are revolutionizing the marketing game.

The cost of collapsed profiles

The challenge of maintaining accurate customer profiles has long been a headache for marketers striving for precision. Consider this: A father and son share a tablet. The father’s browsing history includes luxury watches, while the son spends his time looking up video games. If these distinct behaviors are collapsed into a single profile, the resulting data is an unhelpful mix. This misrepresentation makes it nearly impossible to deliver truly personalized marketing messages, leading to missed opportunities and diminished customer engagement.

Understanding collapsed identity graphs

To visualize the issue, let’s look at two types of identity graphs:

Healthy identity graph:

In a well-maintained graph, each CRM ID (customer identifier) is correctly associated with multiple ECIDs (device/browser identifiers). This ensures all behaviors across devices are tied to the same individual.

Collapsed identity graph:

In contrast, a corrupted graph features multiple CRM IDs and ECIDs tied to the same profile. This creates confusion and undermines the foundation of personalized marketing.

Breaking through with Advanced Identity Stitching

The good news? Advancements in identity stitching are revolutionizing how we understand and engage with our audiences. With Adobe’s Identity Optimization algorithm, marketers can finally combat profile collapse and regain control over their data.

A new era of identity stitching

Adobe’s innovative algorithm leverages both deterministic (exact match) and probabilistic (best guess) techniques to create accurate identity graphs. This hybrid approach ensures each individual is represented by a singular, reliable profile no matter how complex their digital footprint.

Key features driving its success include:

Unique identifiers
By prioritizing stable identifiers like CRM IDs over transient ones like cookies, businesses can dramatically reduce the likelihood of corrupted profiles.

Adaptive algorithms
Adobe’s machine learning-powered system continuously evolves, refining its ability to differentiate between users and devices over time.
Data hierarchy
Marketers can define the priority of various identifiers, ensuring the most reliable data sources take precedence when building profiles.

Real-Time insights for dynamic marketing

One of the standout features of Adobe’s Identity Optimization is its real-time functionality. Marketers can adapt campaigns on the fly, leveraging up-to-date profiles that reflect current user behaviors. This agility is critical in a competitive digital landscape where timely and relevant messaging can make all the difference.

Implementing Adobe’s Identity Optimization

Excited to take your marketing efforts to the next level? Adobe’s Identity Optimization is currently in Limited Availability, but here’s how you can get started once it’s rolled out in full:

Step-by-Step Guide

Understand your identities.
Navigate to AEP > Sandbox > Customer > Identities > Browse. Identify key identifiers like CRM IDs and ECIDs. The rest of the default identities are not in use.

2. Simulate the graph.

Optionally you may navigate to “Graph Simulation” tab and play with the configuration to understand how the new solution help not corrupting the profiles. The order of the things you do is highlighted in the screenshot below.

3. Set up the graph.
Finally, go back to the "Browse" tab and click the settings button in the top right corner to access the setup options. Here, start by ordering your cross-device IDs, such as CRM ID, phone number, etc. Next, specify whether each identity is unique. In this example, we've marked the CRM ID as unique to ensure only one CRM ID is added to the identity graph, preventing profile collapse.

4. Adjust browser identities.

Once completed, scroll down to see the list of browser identities, such as ECID, which also need to be ordered.

You can use your mouse to click and hold an identity, then drag it up or down to adjust its position in the list. Note that cookie namespaces cannot be marked as unique within a graph, as it's not feasible in real-time scenarios.

5. Save and activate.

In the final step, review the order of your identities and click the "Finish" button. After saving the configuration, it may take some time for the changes to activate.

Challenges and opportunities

While this innovation is a game-changer, it’s not without its limitations.

Historical collapses: Past corrupted profiles won’t be automatically fixed. Businesses may need to work with Adobe to clean up legacy data.

Data representation gaps: Underserved user groups highlight the need for diverse, comprehensive data collection.

However, these challenges present an opportunity for growth. Businesses that invest in refining their data strategies today will be well-positioned to leverage these advancements fully. The payoff? Highly personalized customer experiences that drive engagement and loyalty.

What this means for marketers

For marketers, identity optimization represents a game-changing opportunity to:

Enhance personalization: Craft messages tailored to individuals, not blurry profiles.

Boost ROI: Stop wasting budget on inaccurate targeting.

Build trust: Deliver relevant experiences that show you truly understand your audience.

Let’s discuss.

Have you encountered challenges with collapsed profiles? We’d love to hear your thoughts and help you out.

About the Author
Santosh has more than a decades experience in within Digital Marketing and the Adobe stack. He holds more Adobe certifications than what's human possible. When no one else can fix it, you call for Santosh.

Troubleshooting & FAQs

As you implement Adobe’s Identity Optimization, you will wihtout a doubt run into questions or technical challenges. Check out Adobe’s official documentation or contact us and request to get passed through to Santosh 😉

Published by Santosh Kumar in Insights

Tags: Adobe, AEP, Customer Experience, Identity Optimization, Identity Stitching, personalization

October 7, 2024

Enabling scroll depth tracking in Adobe Analytics with the new WebSDK Plugin

Tracking how much of a webpage users actually view is crucial to understanding engagement with your content. Whether you’re analyzing long-form articles, product pages, or campaign landing pages, scroll depth provides direct insight into how far users are going before leaving the page.

For years, the getPercentPageViewed plugin has helped marketers track scroll depth in Adobe Analytics. However, with the adoption of Adobe's new WebSDK, the old plugin is no longer compatible, leaving organizations that rely on modern architectures with a gap in their analytics setup.

We’ve developed a new scroll depth plugin specifically for Adobe’s WebSDK, offering a more robust, flexible, and scalable solution for tracking user engagement. In this post, we’ll explain the problem with the legacy plugin, demonstrate how to visualize scroll depth data, and guide you through the implementation of the new WebSDK-based solution

How to use scroll depth data in Adobe Analytics to identify drop-off points

One of the most valuable insights scroll depth tracking offers is identifying where users drop off on your pages. For landing pages and key CTA pages, this is critical, as it reveals whether visitors are engaging with your content long enough to reach the main calls to action.

Pinpointing drop-off points

Scroll depth data allows you to see exactly how far down the page users scroll before they exit or lose interest. If a significant portion of your visitors drop off before reaching the key messaging or CTA, this indicates a potential issue in your content flow, page design, or CTA placement. By identifying these drop-off points, you can take action to reduce friction and keep users engaged.

Consider screen size: percentages vs. absolute values

When analyzing scroll depth, it’s important to take screen size into account. Users on mobile devices may experience your page differently from desktop users, as content is displayed in a more compressed format. For this reason, it’s often helpful to measure scroll depth both in percentage terms (how far down the page they’ve scrolled) and absolute values(such as pixels or viewport units).

Percentage-based tracking: This helps normalize data across devices, making it easier to see the relative point where users drop off, regardless of screen size. For example, if 50% of mobile and desktop users are dropping off at around the same percentage mark, this provides a clear signal about engagement issues.
Absolute value tracking: This gives you more granular control over understanding specific user behaviors, especially when dealing with longer pages or dynamic content that may load differently across devices.

Mobile vs. non-mobile device analysis

Analyzing scroll depth data separately for mobile and non-mobile (desktop or tablet) devices is crucial for understanding the full picture. Given the different user behaviors and screen sizes, you may find that mobile users drop off sooner due to the nature of scrolling on smaller screens, while desktop users may scroll further before disengaging.

By segmenting your data, you can:

Mobile devices: Adjust content and CTA placement to ensure critical information is visible early on smaller screens, where users typically scroll faster.
Non-mobile devices: For desktops or larger screens, you may have more flexibility in content layout, allowing for CTAs to be placed further down the page, provided engagement levels remain high.

Example: improving CTA engagement on a landing Page

Imagine you’re running a campaign with a dedicated landing page designed to collect sign-ups. After reviewing the scroll depth data segmented by device type, you notice that the majority of mobile users drop off at 20%, while desktop users continue scrolling to 37%, but your sign-up form and CTA button are placed at 70%.

By moving the form higher, say around the 15% mark for mobile users and 35% for desktop users, you ensure that more visitors see the CTA before they drop off. This significantly increases the likelihood of conversions across both device types. Scroll depth tracking helps you make these data-driven adjustments, optimizing the performance of your landing pages for all users.

How to Implement the New Scroll Depth Plugin in Adobe WebSDK

Now that we've covered how scroll depth data helps identify drop-off points and optimize your landing pages, let’s look at how to implement the new plugin in Adobe WebSDK.

Step 1: Add the following code snippet at the end of the "send event" action in your page view rule:

//clear previous page data

_satellite.cookie.remove('initialPercent');

_satellite.cookie.remove('highestPercent');

// Function to set a cookie with an optional expiration in minutes

function setCookie(name, value, minutes) {

    var expires = "";

    if (minutes) {

        var date = new Date();

        date.setTime(date.getTime() + (minutes * 60 * 1000));

        expires = "; expires=" + date.toUTCString();

    }

    document.cookie = name + "=" + (value || "") + expires + "; path=/";  

}

// Function to calculate the percentage of the page viewed

function getScrollPercent() {

    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;

    return Math.min(Math.round((scrollTop / scrollHeight) * 100), 100);

}

// Function to calculate the initial viewport percentage

function getInitialViewportPercent() {

    const viewportHeight = window.innerHeight || document.documentElement.clientHeight;

    const scrollHeight = document.documentElement.scrollHeight;

    return Math.min(Math.round((viewportHeight / scrollHeight) * 100), 100);

}

// Function to track page view data

function trackPageViewData() {

    // Set the initial percent viewed on page load

    if (!_satellite.cookie.get('initialPercent')) {

        // Calculate the initial viewport percentage

        const initialPercent = getInitialViewportPercent();

        _satellite.cookie.set('initialPercent',initialPercent);

        _satellite.cookie.set('highestPercent',initialPercent); // initially set with initial percent value, once user scrolls the page it gets updated.

    }

    // Get the current scroll percent

    const currentPercent = getScrollPercent();

    // Update the highest percent viewed

    const storedHighestPercent = parseFloat(_satellite.cookie.get('highestPercent') || 0);

    if (currentPercent > storedHighestPercent) {

       _satellite.cookie.set('highestPercent',currentPercent);

    }

}

// Initialize page view tracking

trackPageViewData();

// Initialize page view tracking

window.addEventListener('scroll', trackPageViewData); // Track on scroll events

window.addEventListener('click', trackPageViewData); // Track on click events

Step 2: Create a data element that reads the initialPercent and highestPercent values from cookies and builds a string:

var initialPercent = _satellite.cookie.get('initialPercent');
var highestPercent = _satellite.cookie.get('highestPercent');
if(initialPercent!= null && initialPercent!= 'undefined' && highestPercent != null && highestPercent != "undefined"){
  return "initialPercent="+initialPercent + " | "+ "highestPercent="+ highestPercent;
}
else{
  return "";
}

Step 3: Map the data element to the desired field in the XDM object in the same page view tracking rule.

Step 4: Build your changes in your development and make sure the eVar is captured with the desired value.

Step 5: Create rule-based classifications to separate initial percent and highest percent values into separate dimensions and then create sub classifications to bucket them if needed.

Considerations for scroll depth tracking

Scroll depth tracking offers valuable insights into how users engage with your content, but there are a few important considerations to be aware of when implementing this feature in Adobe WebSDK.

Scroll data isn’t captured for users who bounce

Currently, our scroll depth plugin does not fire if a user bounces, meaning scroll depth data won’t be captured if a visitor leaves the page without interacting further. This could lead to missed insights, especially on high bounce-rate pages.

Testing before implementing to ensure a smooth rollout

Before implementing the scroll depth tracking plugin in a live environment, it's crucial to conduct thorough testing to ensure it works as expected and doesn't introduce any issues that could affect performance or data accuracy.

Maximizing insights with no additional cost

Scroll depth tracking provides invaluable insights into how users engage with your content and where they drop off, especially for landing pages and key CTA sections. However, it’s important to be mindful of factors like server calls, bounce data, and fast-scrolling behavior when implementing this functionality.

If you are looking to capture real-time scroll data or need help optimizing your scroll depth tracking, we’re happy to help. Contact us for guidance on the best approach for your business and to ensure you’re getting the most out of Adobe Analytics while keeping costs and performance in check.

Santosh would be happy to help! Reach out, get started and ask your questions to: [email protected]

Published by Santosh Kumar in Insights

Tags: Adobe, getPercentPageViewed, Scroll depth tracking, WEBSDK