Please rotate your device.

HOW TO INTEGRATE GOOGLE ANALYTICS INTO WEBFLOW?

HOW TO INTEGRATE GOOGLE ANALYTICS INTO WEBFLOW?
Webflow Google Analytics is a powerful tool that can help you track your website traffic, identify your best performing pages, and measure your website's performance.
Loic Brijawi
Profile
03/09/2024
-
4 minutes
min read

Webflow Google Analytics is a powerful tool that can help you track your website traffic, identify your best performing pages, and measure your website's performance.

In this blog post, we'll cover everything you need to know about Webflow Analytics, from setting up your account to interpreting your data.

We'll start by explaining what Webflow Analytics is and how it works.

Next, we'll show you how to set up your account and connect it to your Webflow site.

Without further ado, take a look below.

Google Analytics: Why Should You Care?

Google Analytics is a free web analytics service offered by Google that helps you track and analyze website traffic.

It can tell you how many people visit your website, where they came from, what pages they visit, and how long they stay there. Google Analytics can also help you track your website's performance over time and identify trends.

If you have a Webflow website, Google Analytics is a valuable tool that can help you improve your website's performance. Here are some reasons why:

Track your website traffic:

Google Analytics can tell you how many people visit your website, where they came from, and what pages they visit. This information can help you identify your most popular pages and see where your traffic is coming from. You can also use this information to more effectively target your marketing efforts.

Identify trends:

Google Analytics can track your website's performance over time and identify trends. This information can help you see how your website is performing and make changes to improve it. For example, if you notice that your website traffic is decreasing, you can use Google Analytics to identify the reason and make changes to improve your website.

Track your conversions:

Google Analytics can track conversions, which are actions you want visitors to your website to take, such as signing up to your email list or making a purchase. This information can help you evaluate the effectiveness of your marketing efforts and make changes to improve your conversions.

Overall, Google Analytics is a powerful tool that can help you improve the performance of your Webflow website. If you are not already using Google Analytics, we strongly recommend that you set it up.

It's free and easy to use, and it can provide you with valuable insights into your website's traffic and performance.

Benefits of Google Analytics

Let's go over the most important benefits of Google Analytics that you need to know if you have a Webflow website.

Track website traffic and performance:

Google Analytics can help you track how many visitors are coming to your website, where they are coming from, and what pages they are viewing. This information can help you identify your website's most popular content and traffic sources, and track your website's performance over time.

Track website conversions:

Google Analytics can also help you track website conversions, such as registrations, purchases, and page views. This information can help you measure the effectiveness of your marketing campaigns and identify which pages on your website are most likely to drive conversions.

Get insights about your website visitors:

Google Analytics can also provide you with information about your website visitors/potential customers, such as their demographics, interests and behavior. This information can help you create more targeted content and marketing campaigns that appeal to your target audience.

Best Webflow Analytics and Targeting Tools

Let's take a quick look at some of the most popular analytics and targeting tools that can be used with Webflow.

Facebook pixels:

This tool uses the power of Facebook analytics to help you track visitor actions on your site. You can use the Facebook pixel to track conversions, such as purchases or signups, and to target your Facebook ads more effectively.

Optimally:

This tool is a popular choice for A/B testing, which allows you to test different versions of your website or landing pages to see which performs better. Optimizely also offers multivariate testing features, which allow you to test multiple variables at once.

To learn more about CRO, click here.

Matomo:

Formerly known as Piwik, Matomo is an open-source analytics platform that offers a wide range of features, including heatmaps, funnels, and user segmentation. Matomo is a good option for businesses that want more control over their data and want to avoid using Google Analytics.

Hotjar:

This tool offers excellent visual representations of your user behavior, such as heat maps, scroll maps, and click maps. Hotjar can help you identify areas of your website that are confusing or frustrating for users, and can also help you track how users interact with your forms and other elements.

Google Tag Manager:

This tool makes it easy to add tracking codes to your website without having to modify any code. Google Tag Manager is a valuable tool for businesses that use multiple analytics and targeting tools because it can help you manage all your tags in one place.

Google Analytics:

Google Analytics remains the gold standard for website analytics. Google Analytics offers a wide range of features, including traffic analysis, conversion tracking, and audience demographics. If you're not already using Google Analytics, I highly recommend setting it up.

It's important to note that new tools are constantly being developed, so it's always a good idea to stay on top of the latest trends. If you're looking for a specific feature or functionality, be sure to do your research to find the best tool for your needs.

