AngryOrange’s

Data Layer

Google Tag Manager

Software

Logo

How Goods Become Great. Thrasio is a brand that constantly looks to the future, searching for ways to make its company more diverse and inclusive, its processes more sustainable, and our world more equitable. As one of the largest, fastest-growing Amazon brand aggregators on the scene, Thrasio is on a mission to reimagine how the world’s most loved products become accessible to everyone. They use world-class expertise and the smart application of data science to figure out why particular products garner great ratings, reviews, and rankings. 

To expand their expertise, Thrasio has teamed up with Sogody to work on the data layer design and implementation for AngryOrange. Our team’s mission was to think of any business problem and turn it into a data problem. We worked on the design of the data layer, the identification of events, and the implementation of the data layer.

The data layer design

The data layer requires careful planning and consideration. As part of our delivery to AngryOrange, we designed and built a flexible data layer that provided the client with granular control over their data. 

The data layer represents a single point for data collection of events that occur during a visitor's journey. Typically, a tag manager subscribes to changes in the data layer and fires third-party tags accordingly. The introduction of a data layer ensures that data that flows into these third-party systems remains consistent. 

When referring to the design of the data layer, we are primarily talking about the design of the events that are pushed to this data layer. For AngryOrange, our team opted for an event-driven data layer, where events are pushed into the data layer as they happen through the visitor journey. 

Each event consists of some standard attributes, which directly map into a number of analytics tools, such as Google Analytics:

  • Event - A field that identifies a type of event (e.g. click);

  • Event Category - A category in which events are grouped in, primarily through site section (e.g. PDP, PLP);

  • Event Label - A label that holds information about the event (e.g. a click event could have the “Add to cart” label).

For more complex scenarios, the event is also enhanced with custom attributes that further describe the event. For instance, an “add to cart” event would also include details about the product(s) added to cart, quantity, and so on. 

Success stories img

Identification of events

After thoroughly designing the data layer, the next step for the development is the identification of all events that need to be tracked, as well as the information that these events will contain. The data layer is the component that coordinates, transforms and stores information within AngryOrange. For the development of AngryOrange’s data layer, each page was looked at in great detail to cover all interactions that the user has with the website. 

Succeeding in analyzing all pages, we designed and built a flexible data layer that provided the client with granular control over their data, including event tracking like navigation, social media redirects, pop-up modals, filled forms, etc.

Besides the events that were identified, we also had custom events requested that were more specific to the client’s needs. An example being an event getting triggered upon a user visiting a product that is out of stock. 

Implementation of the data layer

In order to obtain a unified data layer and consistent client-side data, we utilized a number of different methods. The implementation of the data layer events consisted of enhancing clickable elements with data attributes, thus describing the type of event. For other scenarios, custom client-side scripts were utilized in order to populate the data layer as events occur. This includes intercepting Shopify events and mapping them correctly to our data layer structure. 

The end result is data consistency across all third-party tools.

Share with your network