With Universal Analytics coming to an end in the next few months, marketing professionals are getting up and running with Google Analytics 4 (GA4). GA4 is an event-based analytics solution rather than a session-based one. That means GA4 focuses more on user behaviors and actions, not just the pages they visit. 

With that in mind, marketers must determine the most effective ways to track events. In this guide, we’ll share techniques to improve your site’s performance with Google Tag Manager. 

Your website’s performance matters because:

• Fast load speeds can improve your Google search rankings.
• Better performance leads to greater visitor engagement.
• High-performing web pages can help boost conversions.

Let’s begin by reviewing the standard WordPress enqueuing process and how you can enhance it with Google Tag Manager. 

Standard WordPress enqueuing

WordPress gives users the option to add scripts to the header or footer of a document. Header-loaded scripts can block and delay a page from loading. By adding scripts to the footer, you can improve blocking time.

These scripts still need to be managed within WordPress and are subject to other plugins and elements loaded on the site. Fortunately, you can simplify this process with Google Tag Manager. 

What is Google Tag Manager?

Google Tag Manager is a JavaScript container that allows you to place additional pieces of code (or tags) on your site. It provides a single place to manage marketing efforts, conversion tracking, and other tags, and keep those tags organized and optimized.

With these tags, you can track user behavior and conversion metrics like link and button clicks, form submissions, conversions, page views, and more. 

Getting started with Google Tag Manager

Install Google Tag Manager using these steps: 

• Create an account at Google Tag Manager.
• Create a container to manage your tags. 
• Add the Tag Manager code to your site using a plugin, custom template file, or hook.

Google Tag Manager best practices

You can improve your website’s performance by using tags strategically. Keep these best practices in mind when leveraging Tag Manager throughout your site: 

Load tags selectively

Don’t load tags on every page. web.dev recommends not using tags to load elements that immediately impact the visual or user experience, like hero images and cookie notices. Using Tag Manager to load these aspects can unnecessarily slow down your pages. 

Use custom triggers to fire tags only on the pages that need them. Here’s an example of a custom trigger configuration: 

Fire tags later

Most tags don’t need to be ready instantly. You can put triggers in place to fire tags when specific conditions are met. This can help improve your page speed and performance. 

To do this, you can use the “Window Loaded” trigger instead of the “Page View” trigger. The “Page View” trigger fires immediately as the page starts to load. This can track all actions a visitor takes as soon as they land on a page, but you can run the risk of having your tags trigger too early before all page data is loaded. 

On the other hand, the “Window Loaded” trigger fires after all of the page’s content has already been loaded, such as the images, scripts, and other media. This can be helpful if you have some page content that loads later than other content. Later-loading tags can improve page speed, facilitating a better user experience. 

Deferring script loading

Deferring script loading until after the page’s content has loaded is another way to boost page speed and enhance user experience. 

Using Google Tag Manager’s Timers, you can create a new “Timer” trigger type, set a delay, and run it on Pageview. Let’s review the steps of this process:

• Assign a tag to the new timer’s trigger.

• Use Window.setTimeout on the script. This is a JavaScript feature that can load the script but delay execution. The script will load simultaneously as the page loads but the execution will be held back until the timer has ended. This requires custom scripting per tag.
• Set Tag firing priority to add additional delay.

• Add a custom event using window.setTimeout. This allows more control over when tags load.
• You only need to develop one custom tag which is used as a trigger.

Audit and remove tags as needed

Fewer tags lead to faster load speeds. Audit your tags regularly, removing or disabling them as needed. 

Ask yourself the tough questions during this process. For instance, do you really need three different user-tracking systems in place sitewide? Does that optimization test need to load everywhere or just on the page that is being tested? Every step you take to make your configuration leaner boosts your site’s performance. 

Managing performance expectations

These strategies aren’t a miracle cure, but optimizing your tags could drastically improve your site’s performance.

Essentially, you should build your Tag Manager strategy around the idea that lots of small improvements can add up to major enhancements. 

Additional resources

Goodbye Universal Analytics. Hello, Google Analytics 4 (GA4)! Learn more about what to expect from GA4 and how to set your analytics up for success. 

8 ways to optimise Google Tag Manager (GTM) for speed and performance. This guide covers eight additional tips to optimize your Google Tag Manager configuration for speed and performance.  

