Sunday, January 17
Google Tag Manager

Track Clicks with Google Analytics 4 and GTM

If you are just starting to get a grip on Google Tag Manager, click tracking is probably one of the most demanded things you want to implement. There are many clickable elements on your website and you want to understand how website visitors are interacting with them.In this blog post, we will take a look at how to track clicks with Google Analytics 4 and Google Tag Manager.First, we will look at some automatic click-tracking capabilities in GA4, and then we will extend the list of tracked events with help of GTM.By the way, if you are completely new (or just starting) with Google Analytics 4, download my free e-book below.Ready? Let’s get started. Table of contents + Hide table of contents +Why track clicks? Automatic click tracking in GA4 (Enhanced Measurement) Track...
A Guide to DebugView in Google Analytics 4
Google Tag Manager

A Guide to DebugView in Google Analytics 4

When you implement something in Google Analytics (or any other platform), never trust your gut. Always verify that the data was actually received by the platform and is displayed in reports the way you expect it.In Universal Analytics, this was done by checking real-time reports (to verify events, conversions, page views). But if you wanted to debug things like Enhanced Ecommerce, you had to wait until the data lands in the standard reports. This means hours of delay between the configuration and the actual debugging.Luckily, that has changed in GA4 with a new feature called DebugView (I mean, it’s new if we compare to Universal Analytics). DebugView in Google Analytics 4 allows checking the incoming data at a more granular level (without the need to wait for hours).Table of Conte...
Recommended Events in Google Analytics 4
Google Tag Manager

Recommended Events in Google Analytics 4

There’s a lot to cover when it comes to event tracking in GA4. But since the platform is now event-based, it’s natural that I have a bunch of guides related just to events. In this quick guide, we’ll take a closer look at one group of events, recommended events. The list of recommended events (in alphabetical order) I presume that some of the visitors of this blog post are just looking for the full list of all recommended events in Google Analytics 4. If you’re one of them, then here it is. I have combined all lists from Google’s documentation into a single list. But if you want to learn the full picture of the recommended events, then jump to the next chapter and read/watch with great attention.add_payment_info (when a user submits their payment information).Parameters: coupon, curre...
CSS Tricks

How to Use the Locomotive Scroll for all Kinds of Scrolling Effects

I was recently looking for a way to perform scrolling effects on a project and I stumbled on the Locomotive Scroll library. It lets you perform a variety of scrolling effects, like parallax and triggering/controlling animations at scroll points.You might also call it a “smooth scrolling” library, but it doesn’t leverage native smooth scrolling — it does just the opposite by virtualizing scrolling and ensuring it’s always smooth. You could probably consider this “scrolljacking” so if you hate that generally, you might hate this, but UX research seems rather mixed on whether it’s actually bad or not. The homepage will give you a good sense of how it works and feels.Let’s look at the basics of using Locomotive-Scroll JavaScript and how to leverage it to for delightful user experiences. Wh...
Web Tricks

Search Engine Optimization Checklist (PDF)

Search engine optimization (SEO) is an essential part of a website’s design, and one all too often overlooked. The most beautiful, spectacular site in the world won’t do anyone much good if people can’t find it on Google (or Bing, or DuckDuckGo). Implementing SEO best practice doesn’t just give you the best chance possible of ranking well in search engines; it makes your websites better by scrutinizing quality, design, accessibility, and speed, among other things. It’s a daunting world for those who aren’t familiar with it (and even those who are at times), so this checklist breaks down key factors to consider when undertaking an audit. If you’re ready to get stuck in, read on. Table Of ContentsGet Ready: A Healthy Mindset Setting Realistic Goals Defining The Environment On-page Off-page...
CSS Tricks, Javascript

Let’s Create a Lightweight Native Event Bus in JavaScript

An event bus is a design pattern (and while we’ll be talking about JavaScript here, it’s a design pattern in any language) that can be used to simplify communications between different components. It can also be thought of as publish/subscribe or pubsub.The idea is that components can listen to the event bus to know when to do the things they do. For example, a “tab panel” component might listen for events telling it to change the active tab. Sure, that might happen from a click on one of the tabs, and thus handled entirely within that component. But with an event bus, some other elements could tell the tab to change. Imagine a form submission which causes an error that the user needs to be alerted to within a specific tab, so the form sends a message to the event bus telling the tabs co...
A Guide to Custom Dimensions in Google Analytics 4
Google Tag Manager

A Guide to Custom Dimensions in Google Analytics 4

The thing with Google Analytics (or any other similar tool) is that it won’t help you much if you use it just “out of the box”. I’m talking about the classic “just add one line of JavaScript to your site and start tracking”. If you want to benefit from a platform, you have to customize your data collection.Every business is unique and you might want to track different things in order to understand how different parts are performing.And one of the ways how you can customize it is custom dimensions. Instead of just having some generic data, you can go really deep with your setup. Even though Google Analytics 4 offers better automatic tracking capabilities (compared to Universal Analytics), that’s not enough.In this blog post, I’ll show you how to configure Custom Dimensions in Google A...
CSS Tricks

How to Animate a SVG with border-image

