Our Sitecore 9.0 MVC solution makes extensive use of personalization rules to conditionally hide certain Renderings. But we have marketing automation software that scans the DOM for certain data-tracking attributes on all of the components (renderings). We would like to be able to tell if a component has been hidden and instead of rendering that component to the DOM, just render a non-visible "stub" like so:
<div class="data-tracking-hidden" data-tracking-bladetype="Large Hero" data-tracking-bladename="Large Hero 1" data-tracking-rule="Default" style="display: none;" />
I am planning on having the Models for these components throw their data-tracking attributes into a Dictionary in the HttpContext.Current.Items when they're instantiated, with the Rendering ID as the key. This Dictionary would only hold the renderings that will be hidden. That part isn't too hard. Then when the actual rendering takes place I need to somehow check if the current Rendering has an ID matching one in the Dictionary, and if so render the stub div with data-tracking attributes taken from this Dictionary, instead of skipping the Rendering altogether.
This is where I am having trouble. From my research so far, I think I have to override the Personalize Processor in the mvc.customizeRendering Pipeline using patch:instead. Or add a new Processor before this one using patch:before. I added a new class RenderHiddenComponents that inherits from CustomizeRenderingProcessor and have been debugging trying to find the right part of the Pipeline to plug into but no luck so far.
Does this seem like the right Pipeline and Processor to update to accomplish this task? And once I get inside the Processor and have access to args.Rendering, how would I 1. make sure it renders instead of hides and 2. make it render the one-line stub div instead of the actual component?
Perhaps I need to create a new component for this purpose with a Controller Rendering, Controller, Model, and View. The Model would contain the data-tracking field values, and the View would just be the hidden div that holds those values. Then in the Pipeline, somehow change the Rendering to this new one instead of hiding it. Or maybe there's a simpler way. Any ideas are appreciated, thanks.