Google Analytics 4 Now Integrates With Our Beehive Plugin (For Free)

Universal Analytics is out and Google Analytics 4 is the way forward. In keeping with the times, our free Beehive plugin now integrates with GA4. Learn more about the integration and the advantages of Google’s new analytics overlord.

Earlier this year, Google announced that Google Analytics 4 will be permanently replacing the much beloved Universal Analytics from July 1, 2023.

If you’re using Universal Analytics and haven’t already switched over to the new GA4, we’ll give you the necessary info on what needs to be done.

Plus, we’ll also talk about some of the best GA4 features and how it now easily integrates with our free Beehive plugin.

Continue reading, or jump ahead using these links:

How To Connect Google Analytics 4 To Beehive

Since its inception, Beehive has been tightly integrated with Google Analytics – and as of the plugin’s newest release, now caters to GA4.

It adds a customizable GA dashboard to WordPress, so tracking user behavior can be done from one convenient location.

Beehive stats UI GA4
GA4 stats in Beehive’s UI; a thing of beauty.

As already mentioned, connecting Google Analytics 4 to Beehive is quick and easy.

There are two different ways to connect:

  1. Direct with Google – uses Google’s shared API to display tracking statistics in your site’s wp-admin.
  2. Via GA’s Measurement ID – allows data to be sent to a GA account property.

Once connected, Beehive makes all of your most important stats available to you at a glance – from your most-visited pages to your most-popular referral platforms, and more.

Want a full overview of the plugin’s most powerful tools and features?

Read our how to get the most out of Beehive article.

Now that you’re all set with your Beehive integration, let’s cover some of the best features GA4 brings to the table, that Universal Analytics does not.

Google Analytics 4 Vs. Universal Analytics – What You Need To Know

Why is Google Sunsetting Universal Analytics?

The biggest reason Google is discontinuing Universal Analytics is that UA was originally built to report-on and track independent sessions, rather than considering the multiple touch points visitors will have with any given website.

Google thought this method of measurement and reporting was outdated, and it’s where Google Analytics 4 comes into the picture.

Because GA4 on the other hand, runs across the web, apps, and doesn’t rely exclusively on cookies. It also uses an event-based model to deliver more accurate, user-based reporting.

What is an event-based model?

According to Google: “An event allows you to measure a distinct user interaction on a website or app.”

For example: Loading a page, clicking a link, and completing a purchase – these are all interactions you can measure with events.

GA4 Reports Snapshot
GA4 Reports Snapshot.

Finally GA4 is a lot more privacy-focused than UA, for example, it does not store user IP addresses.

Upgrading Universal Analytics Properties To Google Analytics 4

Google Analytics 4 is now the default for all new properties created in your Google Analytics account.

And depending on the date you created a GA property, you may or may not need to upgrade it.

More specifically:

  • If you created your property before October 14, 2020, you’re likely using a Universal Analytics property.
  • If you created your property after October 14, 2020, you’re likely using a Google Analytics 4 property already (no action is required).

But you can also create a new GA4 property from an existing Universal Analytics property and they will be nicely integrated.

If you need help, Google has put together this detailed guide on switching to GA4 and upgrading properties.

Tracking Link Clicks in Google Analytics 4 Vs. Universal Analytics

When it comes to button and link tracking a big downside with Universal Analytics is that it tracks data based on pageviews and requires the help of Google Tag Manager – a tool that can be time-consuming and complicated for newer users.

GA4 on the other hand, is based on entirely different tracking protocols and is built to handle event tracking out-of-the-box.

Enhanced measurements in Events
Enhanced measurements in Events.

Some events will still require the help of GTM to track properly, but most can be handled directly with GA4 (e.g., link click tracking).

Does Google Analytics 4 work with Data Studio?

The connection with Data Studio is a critical element for GA users.

GA4 connects with Data Studio in exactly the same way that UA does. Even better, new GA4 reports have more data visualization options in Data Studio.

If you want more reporting options you can also use BigQuery, which is freely included with GA4 and can take your insights to the next level.

A summary of the key GA4 features and differences:

  • Uses events instead of session-based data
  • Includes privacy controls (cookie-less measurement, behavioral & conversion modeling)
  • Predictive capabilities offer guidance without complex models
  • Direct integrations to media platforms help drive actions on your website or app

Putting Google Analytics 4 to Work for You

Getting insights into the client journey and funneling that into the growth of a business is very powerful information to have at your fingertips.

Unleash the power of your web and app data from the industry leader in analytics, by putting GA4 directly in your WordPress dashboard with Beehive.

Install Beehive for free, or sign up for the free WPMU DEV plan, which includes Beehive, plus a whole suite of WP plugins and site management tools.

