PHPInfo

How to Use Exploration Reports in Google Analytics 4

7Feb

By phpInfoNo Comments

Google Tag Manager

How to Use Exploration Reports in Google Analytics 4

Compared to Universal Analytics, Google Analytics is missing a lot of predefined reports that we are familiar with (e.g. landing page, site search, etc.). I don’t know if this will change in the future, but I hope so! In the meantime, we got a pretty powerful suite of reporting capabilities called Analysis Hub. It’s the place where you can do ad-hoc analysis and dig deeper into your data. In today’s blog post, I wanted to focus on one particular part of it, Exploration Reports in Google Analytics 4. Table of contents Main components Variables Segments Dimensions and metrics Tab settings Segment comparisons Rows Columns Values Filters The Output (report) Examples of Exploration reports Landing pages report Order coupon code report Additional things ...

2Feb

By phpInfoNo Comments

Javascript, Web Tricks

How to disable the mobile keyboard from displaying on click of the input field

Have you ever needed a way to disable the mobile screen keyboard from displaying for a specific input field? I was recently working on a Shopify website where there was a filter on the products listing page. I found an issue that on click of that filter it was opening keyword on the mobile screen. I debugged and found that it's a bootstrap filter and creating an input box automatically at run time. The solution to this was rather simple and I’d like to share it here for anyone else who is looking for a solution to this problem. To block the mobile device keyboard from displaying you simply need to set the field to readonly with jQuery as displayed in the code below. // Using ID field$('#input_id').attr('readonly','readonly'); // Using class name$('.input_class').attr('reado...

31Jan

By phpInfoNo Comments

Google Tag Manager

Enhanced Measurement in Google Analytics 4: The Guide

When installed on a website (without any additional configurations), Universal Analytics (a.k.a. GA3) was tracking just page views. If you want to see any other interactions in your reports, you’d have to implement additional event tracking. To improve that, Google Analytics 4 offers more out-of-the-box interactions that are tracked without the need to change the website’s code or configure a GTM container. That suite of auto-tracking features is called Enhanced Measurement. Of course, you will still need to implement a bunch of recommended or custom events to get the most out of GA, but the enhanced measurement is a welcome addition for those who are just looking for very basics. However, there are some nuances as well (that I’ll also talk about). Table of Contents + Hide table of co...

17Jan

By phpInfoNo Comments

CSS Tricks

How to Make GraphQL and DynamoDB Play Nicely Together

Serverless, GraphQL, and DynamoDB are a powerful combination for building websites. The first two are well-loved, but DynamoDB is often misunderstood or actively avoided. It’s often dismissed by folks who consider it only worth the effort “at scale.” That was my assumption, too, and I tried to stick with a SQL database for my serverless apps. But after learning and using DynamoDB, I see the benefits of it for projects of any scale. To show you what I mean, let’s build an API from start to finish — without any heavy Object Relational Mapper (ORM) or GraphQL framework to hide what is really going on. Maybe when we’re done you might consider giving DynamoDB a second look. I think it is worth the effort. The main objections to DynamoDB and GraphQL The main objection to DynamoDB is that it is...

17Jan

By phpInfoNo Comments

Web Tricks

Integrating A Dialogflow Agent Into A React Application

Dialogflow is a platform that simplifies the process of creating and designing a natural language processing conversational chat assistant which can process voice or text input when being used either from the Dialogflow console or from an integrated web application. Although the integrated Dialogflow Agent is briefly explained in this article, it is expected that you have an understanding of Node.js and Dialogflow. If you are learning about Dialogflow for the first time, this article gives a clear explanation of what Dialogflow is and its concepts. This article is a guide on how a built a Dialogflow agent with voice and chat support that can be integrated into a web application with the help of an Express.js back-end application as a link between a React.js Web application and the Agent ...

17Jan

By phpInfoNo Comments

CSS Tricks

How to Add Commas Between a List of Items Dynamically with CSS

Imagine you have a list of items. Say, fruit: Banana, Apple, Orange, Pear, Nectarine. We could put those commas (,) in the HTML, but let’s look at how we could do that in CSS instead, giving us an extra level of control. We’ll make sure that last item doesn’t have a comma while we’re at it. I needed this for a real project recently, and part of the requirements were that any of the items in the list could be hidden/revealed via JavaScript. The commas needed to work correctly no matter which items were currently shown. One solution I found rather elegant solution is using general sibling combinator. We’ll get to that in a minute. Let’s start with some example HTML. Say you start out with a list of fruits: <ul class="fruits"> <li class="fruit on">Banana</li> <li cl...

10Jan

By phpInfoNo Comments

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

4Jan

By phpInfoNo Comments

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

21Dec

By phpInfoNo Comments

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...

21Dec

By phpInfoNo Comments

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...

21Dec

By phpInfoNo Comments

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 Contents Get Ready: A Healthy Mindset Setting Realistic Goals Defining The Environment On-page Off-page...

14Dec

By phpInfoNo Comments

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

14Dec

By phpInfoNo Comments

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...

6Dec

By phpInfoNo Comments

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...

1Dec

By phpInfoNo Comments

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 ...