The Ultimate Guide to Webflow Analytics

Upgrading your business doesn’t end with designing and developing a website, especially if you do business online. 

Once you have a complete site, you need to focus on the visitor-generated metrics that will tell you what you need to change to improve the site and, ultimately, increase your profit. That’s why you need to consider setting up Webflow analytics if your site is created via the popular platform.

Some of the essentials are:

• Number of unique site visitors
• Number of page views per session
• Average time spent on the site
• Number of interactions
• Where the visitors are coming from (traffic source)
• Bounce rate
  

Most of the measurements are done with Webflow Google Analytics. In other words, you’ll have to set up your Google Analytics with the popular site creation platform to get the best possible result.

In this article, I’ll go through Webflow’s tools regarding visitor data analysis and show you how to set up everything to measure all important stats that could help you enhance the impact of your website. Read on.

Analytics and Targeting Tool Options

First of all, let’s make a quick overview of all tools for analytics and targeting that can be Webflow.

• The Facebook Pixel – The popular tool uses the power of Facebook analytics to help you track visitors’ actions on the site.
• Optimizely – Digital teams use this tool to test their solutions via A/B testing.
• Matomo – Formerly known as Piwik, Matomo helps you analyze KPIs for your site.
• Hotjar – This tool offers great visual representations of your user behavior.
• Google Tag Manager – It’s a useful tool that facilitates the complex structure of using analytics on Google by relying on tags instead of dealing with code.
• Google Analytics – Google's analytics tool is still the best when it comes to tracking users, and it's the subject of this article, along with the Google Tag Manager.
  

Please remember that new tools might become available in the future that could further facilitate tracking your visitors. Therefore, to check all available options, visit this page on Webflow University.

Setting up Google Analytics in Webflow

Here’s how you can quickly set up Google Analytics in your Webflow project.

1. Go to your Dashboard and click Project Settings → Integrations.
2. Click on Google Analytics admin page. 

Getting Your Google Analytics Tracking ID

Next, you’ll need to have a tracking ID for your Google Analytics so that you can enter in Webflow and start tracking your visitors. Once you click on the Google Analytics admin page link, you’ll have to connect your Google account with analytics.

To sign up for analytics, you’ll have to enter the following information:

• Whether you need to use it for a website or mobile app (in this case, you should choose Website)
• Account name
• Website name
• Website URL
• Industry
• Reporting Time Zone

Add Your Tracking ID in the Project Settings

Once you’ve set up the Google Analytics account, you’ll receive a tracking ID that you just need to copy and paste in the designated field in Webflow. Here’s a short step-by-step explanation.

1. Copy the tracking ID.
2. Paste it in the field under Google Universal Analytics ID on the Integrations page in Webflow.
3. Click on Save Changes.
4. Publish the changes.
   

That’s pretty much it. Google Analytics will need some time to start tracking data — usually one day. After that, you can select any custom date and get valuable insights about visitors on your Webflow-made website. 

Setting up Google Tag Manager in Webflow

Google offers a service that can help you improve your analytics even more by consolidating various pixels, codes, and script tags into easily manageable tags. This will further improve your website analytics integrations.

First of all, you have to sign up for a Tag Manager on this page.

1. Click Create account 
2. Add account name
3. Select a country
4. Set up a container. Select Web if it’s for your website and enter its address in the designated field.
5. Press Create

Integrating Google Tag Manager with Google Analytics in Webflow

Once you open an account, you’ll have to integrate your Google Tag Manager in Webflow. You’ll see two code snippets, so here’s how to use them to complete this process.

1. Copy the first snippet to your clipboard.
2. Go to your Webflow projects and click on Project Settings.
3. Head over to the Custom Code tab.
4. Paste the first snippet.
5. Save changes.
   

There’s the short snippet that you’re also required to enter to integrate Google Tag Manager fully. Please note that the steps below might not be required in many cases as the second snippet is only necessary when JavaScript is turned off in your web browser, so we usually don't add the second script for our Webflow sites. JS is turned on by default, but if you disabled it for whatever reason, you’ll need to do the following thing.

1. Go back to the Designer.
2. Click on the Add panel and drag Embed into your project. Make sure that Embed is the first option under Body.
3. Go back to Tag Manager and copy the second snippet.
4. Return to Webflow and paste the snippet. 
5. Click Save & Close
   
   

If you use Webflow, you can easily paste the Embed element on all the pages where you wish to integrate Google Tag Manager.

If you’re going to embed custom code on many pages, it’s a good idea to use the Embed code in a symbol. Using that approach, when you add a symbol from one page on all other pages, you'll save plenty of time if you need to edit the code later. Webflow will affect all instances of one symbol if you change anything in one instance only.

Integrate Site Search with Google Analytics

Webflow’s site search feature lets visitors quickly find the desired content on your site. That’s why the site search is a great source of information about your visitor’s behavior and needs. To track how visitors use the search option and what they’re searching for, you need to integrate site search with Google Analytics.

Here’s how to do it.

1. Log in to your Google Analytics account.
2. Select Admin and go to the view in which you want to set your Site Search up.
3. Click View Settings and turn on Site Search Tracking.
4. Fill in the Query Parameter field with internal query parameters. The two most important ones are search and query (enter them as search,query).
   

If you want to learn more about setting up the site search feature, I suggest reading the detailed guide by Google.

Also, if you don’t like dealing with this stuff at all by yourself, feel free to get in touch with the Flow Ninja team. We always add analytics when designing and developing websites for our clients via Webflow.