Freezing User-Agent Strings

There's been news about Chrome freezing their User-Agent string (and all other major browsers are on board). That means they'll still have a User-Agent (UA) string (that comes across in headers and is available in JavaScript as navigator.userAgent. By freezing it, it will be less useful over time in detecting the browser/platform/version, although the quoted reason for doing it is more about privacy and stopping fingerprinting rather than developer concerns.

In the front-end world, the general advice is: you shouldn't be doing UA sniffing. The main problem is that so many sites get it wrong, and the changes they make with that information ends up hurting more than it helps. And the general advice for avoiding it is: you should test based on the reality of what you are trying to do instead.

Are you trying to test if a browser supports a particular feature? Then test for that feature, rather than the abstracted idea of a particular browser that is supposed to support that feature.

In JavaScript, sometimes features are very easy to test because you test for the presence of their APIs:

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {
    console.warn("Geolocation not supported");
  }

In CSS, we have a native mechanism via @supports:

@supports (display: grid) {
  .main {
    display: grid;
  }
}

That is exposed in JavaScript via an API that returns a boolean answer:

CSS.supports("display: flex");

Not everything on the web platform is this easy to test, but it's generally possible without doing UA sniffing. If you're in a difficult position, it's always worth checking to see if Modernizr has a test for it, which is kinda the gold-standard of feature testing as chances are it has been battle-tested and has dealt with edge cases in a way you might not foresee. If you actually use the library, it gives you clean logical breaks:

if (Modernizr.requestanimationframe) {
  // supported
} else {
  // not-supported
}

What if you just really need to know the browser type, platform, and version? Well, apparently that information is still possible to get, via a new thing called User-Agent Client Hints (UA-CH).

Wanna know the platform? You set a header on the request called Sec-CH-Platform and theoretically, you'll get that information back in the response. You have to essentially ask for it, which is apparently enough to prevent the problematic privacy fingerprinting stuff. It appears there are headers like Sec-CH-Mobile for mobile too, which is a little curious. Who is deciding what a "mobile" device is? What decisions are we expected to make with that?

Knowing information about the browser, platform and version at the server level if often desirable as well (sending different code in different situations) — just as much as it is client-side, but without the benefit of being able to do tests. Presumably, the frozen UA strings will be useful for long enough that server-side situations can port over to using UA-CH.

Jon Arne Sæterås is nervous:

Professionally, I’ve been hands on with the mobile web space and seen it develop for more than 15 years and I know that many, big and small, websites rely on device detection based on the User-Agent header. From Google's perspective it may seem easy to switch to the alternative UA-CH, but this is where the team pushing this change doesn’t understand the impact:

Functionality based on device detection is critical, widespread and not only in front end code. Huge software systems with backend code rely on device detection, as well as entire infrastructure stacks.

In my most major codebase, we do a smidge of server-side UA detection. We use a Rails gem called Browser that exposes UA-derived info in a nice API. I can write:

if browser.safari?

end

We also expose information from that gem on the client-side so it can be used there as well. There is only a handful of instances of usage for both front and back, none of which look like they would be particularly difficult to handle in some other way.

In the past it's been kinda tricky to relay front-end information back to the server in such a way that's useful on the first page load (since the UA doesn't know stuff like viewport size). I remember some pretty fancy dancing I've done where I load up a skeleton page that executes a tiny bit of JavaScript that did things like measure the viewport width and screen size, then set a cookie and force-refreshed the page. If the cookie was present, the server had what it needed and didn't load the skeleton page at all on those requests.

Tricky stuff, but then the server has information about the viewport width on the server-side, which is useful for things, like sending small-screen assets (e.g.different HTML), which was otherwise impossible.

I mention that because UA-CH stuff is not to be confused with regular ol' Client Hints. We're supposed to be able to configure our servers to send an Accept-CH header and then have our client-side code whitelist stuff to send back, like:

<meta http-equiv="Accept-CH" content="DPR, Viewport-Width">

That means a server can have information from the client about these things on subsequent page loads. That's a nice API, but Firefox and Safari don't support it. I wonder if it will get a bump if both of those browsers are signaling interest in UA-CH because of this frozen UA string stuff.

The post Freezing User-Agent Strings appeared first on CSS-Tricks.

What does “revert” do in CSS?

Miriam Suzanne has a Mozilla Developer video on the subject. The revert value is fairly new, supported in Firefox and Safari, but not yet in Chrome-world. We've already got a couple of related keywords that work on any property which are meant to help control inheritance and reset values.

The difference is small, but important: unset allows inheritance, while initial does not.

Miriam makes the case that revert is actually the most useful of them because it "takes user and user-agent styles into consideration."

I don't disagree. But (and I hate to say this) I do think we need a fourth option, one that has the forcing power of initial, but the UA stylesheet respect of revert. Something like...

.button {
  all: default; /* Not real! */

  /* New styles starting from UA base */
}

These keywords work with any property, but I think using all is the most compelling. It's a way to wipe out all styles on an element to start with a blank slate. That said, none of the three options is quite good enough for that use case. The unset and revert values aren't good enough because they still allow inheritance and so doesn't wipe out styles well enough. The initial value is too strong in that it wipes out defaults you might not expect, like making a <div> inline instead of block.

The post What does “revert” do in CSS? appeared first on CSS-Tricks.

Some Hands-On with the HTML Dialog Element

This is me looking at the HTML <dialog> element for the first time. I've been aware of it for a while, but haven't taken it for a spin yet. It has some pretty cool and compelling features. I can't decide for you if you should use it in production on your sites, but I'd think it's starting to be possible.

It's not just a semantic element, it has APIs and special CSS.

We'll get to that stuff in a moment, but it's notable because it makes the browser support stuff significant.

When we first got HTML5 elements like <article>, it pretty much didn't matter if the browser supported it or not because nothing was worse-off in those scenarios if you used it. You could make it block-level and it was just like a meaningless div you would have used anyway.

That said, I wouldn't just use <dialog> as a "more semantic <div> replacement." It's got too much functionality for that.

Let's do the browser support thing.

As I write:

  • Chrome's got it (37+), so Edge is about to get it.
  • Firefox has the User-Agent (UA) styles in place (69+), but the functionality is behind a dom.dialog_element.enabled flag. Even with the flag, it doesn't look like we get the CSS stuff yet.
  • No support from Safari.

It's polyfillable.

It's certainly more compelling to use features with a better support than this, but I'd say it's close and it might just cross the line if you're the polyfilling type anyway.

On to the juicy stuff.

A dialog is either open or not.

<dialog>
  I'm closed.
</dialog>

<dialog open>
  I'm open.
</dialog>

There is some UA styling to them.

It seems to match in Chrome and Firefox. The UA stylesheet has it centered with auto margins, thick black lines, sized to content.

See the Pen
Basic Open Dialog
by Chris Coyier (@chriscoyier)
on CodePen.

Like any UA styles, you'll almost surely override them with your own fancy dialog styles — shadows and typography and whatever else matches your site's style.

There is a JavaScript API for opening and closing them.

Say you have a reference to the element named dialog:

dialog.show();
dialog.hide();

See the Pen
Basic Togglable Dialog
by Chris Coyier (@chriscoyier)
on CodePen.

You should probably use this more explicit command though:

dialog.showModal();

That's what makes the backdrop work (and we'll get to that soon). I'm not sure I quite grok it, but the the spec talks about a "pending dialog stack" and this API will open the modal pending that stack. Here's a modal that can open a second stacking modal:

See the Pen
Basic Open Dialog
by Chris Coyier (@chriscoyier)
on CodePen.

There's also an HTML-based way close them.

If you put a special kind of form in there, submitting the form will close the modal.

<form method="dialog">
  <button>Close</button>
</form>

See the Pen
Dialog with Form that Closes Dialog
by Chris Coyier (@chriscoyier)
on CodePen.

Notice that if you programmatically open the dialog, you get a backdrop cover.

This has always been one of the more finicky things about building your own dialogs. A common UI pattern is to darken the background behind the dialog to focus attention on the dialog.

We get that for free with <dialog>, assuming you open it via JavaScript. You control the look of it with the ::backdrop pseudo-element. Instead of the low-opacity black default, let's do red with stripes:

See the Pen
Custom Dialog Backdrop
by Chris Coyier (@chriscoyier)
on CodePen.

Cool bonus: you can use backdrop-filter to do stuff like blur the background.

See the Pen
Native Dialog
by Chris Coyier (@chriscoyier)
on CodePen.

It moves focus for you

I don't know much about this stuff, but I can fire up VoiceOver on my Mac and see the dialog come into focus see that when I trigger the button that opens the modal.

It doesn't trap focus there, and I hear that's ideal for modals. We have a clever idea for that utilizing CSS you could explore.

Rob Dodson said: "modals are actually the boss battle at the end of web accessibility." Kinda nice that the native browser version helps with a lot of that. You even automatically get the Escape key closing functionality, which is great. There's no click outside to close, though. Perhaps someday pending user feedback.

Ire's article is a go-to resource for building your own dialogs and a ton of accessibility considerations when using them.

The post Some Hands-On with the HTML Dialog Element appeared first on CSS-Tricks.

The Fight Against Layout Jank

A web page isn't locked in stone just because it has rendered visually. Media assets, like images, can come in and cause the layout to shift based on their size, which typically isn't known in fluid layouts until they do render. Or fonts can load and reflow layout. Or XHRs can bring in more content to be placed onto the page. We're always doing what we can to prevent the layout from shifting around — that's what I mean by layout jank. It's awkward and nobody likes it. At best, it causes you to lose your place while reading; at worst, it can mean clicking on something you really didn't mean to.

While I was trying to wrap my head around the new Layout Instability API and chatting it out with friends, Eric Portis said something characteristically smart. Basically, layout jank is a problem and it's being fought on multiple fronts:

The post The Fight Against Layout Jank appeared first on CSS-Tricks.

What if we got aspect-ratio sized images by doing almost nothing?

Say you have an image you're using in an <img> that is 800x600 pixels. Will it actually display as 800px wide on your site? It's very likely that it will not. We tend to put images into flexible container elements, and the image inside is set to width: 100%;. So perhaps that image ends up as 721px wide, or 381px wide, or whatever. What doesn't change is that image's aspect ratio, lest you squish it awkwardly (ignoring the special use-case object-fit scenario).

The main point is that we don't know how much vertical space an image is going to occupy until that image loads. This is the cause of jank! Terrible jank! It's everywhere and it's awful.

There are ways to create aspect-ratio sized boxes in HTML/CSS today. None of the options are particularly elegant because they rely on the "hack" of setting a zero height and pushing the boxes height with padding. Wouldn't it be nicer to have a platform feature to help us here? The first crack at fixing this problem that I know about is an intrinsicsize attribute. Eric Portis wrote about how this works wonderfully in Jank-Free Image Loads.

We'd get this:

<img src="image.jpg" intrinsicsize="800x600" />

This is currently behind a flag in Chrome 71+, and it really does help solve this problem.

But...

The intrinsicsize property is brand new. It will only help on sites where the developers know about it and take the care to implement it. And it's tricky! Images tend to be sized arbitrarily, and the intrinsicsize attribute will need to be custom on every image to be accurate and do its job. That is, if it makes it out of standards at all.

There is another possibility! Eric also talked about the aspect-ratio property in CSS as a potential solution. It's also still just a draft spec. You might say, but how is this helpful? It needs to be just as bespoke as intrinsicsize does, meaning you'd have to do it as inline styles to be helpful. Maybe that's not so bad if it solves a big problem, but inline styles are such a pain to override and it seems like the HTML attribute approach is more inline with the spirit of images. Think of how srcset is a hint to browsers for what images are available to download, allowing the browser to pick the best one for the scenario. Telling the browser about the aspect-ratio upfront is similarly useful.

I heard from Jen Simmons about an absolutely fantastic way to handle this: put a default aspect ratio into the UA stylesheet based on the elements existing width and height attributes. Like this:

img, iframe {
  aspect-ratio: attr(width) / attr(height);
}

Let that soak in.

Now if you already have:

<img src="image.jpg" width="800" height="600" />

It automatically has the correct aspect ratio as the page loads. That's awesome.

  1. It's easy to understand.
  2. A ton of the internet already has these attributes sitting on their images.
  3. New developers will have no trouble understanding this, and old developers will be grateful there is little (if any) work to do here.

I like the idea of the CSS feature. But I like 100 times more the idea of putting it into the UAUA stylesheet is no small thing to consider — and I'm not qualified to understand all the implications of that — but it feels like a very awesome thing at first consideration.

Jen has a ticket open for people to voice their thoughts and links to the bug ticket where Firefox is going to test this out to see how it goes.

The post What if we got aspect-ratio sized images by doing almost nothing? appeared first on CSS-Tricks.

Accessibility Events

“There isn't some way to know when—…?”

There is always a pause here. The client knows what they're asking, and I know what they're asking, but putting it into words—saying it out loud—turns unexpectedly difficult.

In the moments before the asking, it was a purely technical question—no different from "can we do this when a user is on their phone." But there's always a pause, because this question doesn't come easy; not like all the other questions about browsers and connection speeds did. A phrase like "in an assisted browsing context" doesn't spring to mind as readily as "on a phone," "in Internet Explorer," or "on a slow connection." The former, well, that's something I would say—a phrase squarely in the realm of accessibility consultants. The latter the client can relate to. They have a phone, they've used other browsers, they've been stuck with slow internet connections.

“There isn't some way to know when—… a user is… using something like a screen reader…?”

An easy question that begets a complicated answer is standard fare for almost any exchange with a web developer. This answer has, for a long time, been a refreshing deviation from that norm: "no, we can't."

The matter is, I'll offer, technically impossible; computers, you see, can't talk to each other that way. Often, there's a palpable relief here: "no" to the technical part; "no" to the the computers part. That is, of course, all they had meant to ask. I truly believe that.

Even if we could, I'll explain, we wouldn't really want to. Forking our codebase that way would put more burden on us maintainers, not less. There's an easy parallel to the "when they're on a phone" conversation, here; one we've surely had already. We can never know a user's browsing context for certain, and making assumptions will only get us and our users into trouble. Whenever a feature, component, or new design treatment was added or changed, we'd be left having all the same conversations around how to translate it over to the "accessible" experience. If those features aren't essential in the first place, well, are they worth having at all? If those features are essential—well, we'll still need to find a way to make them work in both contexts.

It could seem like an enticing option for our users, at first glance: an enhanced, fully-featured website, on the one hand, a fully accessible alternative experience on the other. That unravels with even the slightest examination, though: if the fully-featured website isn't accessible, the accessible website won't be fully featured. By choosing to have the "accessible experience" deviate from the "real website," we end up drawing a sharper line between those two definitions, and we nudge the "accessible experience" closer to an afterthought—limited and frustratingly out-of-sync with the "real" website, like so many dedicated mobile sites quickly became.

There's never any disagreement, here. Again: this is all relatable. We've all found ourselves inescapably opted into using the "mobile" version of a website at some point. We've been here before as users; we've made these mistakes before as developers. We know better now.

But this isn't a strictly technical question. This isn't as simple as browser features and screen sizes—a question of one privileged browsing context or another. Technical questions come easy. Partway through the asking—in the hesitation, in the pause, in the word stumbled over—what was meant to be a mundane development question became something much more fraught. Because there was a word that fit.

“Is there a way we can know when a user has a disability?”

The easy "no" felt empowering; a cop-out. "It doesn't matter; it can't be done" in response to a deeply fraught question was an unexpected balm for both the asked and the answered. There was, again, that palpable relief—"no" to the technical part; "no" to the the computers part. That was, of course, all they had meant to ask.

We no longer have that easy answer. In iOS 12.2 and MacOS 10.14.4, a toggle switch has appeared in Apple's VoiceOver preferences, innocuously labeled "accessibility events." It was rolled out to no fanfare—short of a brief mention in Apple's iPhone User Guide—and we're still not sure how it's meant to be used. The most generous interpretation of the intention behind this feature is that it was developed with the same intention as a "UA string"-style identifier for users browsing via VoiceOver.

We do know this much: when this setting is enabled—and it is, by default—your browser will identify you as using VoiceOver to help you browse the web. If you're using Apple's VoiceOver, both your phone and your computer will broadcast your assumed disability to the entire internet, unless and until you specifically tell it to stop.

If you're not furious at this change, you should be—not just for what it means for users, but what it foists upon you. Apple has burdened you with the knowledge that, now, yes, you can know whether a user has a disability. We can use this information to serve up a limited alternative version of a website, into which we can very easily opt people of a protected class. And once we choose to start listening for "accessibility events," well, we can capture that information, as anything else broadcast to the web. A user's disability can and will be reduced to a single data point—a cold, impersonal true, inexorably bound to their name, stored in a database, perhaps destined to be sold, leaked, passed along to insurance providers, reduced to a targeted marketing opportunity. All under the auspice of inclusivity.

At some point, the developers responsible for the "accessibility events" feature were, I'm certain, asked whether such a feature were possible. Their answer was "yes." I don't doubt that they meant well. I'm just as certain that, in the moment, it felt like the right answer; a technical solution to a technical problem, and a simple matter of browsing context.

Someday—not far in the future, I trust—I'll be asked a similar question. It will be asked hesitantly, haltingly. The pauses will ring all too familiar. I will no longer have the easy, familiar comfort of technical impossibility—no easy "no" to insulate me from the uncomfortable conversations I should have been having with clients all along. Now, there's no technical reason that I can't know whether a user is using "something like a screen reader." I—my clients, their databases, their organizations, their parent companies, their partners, their VC funders, their advertisers, and so on unto infinity—can absolutely know when a user is disabled.

But I won't play a part in helping to propagate the mistake Apple's developers made. I'll let my answer hang heavy and uncomfortable in the air: no. Not because we can't—we can. Not because we shouldn't, though, no, we still shouldn't. No—now, I will allow the word to become as coarse as I had always wanted it to be, because I no longer have the cold comfort of "well, technically" to hide behind.

No.

 

The post Accessibility Events appeared first on CSS-Tricks.