On The Importance of Action From Web Data Layers & Goal Setting
By: Brad Yale
Tags: Web Development, Analytics, UX, Data Science, Digital Marketing

All too often I deal with clients and third party agencies who make a living off of “presenting data”. I put “presenting data” in quotes because the presentation is nothing more than a dashboard of analytics, raw numbers, built through a 3rd party tool dashboard like Google Analytics, Adobe Tableau, or SEMRush.

As someone who finds himself constantly at the cross roads of building content and digital strategies off the power of analysis of analytics, anytime I sit in on a “data presentation” I instinctively roll my eyes and ask one question: “that’s nice but so what?”

Data for the sake of data is a waste of everyone’s time. Unless you know what to do with that data, unless you can provide insight into why the numbers matter and map it to action, paying for that data is flushing your budget down the money.

Thus, we need to talk about understanding data layers built into a website and more importantly, understanding how to leverage those layered data points for action.

Website User Action Data Collection

In web development, it is a common practice to separate layers of a system into different layers. This practice is done to split elements of a system into individual components with the express purpose of understanding how they relate to one another. A good example of this is the HTML of a webpage vs. the CSS of a webpage vs. the JS tags of a page.

All elements are split apart to understand:

How the structural layer of the website is built and functions (HTML)

How the visual layer of the website is built and managed (CSS)

How the user behavioral layer of the website collects data (JavaScript) to influence, alter, and optimize both the structural and visual layers

Further more, once split, all three elements are split apart to determine:

How the structural and visual layers of the website relate to one another

How the structural and visual layers of the website influence one another given onsite user actions

How the behavioral layer evolves over time with the additional of new HTML and CSS elements

This breaks down into a base equation of:

Structural + Visual + Behavioral = Optimization Outcome

A finite example of this is CTA Button Testing.

CTA Buttons are only one element of a website which should be segmented into structural and visual components to determine what elements — copy and design — of said buttons work the best for your target audience.

The structural element of any button is the copy and content within. As seen above, “sign up now”, “add to cart”, “download now” etc.

The visual element of any button is the size, color, padding, look and feel.

The behavioral element of any button is the JS tag reporting data upon firing segmented as/within DOM.

DOM (Document Object Model) is the organizational chart of the different elements on a webpage. The chart is designed to show flow of elements yet more importantly, how they relate to one another in terms of internal interaction and user behavior engagements.

When assessing the structural vs. the visual of a CTA button, you need to ask a few questions:

Does the content of the button drive action in relation to its visual design?

Does the visual design and website placement (UX bleeding into the equation) of the button drive action in relation to it’s messaging.

A good way to determine this is a basic A/B Test. By running a time defined, unique visitor round robin A/B test on selected CTA buttons, you can easily determine which is performing better and why based on both structural and visual segmentation.

The web never stops evolving. Your A/B testing plans can not remain stagnate.

This is where optimization comes into play. Once determined, it is now up digital marketers to kill under performing elements, push optimally performing elements and, most importantly, retool underperforming elements to once against be tested against their better performing options.

This basic rule is the difference between practicing pure analytics vs. practicing data strategy.

Defining and Separating Elements with Data Unique Identifiers

As noted by Jeff Chasin of Adobe:

Capturing events and interactions that happen when a visitor interacts with a Web application component or feature can be more difficult than capturing simple text or image content interactions, depending on the application design. For example, it’s common to capture text submitted in a form and send it to our Web analytics, CRM, or other systems. It’s also common to use JavaScript to validate or process the form input itself. Capturing form or other application data through the DOM can be challenging, depending on the specific implementation method used, especially as the application code and/or JavaScript in the page executes and interacts with other parts of this behavioral layer. — Analytics and Data Layers: A Look Under the Hood

The question is simple: how do you capture data from similar yet unique structural and visual layers using the behavioral layer?

Answer: custom and unique identifiers per element.

Again, via Jeff Chasin.

For example, we might have a slider in the hero image location on a key landing page. This is typically a large image that slides, rotates, or otherwise changes every few seconds. It’s also common for the hero container element to be marked up as a <div> or <section> in the HTML. Adding a unique id attribute to this container <div> or <section> can make it much easier to identify the elements of interest within the container and to enable data capture for visitor interactions with those elements. <div id="hero"> or <section id="hero"> is one example. This makes DOM traversal easier simply because we can easily start at the container element with the id , instead of starting higher up in the markup or code.

By adding unique identifiers within the DOM tree of elements, it is much easier for marketers and data analyzers to parse each element from one another with the express purpose of determining our base equation of:

Structural + Visual + Behavioral = Optimization Outcome

But you might have noticed a missing element in the equation: the human factor. For that, the qualitative, we need to talk about why data when not tied to benchmarks and goals, resorts to nice yet useless information.

Metrics → Optimizations

Metrics are both:

Quantitative, that which you can measure

Qualitative, that which you can derive meaning from

Too often analytics and data professionals indulge in the quantitative while forgetting about the qualitative.

For example, as I work in the pharmaceutical advertising space, quantitative metrics, as shown below are basic data points like time on site, bounce rate, CTA conversion button rates, pathway analysis, page drop off rate etc.

Qualitative metrics are driven by stake holder interviews, brand goal setting, marketplace landscape analysis, and target audience segmentation/persona developments. The learning from these tasks are deeper understandings and insights into: