June 23, 2024

Things you may need to be careful about data layer tagging in React

Disclaimer

Please hold your middle finger down while reading this. All the figures and situations in this dumpster are fictional for twisted entertainment(wink, wink*). So stop thinking this is about you.

Oh, by the way, my article is not at PG level. Violent language is included, and this post has a very rough and vulgar tone. Just a little bit. Just…a pinch of the salts.

Part of the reason is that I’m a so-called ‘damn millennial’ who grew up watching Deadpool, Kevin Smith movies and listening to Eminem, and the rest of the reason is that my once delicate, greenhouse flower-like temperament has become quite rough due to the trauma I’ve accumulated while working in this industry.

Don’t worry; this despair and anger of mine isn’t directed at anyone in particular.

Feel free to leave my digital hell’s kitchen, my insanity playground, whenever you like without a dramatic diva ruckus.

My subtle dyslexic arse with a lack of dopamine gave up proofreading after multiple tries. If you see grammatical errors or some awkward sentences, move on. Use the context clues to understand my post, thanks.

Data tagging in…React!

Ah, data layer tagging - the bane of every front-end developer’s existence and the object of every data analyst’s desire. Picture, if you will, a world where numbers dance, events trigger at the drop of a hat, and every user interaction is meticulously recorded like the diary of a particularly obsessive-compulsive teenager. Welcome to the wild, wonderful, and occasionally hair-pulling world of implementing data layer tagging in the treacherous lands of React development.

Previously, I wrote about my tearful experience on data tagging as a front end developer.

2024-06-15-Things-need-know-about datalayer-tagging-principles

But wait, there’s more!

Friends, Romans, developers, lend me your ears! We gather here today to discuss the critical importance of data layer implementation. It’s the foundation upon which our analytical dreams are built, the bedrock of our data-driven decisions, the… oh, who are we kidding? It’s a pain in the ASCII.

Picture this nightmare scenario: stakeholders demand intricate, dynamic data tagging without a shred of access to the source code. It’s enough to make any developer contemplate a career change to professional pillow screaming. You can explain the impossibility until you’re as blue as a poorly optimised database query, but it’s like trying to teach interpretive dance to a brick wall.

One fateful day, our team’s data guru - bless their ambitious heart - decreed that the data layer should transmit upon a dashboard icon click. Did they consult the dev team when concocting this requirement? Of course not. Why opt for simplicity when you can orchestrate a symphony of chaos?

Now, let’s dive into the special circle of hell reserved for React developers trying to implement data layer tagging:

Clear Definition of Tagging Requirements: Listen up, nerds. You need to spell out these requirements like you’re explaining quantum physics to a goldfish. I once had an analyst give me a requirement doc that was vaguer than a politician’s promise. Result? You don’t wanna know.
Data Collection Specifications: Specify your data collection method like your life depends on it. Because trust me, your sanity does. I’ve seen projects go down in flames faster than a paper airplane in a bonfire because someone thought “just grab all the data” was a valid specification.
Variable and Event Mapping: Map out your variables and events like you’re planning a heist. Be specific, be clear, and for fuck’s sake, be consistent. I’ve seen variable names change more often than a chameleon on a disco floor. It’s not cute, it’s not clever, it’s just confusing.
Data Layer Implementation: Structure your data layer like you’re building the world’s most anal-retentive Lego set. I once had a client whose data layer was structured with all the logic of a Jackson Pollock painting. Spoiler alert: it didn’t end well.
Data Quality Assurance: QA isn’t just a suggestion, it’s a fucking lifeline. Implement rigorous testing procedures or prepare to explain to your boss why the CEO’s dashboard looks like it was designed by a drunk monkey with a crayon.
Collaboration and Communication: Establish clear communication channels or prepare for a game of Chinese whispers that ends with you implementing a data layer for a banana stand instead of a banking app.
Documentation and Examples: Document everything like you’re leaving instructions for a time traveler from the past. I once inherited a project with documentation that simply said “It works, don’t touch it.” Spoiler: It didn’t work, and I touched it. A lot.
React-specific Implementation: Remember, React is its own beast. React is a JavaScript library for building user interfaces, and it has its own specific way of handling data and state. Ensure that the data layer tagging implementation aligns with React’s component-based architecture and state management patterns. Treat it with respect or it’ll bite you in the ass faster than you can say “virtual DOM.”
Component Hierarchy: Understand the component hierarchy or prepare to play a game of “Where’s Waldo?” with your data points. Trust me, it’s not as fun as it sounds.
Clear Definition of Tagging Requirements: Listen up, folks. You need to spell out these requirements like you’re explaining rocket science to a toddler. I once received a requirement doc that was vaguer than a politician’s promise. Result? A data layer that was about as useful as a chocolate teapot. For example, if you need to track button clicks, specify which buttons, under what conditions, and what data should be captured (e.g., button ID, user ID, timestamp)
Asynchronous Operations: React applications often involve asynchronous operations, such as API calls or data fetching. Discuss how these operations should be tracked within the data layer and coordinate with the React developer to implement the necessary tagging during these operations.
React Lifecycle Methods: Familiarise yourself with React’s lifecycle methods and their usage in the application. Consider whether certain data points should be captured during specific lifecycle phases (e.g., component mounting, updating, unmounting) and communicate this to the React developer.
```
- Mounting phases 
- Updating phases 
- Unmounting phases 
- Newer lifecycle methods and hooks
```
State Management: React applications commonly utilise state management libraries like Redux or React Context API. Ensure that the data layer implementation takes into account the proper access and update of state variables when capturing data points.
Event Handling: Identify the appropriate user interactions or events that need to be tracked for tagging purposes. Communicate these events clearly to the React developer and discuss how they should be handled and triggered within the React components.
```
- Event handling in class components
- Event handling in functional components
- Examples of using onClick events
```

Dive deeper into React’s lifecycle phases (Mounting, Updating, Unmounting) and their associated methods. Explain how understanding these phases can help in implementing data layer tagging more effectively. Discuss the importance of newer lifecycle methods and hooks.

Explore event handling in React, differentiating between class and functional components. Provide examples of onClick events, which are crucial for tracking user interactions in data layer tagging.

This expanded section provides a more comprehensive look at React’s inner workings, which is crucial for data analysts to understand when implementing data layer tagging in React applications. It helps bridge the knowledge gap between data analysts and React developers, facilitating better collaboration and more effective implementation of data layer tagging.

Remember to emphasise how this knowledge can be applied specifically to data layer tagging. For example:

During the mounting phase, you might initialise certain data layer variables.
In the updating phase, you could track changes to important state variables.
The unmounting phase could be used to send final tracking events before a component is removed.
Event handlers are perfect spots to trigger data layer events for user interactions.

Remember, folks: implementing a data layer in React is like performing brain surgery while riding a unicycle. It’s possible, but it ain’t pretty, and you’re probably going to fall on your face a few times before you get it right.

Just when you thought it couldn’t get any worse.

The cherry on top of this digital disaster? Our data-driven colleagues decided to form their own little Analytics Avengers. They’ve started playing office politics with the finesse of a bull in a china shop, questioning development capabilities as if they’re hosting ‘America’s Next Top Coder.’

The client’s homepage was a React wonderland, and this dashboard icon? It was a micro-component so small you’d need an electron microscope to find it. This tiny bastard was nested deeper than Inception, dependent on a navbar component, with different versions for mobile and desktop. And us? We’re the external agency with as much authority to modify these React components as a snowball has in hell.

We’re stuck with a pre-built structure, but our internal team’s data enthusiasts, in their boundless optimism, agreed to client requirements that demonstrate about as much understanding of our technical constraints as a goldfish has of quantum physics.

According to these geniuses, the project’s gone tits up because I couldn’t code my way out of a wet paper bag. Yeah, sure, it’s totally not because they set impossible requirements without consulting the dev team. No, it must be because I forgot to sprinkle my magical coding fairy dust over the keyboard.

I’m about ready to lose myself in the music, the moment, I own it, I’m about to break. You want to know what’s really grinding my gears? If these spreadsheet wizards who’ve never met a pivot table they didn’t like had an issue, they could’ve, oh I don’t know, ASKED ME TO REVIEW THE REQUIREMENTS when they were setting them with the clients.

But no, that would’ve been too logical, too efficient, too fucking sane for this asylum masquerading as a workplace. Instead, they’d rather play a game of “Pin the Tail on the Developer” and wonder why the project’s circling the drain faster than my will to live.

It’s enough to make you want to grab the mic and spit some lines about the insanity of it all, but unlike Eminem, we can’t just say “fuck it” and walk off stage. We’re stuck here, trying to make the impossible possible, feeling like we’re trapped in a Kevin Smith movie where everyone’s a code monkey and the punchline is always at our expense.

To quote the great philosopher Marshall Mathers, “Will the real Slim Shady please stand up?” ‘Cause I’m about ready to stand up and tell these chucklefucks exactly where they can shove their impossible requirements and office politics.

To accurately extract a data layer, you need to understand how that sucker operates in the browser and how the website rendering works. It’s not rocket science, but it’s sure as hell not finger painting either.

Now, here’s the kicker - the front-end developers, you know, those caffeine-powered code monkeys who actually build this shit? They understand this better than anyone. They’re the Jedi Masters of this digital dojo, the Dumbledores of this coding Hogwarts.

But no, you decide to ignore their advice. Where in the name of all that’s holy did you learn that particular brand of stupidity? Did you get your degree from the School of Impractical Theories? Or maybe you graduated summa cum laude from the School of Ignoring People Who Actually Know What The Fuck They’re Talking About?

Now, if you’ll excuse me, I need to go scream into a pillow until I either pass out or come up with a plan.

But hey, what do I know? I’m just the developer who’s going to have to clean up this mess when your brilliant ideas inevitably crash and burn. No biggie. I’ll just be over here, banging my head against the wall and wondering where my life went so horribly wrong.

Disclaimer that I forgot to put above:

The Grammarly AI (Hey, Grammarly - If you have read this, your support will be very welcomed. Thanks) gave this article a bit of a nudge. Cause…Well, my brain - perpetually dysfunctions to control dopamine and serotonin - sometimes has working memory issues of dory from finding Nemo. Sometimes, it decides to skip grammar checks or even forgets to finish sentences.

However, please make no mistake. Every bit of this raw and unfiltered content spewed forth from my twisted soul. I mean…It’s quite obvious. AI can’t get this chaotic text from their generative arse. Better or…for worse, It’s all me.

2022-08-17-CRO-Glossary-Target-Travelling to the office

2022-08-03-Website-Update-Jekyll-DrumConversion

[[ _notes/KR/WebDevelopment/The shits drive me crazy-CRO requirement conflicting to web product ]]