Google Tag Manager vs Page Speed: Impact & How to Improve. Use the tips in this resource to further improve your website’s page speed. 

On Apr 3, 2023, Advanced Custom Fields (ACF) released one of its most groundbreaking updates since the introduction of Gutenberg ACF blocks. This 6.1 plugin release includes one truly significant feature: the ability to create custom post types.

This new feature is particularly timely, as it allows for greater customization directly from the administrative area of WordPress. Adding custom post types with “no-code” isn’t a new paradigm — but it is new for ACF. Given that ACF already excels at consistently implementing fields, blocks, and many other features, we’re excited to see the introduction of custom post types in ACF.

A Brief History of ACF

ACF was created March 28, 2011 by Elliot Condron as an easier way to implement custom fields. And from the earliest dawn of the 1.0 plugin, ACF was a clear advancement over add_meta_box. 

Twelve years later, ACF has indeed proven its value, with over 2 million installations and counting. Features such as automatic field validation, a friendly UI in the admin panel, and powerful repeater and flex content fields make ACF a clear winner in the custom fields space.

After ten years of growth under Condron’s watchful eye, in 2021 ACF was sold to Delicious Brains, a significant player in the plugin community. Just over a year later, Delicious Brains – and thus ACF – was acquired by WP Engine. This acquisition was a shift for the WordPress community, but it also ensures that ACF remains in very capable hands.

Alternatives to ACF CPT

Naturally, there are some alternatives to custom post types in ACF. After all, we’ve been making CPTs for ages. Among those options:

• CPT UI
• GenerateWP
• Good old handwritten register_post_type (note that this method is manual and time-consuming)

Why We’re Excited for ACF CPT

In particular, there are a couple of ACF CPT features we’re anticipating in WP Engine:

• ACF custom post types built into the ACF user interface we already know and love.
• Custom post types will be available in both the free and pro versions. The developers could have easily locked this feature behind the premium paywall, knowing that many people would be willing to pony up for it. However, we applaud WP Engine for being kind enough to release it in the free version.
• CPTs are synced with standard ACF JSON or PHP exports. Easy to synchronize and it keeps your CPTs out of the database.
• ACF has a tool to help users migrate away from existing custom post type definition plugins, such as CPTUI.
• The post type tool can be easily disabled with a filter, namely:

add_filter( 'acf/settings/enable_post_types', '__return_false' );

Fun Extras

While investigating this ACF custom post-type release, we encountered some additional fun tidbits. They may not be directly related to ACF CPTs, but we thought we’d share because it’s a pretty neat little collection!

• ACF has a filter to show/hide the admin panel entirely. acf/settings/show_admin – this can keep developers, clients, and anyone else trawling through your WP admin panel from live-updating fields and post types.
• ACF has a filter to force the preview mode of an ACF Gutenberg block. This is great for ensuring your back-end editing interface looks just like the front-end. Within block.json, set your “mode” within your “acf” JSON to “preview” to force any ACF blocks into preview mode.

In fact, if you’d like to learn more about the advantages of using ACF to build Gutenberg blocks, check out this article by our WP Engineering Manager Oliver Harrison.

Links and More Information

• ACF CPT beta preview walkthrough
• ACF blog release for 6.1.0
• WP Engine ACF Chat

Build With ACF — With Us

ACF is a foundational part of theme development at Kanopi. We’re excited to see the progression of ACF with these wonderful new features. And if you’re into building WordPress with ACF and other cutting-edge tools, we invite you to come and work with us!

The Gutenberg Editor (or Block Editor), introduced in WordPress 5.0 in 2018, revolutionized the WordPress editing experience when it replaced the Classic Editor as the default option. To further improve the block editing experience, many developers turn to Advanced Custom Fields (ACF). This WordPress plugin allows users to add extra custom fields to WordPress editing screens, extending the Gutenberg editor’s functionality. 

Now, in 2023, some developers might question whether building Gutenberg blocks with ACF is still the right move for their web projects. Some have tossed around the idea that it’s better to use native Gutenberg blocks because full site editing is coming. 

However, it’s our opinion that ACF is still one of the best ways to develop your custom Gutenberg blocks. In this post, we’ll explain why and highlight some relevant ACF updates. 

