Traditionally, marketing teams would create topical content on websites with URL folders, for example:

• domain.com/topic1/post1

• domain.com/topic1/post2

• domain.com/topic2/post3

• etc

Today, the done thing is to keep urls paths short, clean and folder free e.g.

• domain.com/post1

• domain.com/post2

• domain.com/post3

• etc

You can still tag and categorise content in your CMS obviously, but this doesn't make its way to your analytics tool - and so presents a challenge if you still want to report at the category or tag level. But there's a solution.

Content groups using the datalayer

The best and most scalable solution to still have content groups in your analytics tool is for your CMS (in this example WordPress) to push your tag and category information to the datalayer, and for your analytics tool (PostHog) to include it on the relevant pageview events so that you can report on it later.

This allows you to:

1. Breakdown your analytics reports (traffic, conversions, acquisition sources etc) by topic area

2. Maintain the flexibility to move content between categories over time and/or have content in multiple categories, without it resulting in a big mess (probably) or a lot of redirects (certainly)

3. Benefit from clean and short URLs when sharing your content on social media and elsewhere (goodbye domain.com/topic1/subtopic1/really-long-url-v2)

Let's walkthrough how to do this with WordPress & PostHog.

1 The WordPress configuration

By far the most popular WordPress plugin to push page and post information to the datalayer is GTM4WP byThomas Geiger with over 700,000+ active installs at the time of writing. But, it's a hugely bloated plugin with a dated and complex UI.

A much newer, cleaner and lighter alternative is GTM Kit which is developed by TLA Media, see https://gtmkit.com/.

GTM Kit enables you to easily select the specific information you would like to show in the datalayer - post type, page type, categories, tags and more.

Once enabled, you'll see the relevant information in the datalayer using Google Tag Manager preview mode, it will look something like this:

{

pagePostType: "post",

pageType: "post",

pageCategory: ["project-management", "tools"],

event: "gtm.load",

gtm: {uniqueEventId: 3, start: 1730240724098}

}

2 The Google Tag Manager configuration

The next is to setup Google Tag Manager which involves:

1. Disabling automatic capture of PostHog pageview (and pageleave) events

2. Creating a new variable with your datalayer variable(s)

3. Creating a new PostHog pageview event with a custom property that includes the category information from the datalayer

Let's start with disabling autocapture of pageview events. By default your posthog-js snippet in GTM includes something like the below.

posthog.init('phc_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',{api_host:'https://eu.i.posthog.com', person_profiles: 'identified_only'})

When callingposthog.init, there are various configuration options you can set in addition to loaded and api_host. We need to add capture_pageview: false to disable the default capturing of pageview events.

posthog.init('phc_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',{api_host:'https://eu.i.posthog.com', capture_pageview: false, person_profiles: 'identified_only' })

This also prevents pageview events being double-counted, and avoids being double-billed against your billing allowances.

Next create a new user-defined variable and enter the name of the variable exactly as it appears in the datalayer (in our example above, this is pageCategory).

Lastly, add a new 'PostHog Pageview' tag using the Custom HTML tag which fires on all pages, and include your new variable created above, as below.

Note: for consistency with other properties you'll probably want your new PostHog property to start with a capital letter i.e. Category (not category)

Side note about the datalayer

The dataLayer is just a JavaScript array in the browser which is used to store and pass data about a website. Think of it as a bridge between your website and your analytics tools.

There are a few ways to access it:

• Where to access Google Tag Manager: Use preview and debug mode

• Chrome developer tools search: Search for “dataLayer” in the Elements tab

• Chrome developer tools console: Type “dataLayer” in the console tab

• Browser plugins: Choose one of the many browser plugins

3 The PostHog configuration

This bit is really quick and easy as there's nothing to do! There's no need to register the property in PostHog.

Use PostHog's live activity explorer and your new property will automagically appear as part of the pageview event, as below.

Note: you can send as many properties as you like along with an event to Posthog so go ahead and add anything else you might have in the GTM datalayer that might be worth sending at this point, for example:

• Title

• Category

• Tags

• Author

• Published date

• Updated data

• Content type

Looking to setup more custom events with PostHog and Google Tag Manager? Check out the post-gtm-template here https://github.com/tagticians/posthog-gtm-template.

Happy analysing

Thanks to Ben Lea on the PostHog support team for his help with getting this up and running.