A good website is always changing. And that’s a good thing. As teams continue to learn better ways to implement complex features, customers will expect updated web designs and discerning user experiences to easily get to where they need with less friction. From the development side, that means Document Object Model (DOM)/JavaScript (JS) changes. With proliferating improvement, it is extremely easy to unexpectedly break your analytics tracking. We all know when tracking stops, it will haunt your organization for as long as 2 years - looming within your year-over-year (YoY) reporting. No doubt, it’s also painful to have to explain an issue wreaking havoc for that long.
When a website is in continuous flux: how do you keep your analytics tracking from breaking?
At Content\Thread, our approach is to decouple analytics code with DOM/JS. More precisely, our method is based more on a loose coupling than a pure decoupling.
The first step is to educate your developers on expected changes and your anticipated approach. Share the benefits of tracking and how it can show value to new features - accentuating the hard work your developers are doing. Since you cannot be everywhere at once, ask your developers for help in case a new feature comes up that you have not had a chance to submit a request for on the analytics front yet. Many times, I have found developers will even spec out in code what they think I am going to ask for before I do! This is a clear sign of a highly supportive, communicative team but it also ensures the standard is the same across the site for all of us.
EDDL (Event Driven Data Layer)
When using Adobe Launch/Adobe Analytics, going with the EDDL approach sets you up to have normal page tracking but also single-page applications (SPAs). This supports future development regarding where they go. EDDL also keeps all your analytics calls in a JS array push.
HTML5 Data Attributes
Leveraging these attributes keeps you from having to use IDs/cascading style sheet (CSS) classes to trigger from. This prevents any changes initiated by your development team from breaking Adobe Launch rules.
A code example:
<a data-track-click-label="home:banner:Learn More"
data-track-click-enabled="true"
href="/learn-more">
Learn More
</a>
A decoupled architecture is a framework for complex work allowing components to remain completely autonomous and unaware of each other. When your organization’s websites are always on the go, building in this freedom allows your team to introduce new features without ostracizing your analytics tracking. Yes, change is good – but change with less headaches is even better.