How to Setup PostHog A/B Test on ClickFunnels

To setup PostHog A/B test on ClickFunnels, we provided a detailed step-by-step instructions that can be followed below.
Before you begin, ensure the following requirements are met to successfully:

• You have an active PostHog account with login credentials.
• Your ClickFunnels site has the PostHog script installed.

Due to the complexity of this A/B test, we included an extra step to create test elements directly on the page. In simpler cases, you can skip this by applying changes through the A/B test script alone; no need to add extra elements manually.

Step 1: Duplicate the Page You Want to Test

Log in to your ClickFunnels account. Duplicate the intended page by clicking on the Clone Funnel Step button. Once the page reloads, go to the Publishing tab and give the cloned step a unique name. Click Update Funnel Step to save.
By duplicating the page, you protect the original from unintended changes.

Step 2: Create Your Experiment in PostHog

• Log into PostHog.
• From the left sidebar, go to Experiments > click New Experiment

Fill in the required fields:
We use this general format for experiment name:
[Experiment number] – [Step of the Funnel/Page] – [Test Hypothesis]
For Feature flag key, we use something very similar to the Experiment name, with a few changes—like converting the step of the funnel/page into a number or abbreviation, removing spaces, and keeping everything lowercase for easier implementation in code.
Refer to this PostHog Experiment Naming Guidelines for best practices.

Click Save as draft.

For a step-by-step guide on creating an experiment in PostHog, click here.

Step 3: Create the Test Element You Want to Test in ClickFunnels

To experiment with multiple content versions on the same page layout (assuming we have two test groups):
We have 2 scenarios for preparing test elements:
1. We don’t have the element on the page and it should be built from scratch;
2. The element already exist but it should be modified for the test, in this case, the element can be duplicated and changed. This prevents unnecessary changes of the element and helps to limit the difference of the elements other than the hypothesis, leading to a clean test.

• Label the original as Control
• Label the test versions as TG1, TG2, etc.

Depending on what you’re testing, the test group can be an element, section, row, or column.

Step 4: Hide Test Groups with Custom CSS

We need to hide the test elements on the Control page to manage the test by the script in the footer.(See next step) To do so, fetching the CSS ID of each element is essential.

How to Find Each Element’s CSS ID:

1. Click on the element > open Settings.
2. Click Get CSS Info to reveal the CSS ID Selector.

In the top bar, navigate to Settings and open the Custom CSS section. Then, add the following script to hide each test group by default.

This keeps the layout clean and prevents variant elements from showing when not in use.

Step 5: Add A/B Test Script to the Page

From the top menu, click on the Settings dropdown and select Tracking Code. When the pop-up window appears, switch to the Footer Code tab and paste the adjusted code snippet there.

Make sure to replace:

• **FEATURE FLAG KEY** with the actual Feature Flag Key from your PostHog experiment.
• **CONTROL_CSS_ID** and **TG1_CSS_ID** and **TG2_CSS_ID** with the actual CSS IDs of the control and test elements.

Step 6: Quality Check the Variants

We start by previewing the page and confirming that our test is set up properly. To check each variant, we use the feature flag key directly in the page URL:
Format:[your page URL]/?[Feature Flag Key]=[variant name]
Repeat this for each variant to ensure they render as expected.

For example, we’ve built a dedicated test page on our website to run an A/B test. In this experiment, we have one control group and two test variations: Test Group 1 and Test Group 2.

To verify that each variant is loading correctly, we add the Feature Flag Key to the end of the URL like the upper format:

Test Group 2:

https://99ways.io/experiment-test-page/?001-about-page-Heading-test=test_group_2

Step 7: Publish Your Test on PostHog

To track what success means for your experiment:

1. Open the saved experiment in PostHog.
2. Scroll to Primary metrics > click Add primary metric.
3. Choose Funnels as the type and define funnel steps (e.g., CTA clicked → form visited).
4. Adjust the attribution type, conversion window, and save.

Then scroll up and hit Launch.
Once launched, the experiment goes live and PostHog begins tracking performance based on the metric we set.
For a deeper understanding of how experiment metrics work, take a look at the linked article.

Once you’ve verified the test setup is working correctly, update the duplicated page’s URL to the original live URL. Then, change the original page’s URL to something else to avoid conflicts.