What are the benefits of using ACF to build Gutenberg blocks?

We can sum up the benefits of building Gutenberg blocks with ACF in three words: simplicity, speed, and familiarity. 

Building Gutenberg blocks with JavaScript can be time-consuming and requires many developers to learn a whole new coding language. ACF makes the process much more intuitive, allowing you to create blocks using the familiar coding language many of us have been comfortable with for years — PHP. 

Furthermore, using ACF makes the block-editing process much simpler for clients who need to add or update content themselves. 

What’s the benefit of creating your own Gutenberg block with ACF rather than using the pre-made options?

Using ACF, you can develop Gutenberg blocks that better suit your unique website needs. You won’t be restricted by the limitations of core Gutenberg blocks or be forced to use one or several plugins to achieve a particular level of custom functionality. This allows you to tailor your website exactly to your (or your client’s) preferences.

What’s new with ACF?

There are plenty of exciting new ACF developments that make the plugin even more beneficial for your development projects. 

ACF 6.0 was released in September 2022, unveiling a fresh user interface, greater accessibility, and other new features that offer more flexibility to developers. Here are a few relevant ACF updates to be aware of: 

ACF 6.0 Blocks can use block.json

JSON is WordPress’s preferred format for registering blocks. It encapsulates the information WordPress needs to know about each block.

Block.json is new in WordPress and has now been added to ACF. This update makes it even simpler to tell WordPress that the block you’ve created is an ACF block and specify the values you want to add to it.

Here is an example of what your block.json file might look like:

{
	"name": "namespace/accordion",
	"title": "Accordion",
	"description": "A block used to show an Accordion.",
	"editorStyle": "file:./editor.css",
	"editorScript": "file:./editor.js",
	"style": "file:./frontend.css",
	"script": "file:./frontend.js",
	"category": "block-category",
	"icon": "table-row-before",
	"apiVersion": 2,
	"keywords": [ "accordion", "block" ],
	"acf": {
		"mode": "auto",
		"renderTemplate": "accordion.php"
	},
	"supports": {
		"align": false,
		"alignContent": false,
		"alignText": true,
		"anchor": true,
		"color": {
			"text": true,
			"background": true,
			"link": true
		},
		"customClassName": true,
		"fullHeight": true,
		"jsx": true,
		"spacing": {
			"margin": [ "top", "bottom" ],
			"padding": true
		},
		"typography": {
			"lineHeight": true,
			"fontSize": true
		}
	},
}

Many of these settings align with the typical settings for registering an ACF block type, with a few changes made to the name, script, and style parameters. 

ACF Blocks can inherit Gutenberg controls 

Inside block.json, Gutenberg controls were previously only available for JavaScript Gutenberg blocks. You can now apply some of the same controls to an ACF block as well — they can be enabled using the ‘supports’ property.

For example, if you want to allow a user to be able to change the background color of a block, you can add the ‘color’ property, then set the ‘background’ property to ‘true’, as seen above.

With that completed, you will then need to get the property set by the user, like so:

$my_block_classes = [];
if ( ! empty( $block['backgroundColor'] ) ) {
	$my_block_classes[] = 'has-background';
	$my_block_classes[] = 'has-' . $block['backgroundColor'] . '-background-color';
}

Finally, implode your block classes array into the top level of your block, like below:

<section class="my-block-name <?php echo ( ! empty( $my_block_classes ? esc_attr( implode( " ", $my_block_classes ) ) ) ) : ''; ?>">

With that completed, the color your user selects will be applied as a background color to your block. Keep in mind that if the WordPress color palette defaults aren’t overridden in theme.json, those defaults will be the colors available to the user.

You can “scope” block styles and scripts to each block 

Along with the block.json update, WordPress is encouraging developers to use the WordPress npm package, wp-scripts (aka @wordpress/scripts), to prepare blocks for rendering on the front end. This allows each block to independently have its own styles and scripts. 

WordPress automatically in-lines the styles and scripts for a block, as defined in block.json. This technique can make pages load faster because they will only appear when the block is present. The other major benefit is that if a certain block doesn’t appear on a page, it won’t load that block’s scripts and styles. This can save on your bundle size and will also keep one block’s styles from impacting the others.

ACF 6.0 features significant UI updates

