Using the Page Difference feature
Last update: March 23, 2025
- Applies to:
- Experience Manager 6.4
- Experience Manager 6.5
- Topics:
- Authoring
CREATED FOR:
- Beginner
- User
For publishing from AEM Sites using Edge Delivery Services, click here.
AEM Sites’ page difference capabilities show provides a quick, color-coded view of what content has changed in a page (version, live copy, launches, language copy).
Comparing page versions
Transcript
Hi there. For an AEM Sites content author, some of the day to day activities involve; creating, managing and organizing content. Authoring a site’s page is an iterative process. Content authors often need to make updates to a site page to fuel the needs of an end user and improve the overall experience. At the same time it is essential to track what changes executed by a content author helps to drive the business goals and improve user engagement. To help with tracking changes and how it impacts your business, AEM provides content authors with the ability to compare the current version of a page side by side with any of the saved page versions. With the page comparison tool, you can not only compare a page version to its current version, but also perform a page comparison between live copies, launches and language copies. In this video, we’re going to cover how to perform a page comparison for a sample site page. Let’s see how to perform a page comparison for your site page. From the AEM homepage, navigate to AEM Sites console and open the WKND sample site. As a content author, we have been assigned a task to identify the changes for the WKND site River Rafting Adventure page. From the rail selector drop down, select the timeline option. Select the page and the site toolbar gets displayed. The timeline provides the history log of a specific page while versioning creates a snapshot of a page at a particular point in time. When you’re in the timeline option, you can filter the timeline using the drop down here. The timeline displays all the events associated with the page. And let’s filter the timeline just by versions. The page that we selected has an initial page version created and saved as version one. Version two contains a few edits performed on top of version one and saved as a new version. So how do we know what has changed from a saved version to the current version of our page? Viewing one page version and then viewing the current page version is inefficient and prone to error and inaccuracy. So to make it easy for content authors, AEM provides a side by side comparison tool for understanding how a saved page version differs from the current version of your page. Let’s select the initial version of our page and then choose to compare to current option. Note that, page comparison is not for two saved versions. Instead, the comparison is performed between a saved version of your page and its current state. You can view the page difference window open with a side by side comparison of the current version on the left hand side and the page version that we selected on the right hand side. The source of both pages is displayed in the header bar at the top of the browser window. The page different shows the change at HTML and component level. For component changes, the component get highlighted with a colored border and for HTML changes, you can notice the HTML change color coded. In the current version of the page, you can notice the title of the page that has been edited. HTML content removed will be marked with a dark red highlight. And for HTML content additions, the text will be highlighted in green. Red highlighting around the component indicates that a component is removed from the current page and components wrapped in green suggest that it is a new addition to the page. A blue highlighting around a component indicates that a component is either moved or changed. To focus on a particular content, you can click on the fullscreen icon from either side of the side by side difference to enlarge it to the full browser window. The selected side will fill the entire window but the bar will remain at the top, allowing you to switch between the two pages. You can accept the side by side differences at any time by clicking the close button in the header. To help with tracking changes and how it’s impact your business, AEM provides content authors with the ability to compare current version of the page by side by side With any of the saved page versions. I hope I was able to provide you a good enough description of how page difference helps you improve your business. -
HTML changes
- Green: New content
- Red: Removed content
Component changes
- Green: New component
- Red: Removed component
- Blue: Modified component
Comparing launch pages
Page Difference feature can be also used to identify the difference between blueprints and livecopies, and blueprints and language copies.
Additional Resources
Previous pagePage Versioning
Next pagePage Properties
Experience Manager
- Overview
- Document Authoring
- Overview
- Set up
- Preview and publish
- Document structure
- Default content and sections
- Blocks and autoblocks
- Redirects
- Bulk metadata
- Page metadata
- Author authentication
- How to
- Document audit
- Document permissions
- Document versions
- Document workflows
- Embed iFrames
- Image alt text
- Prevent search engine indexing
- Responsive navigation
- Dynamic Media
- Site migration using Importer
- Customizing the Importer
- Bulk importing using Importer
- Generate Variations
- Experimentation framework
- Setup experimentation framework
- Metadata for experimentation
- Page Authoring
- Generative AI
- Content Fragments
- Experience Fragments
- Edge Delivery Services
- Developing
- Edge Delivery Services
- AEM Project Archetype
- Getting Started with AEM Sites
- Getting Started with AEM Headless
- Getting Started with AEM SPA Editor and React
- Extending Page Properties
- Responsive breakpoints
- Developing with the Style System
- Style System Best Practices
- Accelerate content velocity with AEM style systems
- Developing for Page Difference
- Implementing Simple Search
- Social Media Sharing
- Customizing Component Icons
- Personalization
- Components
- SEO
- Single Page Applications
- Multi Site Management
- Introduction to Language Copy
- Live Copy and Blueprint
- Create a Live Copy
- Manage Live Copy inheritance on a component
- Manage Live Copy inheritance on a page
- Live Copy overview console
- Create a Language Copy
- Translation Projects
- Create a multi-lingual Translation Project
- Translation Jobs
- Updating a Language Copy with Launches
- Create a Language Copy page
- Translation Job status
- Create a country site from Language Copy
- Translation
- Integrations
- Experience Platform
- Tags in Adobe Experience Platform
- Adobe Client Data Layer
- Analytics
- Adobe Target
- Overview
- Add Target extension to Tags Property
- Load and fire a Target call
- Create Adobe Target Cloud Service account
- Export Experience Fragments to Adobe Target
- Create Target Activity using Experience Fragment Offers
- Personalization using Visual Experience Composer
- Personalization of full web page experience
- Learn From Your Peers