Add a custom attribute to body tag in an SXA layout

A couple of years back, whenever i started to write a blog post, I would usually google to find if there are any related results in order to make my post/note unique. These days, I usually chatgpt to find some instructions. While sometimes the instructions might be relevant, many times, the instructions would be wayward to the extent that there are no such technical features in the product. This is when I feel high since my topic is unique and then I flesh-out the topic. 

In similar lines, in this post, I cover adding custom body attributes to Sitecore SXA layout. Custom body tag attributes play a range of different roles like facilitating theming, personalization, GTM-based analytics and A/B testing.

Custom attributes can be added in following couple of ways:

1. Via SXA Layout

2. Pipeline Processor

Understandably, option 1 is useful to work with a specific layout but latter is useful in case of multiple layouts across the Sitecore instance. In case of the pipeline processor, there is more flexibility in terms of apart from the attribute, the approach is good in sending the desired value from the context as part of passed arguments among others. Also, it is cleaner since server-side code stays in the server. Now, let me show how both can be accomplished by passing some random attribute/value. Feel free to optimise to your needs.

1. Pass custom body attribute via SXA layout:

Ensure your page utilises a copy of the existing MVC layout. In other words, I created a layout under - /sitecore/layout/Layouts/Foundation/Experience Accelerator/MVC/MVC Layout-2

This layout referenced a copy of SxaLayout.cshtml named as SxaLayout2.cshtml

1.a Modify existing Sitecore data template with necessary fields:

I chose the template for home page since this is where I want to see the changes:

1.b SxaLayout2.cshtml:

In the body tag, I added the desired attributes and dynamically passed the values fetched from the context item:

End-result:

Once I add the content to the concerned fields, in the page, I can see the results:

I'm unsure if it is just me but I wasn't able to see the changes if I modified the /Views/SxaLayout/SxaLayout.cshtml and hence I created a copy and did the changes in MVC Layout-2 and /Views/SxaLayout/SxaLayout2.cshtml.

2. Pipeline Processor

This seems a better approach since it is centralised. I mimicked the DecoratePage pipeline processor AddBodyClasses to build my custom processor.

Unfortunately, in case of non-SXA sites, this pipeline processor isn't available. So, in that case, a workaround via any another processor or a html helper could be possibilities. Check HttpRequestProcessor code down-under for non-sxa site or alternative implementation.

/////

/////

Patch config under <web root>\App_config\include\zzz

####

####

Build and deploy code/config to web root.

Showconfig.aspx:

I also noticed that if you make the change via pipeline processor patch, the change was visible in the default SxaLayout.cshtml as well as copied SxaLayout2.cshtml body tag -

Note that the screen shot is for SxaLayout.cshtml layout and the attributes added via the cshtml aren't visible in the browser although they are present in the code but yes, the copied layout holds the attributes in one of the earlier screen shots.

HttpRequestProcessor implementation:

I wouldn't hide the fact that this took me quite sometime to implement compared to SXA site since this needed a roundabout approach and I used ClaudeAI to do this implementation so, had to get only what I needed, which is to pick the fields from a separate template specific to Body Attributes, which will hold the collection of fields (prefixed with BodyAttribute_) to add to the Body tag and such a template will in turn be inherited by the page template so that individual pages will have different values for the inherited fields. With that context, here is the implementation for the processor:

/////

/////

Body Attributes patch config:

%%%%%

%%%%%

Page with the inherited fields:

End-result:

Understandably, the HttpRequestProcessor implementation would be a viable/flexible solution since the processor is available both in SXA and non-SXA sites. 

Showconfig.aspx with the processor added to an SXA site:

Hopefully this note provides an idea about how to pass multiple custom body attribute/value. The options are limitless since you could centralise the list and use a multilist to implement page-specific attributes and so on. 

Important note: Although there is a uiLoadLayout processor, this processor is in no way related to loading of layout or body attribute addition discussed in this blog post and instead it is related to Sitecore Data Exchange Framework (DEF) UI integration/layout loading.