With ACF 6.0 comes a refreshed look for the plugin, with updates made to admin screens such as the field group editor and tools page. For example, ACF has reduced the height of the fields settings screen by grouping settings into tabs. 

ACF has also made significant strides toward greater accessibility. Now, users can edit fields using only keyboard navigation. Also, ACF has improved focus styling for keyboard navigation, making it easier to see where you are on the page. 

Coming soon: Built-in Custom Post Type and Taxonomy creation

With the expected release of ACF 6.1 in the next few months, ACF users can look forward to custom post type and taxonomy creation within the plugin itself! This is huge news and will help many developers as it might allow them to remove a plugin from a site or allow them to build out custom post types without manual coding. Another nice perk of how ACF is planning to implement this functionality is that all of the Custom Post Type and Taxonomy configuration will be written to local JSON. This means it can be committed to a repository like GitHub, just like the custom field JSON.

Extensions make ACF even more flexible

Dozens of extensions can add supplemental functionality to the ACF framework. One of the most helpful is ACF Extended, an enhancement tool that adds over 100 additional features, such as new fields, new field groups, and bi-directional fields. However, ACFE can be overkill in certain use cases, as all those additional features can add unnecessary bloat. Choose your extensions carefully. There are also plenty of unofficial plugins available that you can use to further build out your web projects with supplemental ACF tools. 

The ACF community is growing

WP Engine purchased five popular developer-focused WordPress tools in 2022, including ACF. With this acquisition, the ACF team has become much more vocal, hosting twice-monthly community-oriented ACF Chat Fridays. Follow ACF on Twitter to stay in the know about when these chats take place and the topics they cover. 

Wrapping Up

Looking for tips and guidance to help you make the most of your WordPress project?  Reach out to Kanopi’s WordPress team or connect with other users via the ACF support page. It’s an exciting time in ACF history, so don’t hesitate to get involved in the community today.  

When CSS was first introduced, it was straightforward. There weren’t any CSS variables, there were no preprocessors. The world was simple, and we were so young! Developers added colors to a site with a hex code (or rgba if they were very lucky and cutting edge!), and those colors were what they were. If a developer wanted to implement a dark and light mode — they often needed to create two completely separate stylesheets and swap the site’s body classes out with JavaScript. Implementing multiple themes on a single site was cumbersome, hefty, and required a lot of additional maintenance.

With the introduction of CSS variables and other color and theme-related CSS features, custom CSS theming has become much easier. When we talk about CSS theming, we’re talking about changing a site based on a user-provided context that lets us still fully control the experience. There is still some element of JavaScript required to swap out the body classes when using a toggle to allow the user to use their preferred theme on your site, but no longer do you have to maintain two separate stylesheets. Native CSS variables make theme swapping much easier than it once was. CSS theming is an excellent way to allow users and developers to dictate website settings easily.

Ways to Use CSS Theming

Dark/Light Mode

Dark and light modes are one awesome, commonplace way to use CSS theming. Users can set their preferred dark or light mode via system settings, browser settings, or even special applications to modify user settings. You can make your entire website respect the user’s settings — which is always nice! 

Branding

Say you’re working on a website that features a few similar products, like breakfast cereals. Each product uses the same overarching information for its brand — just with different colors and fonts. Without rewriting huge swathes of CSS for each different product, you can use CSS theming and perhaps a body class in your HTML to provide totally different branded looks for your products. 

Accessibility

A combination of prefers-contrast or forced-colors media queries with CSS theming can help make your website more accessible. You can make your site look even better and more accessible to users with these preferences.

Common Considerations Introduced by CSS Theming

CSS theming is a valuable tool to have in your developer toolkit, but it does add some complexities you’ll need to consider during implementation.

Respecting User Settings

As mentioned elsewhere, it’s important to respect user settings where possible. It burns the eyes a bit when you’ve got everything set to shades of black (charcoal, onyx, obsidian, jet), and you suddenly land on a page in blinding, brilliant white — or vice versa.

Images

Images are important when theming. Whether it’s an icon where the font color is adjustable, an SVG where the fill color is adjustable, or a regular old JPG, PNG, or WEBP image — you will have to adjust all of the images on your website. A common example is a client logo reel — you’ll have to store two copies (a dark mode compatible and a light mode compatible) in most instances. If you’re lucky enough to have a client logo reel consisting entirely of SVGs, you’ll be able to use CSS to swap the fill. Most of us aren’t so blessed, however. On a site with tons of images — duplication of image files can even become a storage concern if the images are poorly optimized.