Let’s take a look at how to combine the border-image property in CSS with animated SVGs that move around a border. In the process, we’ll cover how to hand-craft resizable, nine-slice animated SVGs that you can use not only re-create the effect but to make it your own.Here’s what we’re making:Spooky skulls? Retro arcade? What’s not to like?! This is actually part of The Skull, a capture-the-flag riddle I’m working on that’s designed to explore the internals of Arduino and its microcontroller. I searched how to animate a border like this, but couldn’t find any useful examples. Most of the stuff I found was about marching ants, but unfortunately, the stroke-dasharray trick doesn’t work with skulls, let alone more complex shapes.So, in the spirit of learning and sharing, I’m blogging abo...
Web Tricks

Reactive Variables In GraphQL Apollo Client

In this article, we will look at how to set up reactive variables, how the GraphQL cache polices come into place in defining read and writes to the cache, and provide the ability for developers to add types that exist on the client-side alone so that we can structure queries for client-side variables same way we can for remote GraphQL data. After learning more about the fundamentals of reactive variables, we will build a simple app that switches the theme of our application to either dark mode or light mode based on the value of our reactive variable. We will be looking at how to query a reactive variable, how to update the value stored in a reactive variable, and how the change in value triggers updates in components that depend on the reactive variable for certain actions to occur.The ...
CSS Tricks

Understanding flex-grow, flex-shrink, and flex-basis

When you apply a CSS property to an element, there’s lots of things going on under the hood. For example, let’s say we have some HTML like this: <div class="parent"> <div class="child">Child</div> <div class="child">Child</div> <div class="child">Child</div> </div> And then we write some CSS… .parent { display: flex; } These are technically not the only styles we’re applying when we write that one line of CSS above. In fact, a whole bunch of properties will be applied to the .child elements here, as if we wrote these styles ourselves: .child { flex: 0 1 auto; /* Default flex value */ } That’s weird! Why do these elements have these extra styles applied to them even though we didn’t write that code? Well, that’s because some properti...
CSS Tricks, Javascript

How to Animate the Details Element Using Web Animations API

Animating accordions in JavaScript has been one of the most asked animations on websites. Fun fact: jQuery’s slideDown() function was already available in the first version in 2006.In this article, we will see how you can animate the native <details> element using the Web Animations API. CodePen Embed Fallback HTML setup First, let’s see how we are gonna structure the markup needed for this animation.The <details> element needs a <summary> element. The summary is the content visible when the accordion is closed. All the other elements within the <details> are part of the inner content of the accordion. To make it easier for us to animate that content, we are wrapping it inside a <div>. <details> <summary>Summary of the accordion</summary&g...
CSS Tricks, Web Tricks

Quick LocalStorage Usage in Vue

localStorage can be an incredibly useful tool in creating experiences for applications, extensions, documentation, and a variety of use cases. I’ve personally used it in each! In cases where you’re storing something small for the user that doesn’t need to be kept permanently, localStorage is our friend. Let’s pair localStorage with Vue, which I personally find to be a great, and easy-to-read developer experience. Simplified example I recently taught a Frontend Masters course where we built an application from start to finish with Nuxt. I was looking for a way that we might be able to break down the way we were building it into smaller sections and check them off as we go, as we had a lot to cover. localStorage was a gsolition, as everyone was really tracking their own progress personally, ...
Data Visualization With ApexCharts
React, Web Tricks

Data Visualization With ApexCharts

ApexCharts is a modern charting library that helps developers to create beautiful and interactive visualizations for web pages with a simple API, while React-ApexCharts is ApexChart’s React integration that allows us to use ApexCharts in our applications. This article will be beneficial to those who need to show complex graphical data to their customers. Getting Started First, install the React-ApexCharts component in your React application and import react-apexcharts. npm i react-apexcharts apexchartsimport ReactApexCharts from 'react-apexcharts' The core components of an ApexChart is its configuration object. In the configuration object, we define the series and options properties for a chart. series is the data we want to visualize on the chart. In the series, we define the data and n...
Web Tricks

Getting Started With Next.js

Lately, Next.js has termed itself The React Framework for Production, and with such bold claim comes a bevy of features that it offers to help you take your React websites from zero to production. These features would matter less if Next.js isn’t relatively easy to learn, and while the numerous features might mean more things and nuances to learn, its attempt at simplicity, power, and perhaps success at it is definitely something to have in your arsenal.As you settle in to learn about Next.js, there are some things you might already be familiar with and you might even be surprised at how it gives you a lot to work with that it might seem almost overwhelming at face value. Next.js is lit for static sites and it has been well-engineered for that purpose. But it also takes it further with i...
CSS Tricks

Comparing Various Ways to Hide Things in CSS

You would think that hiding content with CSS is a straightforward and solved problem, but there are multiple solutions, each one being unique.Developers most commonly use display: none to hide the content on the page. Unfortunately, this way of hiding content isn’t bulletproof because now that content is now “inaccessible” to screen readers. It’s tempting to use it, but especially in cases where something is only meant to be visually hidden, don’t reach for it.The fact is that there are many ways to “hide” things in CSS, each with their pros and cons which greatly depend on how it’s being used. We’re going to review each technique here and cap things off with a summary that helps us decide which to use and when. How to spot differences between the techniques To see a difference between...