Another Adobe Target Hybrid Implementation
27 Apr 2025 » Opinion
I have written a few times about flicker, it is a recurring topic that I hear more often than I would like. Fortunately for me, in the last few weeks it has not been a major concern for my clients but this luck can change at any time. To get ahead of the curb, I want to be ready with a different approach - an alternative solution for this issue.
The Classic Solutions
In previous posts, I explained the traditional approaches to combat flicker.
Client-Side
The default for many teams, especially when using Adobe Target’s Visual Experience Composer (VEC), is to run everything client-side. The implementation could not be easier, just needing WebSDK or at.js executed from the <HEAD>. Marketers loves the flexibility: no code deployments needed to create new activities and it is easy to run A/B tests.
However, flicker is a constant risk. The pre-hiding snippet helps but it slows down the perceived load time, hurting Google Lighthouse scores and, potentially, SEO rankings. Remember that you have to pick two from fast page, no flicker, and personalization.
Server-Side
At the other end of the spectrum, server-side Adobe Target means the user never sees the default content as the personalized experience is baked into the downloaded HTML. This eliminates flicker, makes SEO teams happy (since search engines see the final content), and is great for performance.
The catch? It is very complex to implement, often requires backend changes and makes it harder for marketers to use visual tools like the VEC. In practice, very few teams succeed with a pure server-side Adobe Target setup, specially on modern CMS or SPA architectures.
Combining the Best of Both Worlds
So, how do you keep everyone happy? The answer may lie in a hybrid Adobe Target implementation: a combination of server-side and client-side. I wrote a long time ago about one possible hybrid approach, but today I will explain a different one.
This post stems from a comment on one of my LinkedIn posts, where Pradeep Jaiswal suggested a different way of combining server-side and client-side. I never thought about it, but I found it a very smart idea. In summary, you use a server-side Adobe Target implementation for above the fold, and a traditional client-side implementation for below the fold. In case you are not familiar, the fold is the line that divides the part of the web page that is visible upon loading it from the part that requires scrolling to be visible. Apparently he is having success with it, and everybody seems to be happy!
Let’s review the benefits:
- Server-Side Above-the-Fold
- SEO and Performance. Above-the-fold content is what users see first. By rendering any personalization or optimization server-side, you ensure that the initial page load is fast, stable and flicker free. No pre-hiding snippet needed and search engine crawlers see the final, personalized content right away.
- User Experience. Users get a smooth, instant experience, with no flashes and no layout shifts. This helps with engagement and reduces bounce rates.
- Below-the-Fold Client-Side
- Flexibility. Marketers and product owners can still use Adobe Target’s VEC to run experiments and personalize content without developer involvement.
- Reduced Impact. Changes below the fold are less likely to cause visible flicker, since users have not scrolled there yet. Even if there is a slight delay, it is less noticeable and less damaging to perceived performance.
- Agility. You can iterate quickly on lower impact areas without risking the critical first impression.
Implementation
OK, you are sold on the idea. How do you make it happen?
Server-Side Part
There is no one-size-fits-all solution for a server-side implementation. It totally depends on the backend (e.g. AEM) technology, architecture and implementation. In general, this backend needs to call Adobe Target’s Delivery API before rendering the page and combine the Adobe Target response with the default content in the Content Management System (CMS). As a consequence, the HTML sent to the browser already includes any A/B test or personalization for the content above the fold: hero section, headlines, navigation, etc. This requires substantial engineering investment.
It is worth noting that the VEC will not work in this case. Instead, you will need to use the Adobe Target Forms-Based Experience Composer. This is much less user friendly, often requiring engineering support for every campaign, and content is plain HTML or JSON.
Client-Side Part
The rest of the page below the fold loads as usual, with WebSDK or at.js running in the browser. Marketers can use the VEC for these sections, and any flicker is minimized since users have not scrolled there yet. You can even fine tune the anti-flicker snippet to only hide specific elements, not the whole page.
To further optimize the implementation, you may want to consider moving Adobe Tags to just below the fold. This enhances the perceived load time even more. However, I must highlight that moving Adobe Tags anywhere outside the <HEAD> is not officially supported, and it is against Adobe’s best practices. If you open a ticket with Adobe client care regarding your Adobe Tags implementation, the first thing they’ll tell you is to move it back to the <HEAD>. In other words, you are a bit on your own.
Governance
Any Adobe Target implementation requires governance. You do not want different teams creating disjointed content in Adobe Target or even worse, competing for the same space. In the case of this hybrid approach, you need even more stricter governance.
One way to divide and conquer could be:
- Above-the-fold/server-side is owned by engineering, although marketing will still define what goes at the top of the page. As I explained earlier, the Forms-Based Experience Composer requires technical knowledge.
- Below-the-fold/client-side is owned by marketing. Use the VEC here as usual.
Summary of Benefits
| Stakeholder | Concern | How Hybrid Approach Helps |
|---|---|---|
| SEO Specialist | Page speed, crawlability | Above-the-fold is fast, stable, and crawlable. No flicker or hidden content. |
| Product Owner | Experiment velocity, UX | Below-the-fold is flexible, easy to test, and flicker is less noticeable. |
| Marketer | Personalization tools | VEC and client-side Target still available where needed. |
| Developer/Engineer | Complexity, maintainability | Server-side logic limited to critical content; rest handled client-side. |
Challenges and Considerations
While the benefits may paint a rosy picture, the reality is that there are some important grey areas:
- Engineering Overhead. Server-side Adobe Target is more complex to implement and maintain, especially if your CMS or SPA was not designed for it. Most, if not all, Adobe Target activities will require IT involvement.
- Tooling Limitations. The VEC does not work server-side, so marketers cannot visually edit above-the-fold content.
- Governance. Clear documentation and ownership boundaries are essential to prevent conflicts between server- and client-side changes.
- Analytics Integration. Ensure that both server- and client-side Adobe Target implementations are tracked correctly for reporting in Adobe Analytics or Customer Journey Analytics. The client-side is tracked out-of-the-box, but the server-side is not trivial and requires development.
- Definition of the fold. There is no universal definition of where the fold lies. Browsers, windows and screens will move the fold to different places. You will need to determine where you draw the line.
Final Thoughts: A Pragmatic Path Forward
No approach is perfect. A hybrid Adobe Target implementation may offer a practical compromise in your case, but it is by no means a universal solution.
If you are considering this approach, start small: pilot it on a key landing page, measure the impact, and iterate. With the right balance, you will find that flicker does not have to be the price of personalization.
Have you tried a hybrid Adobe Target implementation? What challenges did you face and how did you overcome them? Share your experience in the comments below!
Photo by Mockup Free on Unsplash