Increased QA Time

When you implement CSS theming, the time required to perform quality assurance checks on the work increases. The same pages must be checked multiple times when using dark and light modes. Instructions for swapping dark and light mode must be written so that less-technical QA agents understand the necessary steps and how to perform them. It’s important to bake these increases into the budget and turnaround time when working with CSS theming.

FART

Haha, right? Not so much. The “Flash of inAccurate coloR Theme,” or FART for short, occurs when you have improperly digested your CSS selectors a momentary flash of the incorrect color scheme. For example, say your user prefers to use a dark theme — but your website defaults to a light theme before detecting and swapping to the user-specified preference. FART can be handled in several different ways and is an important consideration when theming. Properly-handled rendering makes your site look that much more polished and awesome.

Tools to Help You Theme

CSS Variables (+ JavaScript)

CSS variables are key to effectively theming with CSS. CSS variables enable you to swap out various CSS properties throughout your custom theme. Variables have been widely supported in modern browsers since approximately 2017, so 2023 is a great (and safe) time to start using them. 

Variables enable flexibility in your theme and stylesheet. They function similarly to preprocessor-based variables, with a slightly different syntax and a key difference: CSS variables can be updated live. Preprocessors compile your variables, so once you’ve set a variable — that’s that; it can’t be updated or changed within the stylesheet. Native CSS variables can be scoped to different CSS classes, and function more like CSS properties.

Some examples of CSS variable syntax:

Declare a variable:

--brand-color: #c4d600

Use a variable:

font-color: var(--brand-color)

It is also possible to scope a variable:

.brand-light {
    --brand-color: #c4d600;
}

.brand-dark {
    --brand-color: #153e35;
}

With a little extra JavaScript toggle magic, the brand-light and brand-dark colors can be added to any part of the page. For a global theme, those brand classes can be added to the html tag or the CSS :root selector. For more specific parts of the page, those classes can be added to individual parts and components.

Media Features & CSS Properties

prefers-color-scheme is a CSS media feature “used to detect if a user has requested light or dark color themes” (MDN). prefers-contrast is similar, used to “detect whether the user has requested the web content to be presented with a lower or higher contrast.” These color scheme preferences work like any standard @media query used to target browsers by screen size — they’re just working off of color and contrast preferences instead of size.

Color scheme is the user setting engaged either in system settings or occasionally the browser settings. This allows you to make your CSS more specific when the user prefers a light or a dark mode, or a high-contrast theme. 

These media features are important for accessibility work, which helps users with low or no sight when browsing your website. When you make your site look even better for these users, you’re going the extra mile in terms of accessibility – always a worthwhile endeavor!

When drilling down to specific elements, the color-scheme property can assist. This property allows an element to indicate which color schemes it can be rendered in. This property is especially useful when styling default form controls; custom form controls such as select or radio buttons can be a bit of a tangle under normal circumstances. The color-scheme property and default form elements make that process slightly less painful.

Theming Specific Libraries, Tools, and Practices

• https://toggles.dev/ provides some amazing premade animated toggles for light and dark modes. Lightbulbs, suns and moons, and other cute icons galore!
• Various front-end libraries have implemented theming-specific tools. It’s always a good idea to check out what the big players are implementing. Bootstrap and Tailwind both have some great ideas and inspiration for CSS theming, with the benefit of widespread usage. It’s great when someone else runs into your problem before you do!
• For testing and QA purposes, you can swap between dark and light modes in various ways. Your computer’s global system settings will allow easy swapping between dark and light modes. However, if you don’t want to go that far — the developer tools in various browsers often also allow you to switch between light and dark modes. Here’s a screenshot showing how to do this in Firefox. 

Summing Up CSS Theming

CSS theming is a new paradigm, with new concerns and considerations. However, there is a lot of power and flexibility that comes along with CSS theming. It’s a worthwhile endeavor to get familiar with CSS theming and the associated new CSS features such as variables, media features, and theming-specific CSS properties. There are plenty of new tools and libraries out there to help you gain fast proficiency with CSS theming.