Setting up Webflow Google Analytics: step-by-step guide

Here's how to quickly configure Google Analytics in your Webflow project:

  1. Go to your dashboard and click Project Settings > Integrations.
  2. Click the Google Analytics admin page link.
  3. Obtain your Google Analytics tracking ID. To do this, you will need to connect your Google account to Analytics. Once you click on the link, you will be asked to enter the following information:
  • Whether you need to use it for a website or a mobile application (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 set up the Google Analytics account, you will receive a tracking ID which you just need to copy and paste into the designated field in Webflow. Here is a brief step-by-step explanation:
  • Copy the tracking ID.
  • Paste it into the field under Google Universal Analytics ID on the Integrations page in Webflow.
  • Click Save Changes.
  • Publish the changes.

That's it! Google Analytics will need some time to start tracking data, usually a day. After that, you can select any custom date and get valuable information about your Webflow created website visitors.

Here are some additional tips:

  • Make sure you have published your website before adding your tracking ID to Webflow.
  • If you're not sure how to find your Tracking ID, you can find it in your Google Analytics account under Admin > Tracking Info > Tracking ID.
  • Once you add your tracking ID to Webflow, Google Analytics may take up to 24 hours to start tracking data.
  • You can check the status of your Tracking ID in Google Analytics under Admin > Tracking Info > Tracking Code.
  • If you have difficulty setting up Google Analytics, you can refer to the Webflow documentation: https://webflow.com/blog/how-to-add-google-analytics or contact Google Analytics support.

Setting up Google Tag Manager

Google offers a service called Google Tag Manager that can help you improve your analytics even further by consolidating various pixels, code, and script tags into easily manageable tags. This can further improve your website’s analytics integrations.

To get started, you will need to create a Google Tag Manager account. You can do this by going to the Google Tag Manager website: https://tagmanager.google.com/ and clicking Create Account.

Once you create an account, you will need to configure a container. A container is a set of tags that you can use to track different events on your website.

For this tutorial, we will create a container for Google Analytics.

To set up a container for Google Analytics, you will need to do the following:

  1. In the Google Tag Manager interface, click Create Container.
  2. Give your container a name and select Web as the container type.
  3. Enter your website URL in the Container ID field.
  4. Click Create.

Once you have created your container, you will receive two code snippets. The first snippet is called the container code. This snippet should be added to the header of your website's HTML code.

The second snippet is called Embed code. This snippet should be added to the body of your website's HTML.

To add the container code to your website, you can follow the following steps:

  1. Go to your Webflow project and click Project Settings.
  2. Click the Custom Code tab.
  3. Paste the container code into the Header Code field.
  4. Click Save Changes.

To add Embed code to your website, you can follow the following steps:

  1. Go to the Designer view of your Webflow project.
  2. Click the Add panel and drag Embed into your project.
  3. Make sure Embed is the first option under Body.
  4. Return to Google Tag Manager and copy the embed code.
  5. Paste the embed code into the Embed Code field in Webflow.
  6. Click Save and Close

Once you add both snippets to your website, Google Tag Manager will start tracking your website data. You can view this data in the Google Tag Manager interface.

If you want to embed custom code on multiple pages of your website, it's a good idea to use the Embed in Symbol code. This way you can easily update the code in one place and reflect it on all pages where you used the symbol.

To use Embed code in a symbol, you can follow the following steps:

  1. Create a new symbol in your Webflow project.
  2. Paste the Embed code into the symbol code editor.
  3. Save the symbol.
  4. Drag the symbol to any page where you want to embed the code.

That's it! You have now successfully integrated Google Tag Manager with Google Analytics in your Webflow project.

Click here for more Webflow integration solutions.

Site Search and Google Analytics

Webflow's site search feature allows visitors to quickly find the content they are looking for on your website. This makes it a valuable source of information about your visitors' behavior and needs.

To track how visitors use the search option and what they search for, you can integrate Site Search with Google Analytics.

Here's how to do it:

  1. Log in to your Google Analytics account.
  2. Select Administrator and navigate to the view where you want to configure search on your site.
  3. Click Show Settings and enable on-site search tracking.
  4. In the Query Parameter field, enter the internal query parameters that you use for your on-site search. The two most important are search and query. You can enter them in the form of a search, query.

If you want to learn more about setting up on-site search tracking, we suggest reading Google's detailed guide.

Final thoughts

It may seem a little overwhelming at first, but don't worry. Once you've gone through this mini-guide a few times, you'll realize this.