Let’s start with some foundational tools. If you have a website built with Webflow, and care about tracking how many people find it and how those people interact with it (hint: you probably should), then Google Analytics & Google Tag Manager are where you should start.
Google Analytics can be used on its own, but it works best when paired with Google Tag Manager. While it’s a bit of extra work to set everything up early on, it will save you loads of time in the future, creating a scalable and robust tracking set-up.
For example, want to track form submissions without a confirmation page?
You can either update the Google Analytics tracking code on your site, or use Google Tag Manager, which has its own UI for setting up the tag, as well as built-in testing functionality, to confirm that it works before you go live with the change.
Using the Google Analytics integration in addition to using the Google Tag Manager snippet will result in duplicate hits—namely, pageviews.
If you don’t want your traffic to be doubled in Google Analytics, use one or the other, not both!
The next two sections go over how to set-up and integrate Google Analytics and Google Tag Manager respectively.
Google Analytics is a tool for collecting and analyzing traffic, engagement, and conversion data for website and campaign goals.
With Google Analytics, you can track your website’s performance over time, especially against performance goals. It ensures that resources are being used efficiently to support initiatives that support your business goals.
With data from Google Analytics, you’ll always know if you’re on the right track, or if you need to make major changes to your site and SEO strategy.
In order to integrate Google Analytics with your Webflow site, navigate to Project Settings and click on the Integrations tab.
Paste your Google Analytics Tracking ID into the box labeled “Google Universal Analytics Tracking ID”, and click Save Changes.
If you don’t know your Google Analytics Tracking ID number, it can be found under Settings > Property > Property Settings in Google Analytics.
We’ve received the most help from this resource when it comes to setting up Google Analytics filters. The Spam Blacklist section is especially useful for ongoing maintenance of spam filters, and you can also sign-up for email notices when the recommended spam filter settings are updated.
If you need to learn how to use Google Analytics, you can scroll through numerous posts of varying quality, or you could visit Google’s own free e-learning platform. Three courses are included for Google Analytics, ranging from beginner to advanced. Each course includes video, written content, and interactive components to help you get the most out of this powerful tool.
If you need a bit more information on how to integrate Google Analytics with Webflow site, including step-by-step instructions, this post from Webflow is for you. Also included is a set-up video if you prefer to learn through that medium.
Google Tag Manager is helpful for managing a website’s analytics tags. It allows you to set-up and test tracking elements without any help from a developer.
Most importantly, it helps you dive deeper into the nitty gritty of how users are interacting with your site.
Sure, it’s cool to be able to see how many people go to a given page on your website and how long, on average, they stay there, but many webmasters need much more data than that. With Google Tag Manager, that’s what you get.
Want to see how many users scroll 75% of the way down a given page? Want to know when someone starts to fill out a contact form but doesn’t finish? It can all be done with Google Tag Manager.
Without using Google Tag Manager for the many websites we manage, we would have far less actionable insights that lead to improving those websites and achieving the results expected by our clients.
Using Google Tag Manager significantly reduces the technical skill required to implement new tracking components, and allows for robust testing and debugging.
In other words, it enables marketers to do some of the work that would otherwise require the help of a developer, and that is one of the great parts of using Webflow, right?
To install Google Tag Manager, you need to include two snippets of code on your site.
For the first code snippet, go to Property Settings > Custom Code, and paste the <head> code snippet in the Head Code section.
The support documentation for Google Tag Manager recommends placing the Google Tag Manager <body> snippet as close to the opening <body> tag as possible. This is difficult to achieve in Webflow.
We tried using an HTML embed element, which is successful in placing the snippet in the desired location within the code. However, this also nested the Google Tag Manager element within an iFrame, which interferes with this tag communicating with Google Analytics.
As a result, we reverted to using the sitewide custom code settings. Placing the Google Tag Manager <body> tag snippet in the Footer Code section within the Project Settings > Custom Code options places the code snippet lower in the <body> section than desired, but it also doesn't wrap the element in an iFrame. Thus, the tag is able to properly communicate with Google Analytics.
Yes, there is a chance that people will complete an action and navigate away from a page before this tag fires, but it's a better alternative to having the tag not fire at all.
This is not an issue with Google Tag Manager set-up, but rather due to the YouTube API being blocked by the Embedly iFrame which is wrapping the YouTube iFrame. (Note that this tip is specific to Webflow)
This method is less prone to incorrect reporting due to a user reloading a confirmation page, for example. Goals can then be set against the events, if desired, to calculate metrics like conversion rate.
For example, a form fill can be pushed to Google Analytics as an “Event,” and in turn, a “Goal” in Google Analytics “listens” for the event, and records a conversion when it “hears” the event.
In the scenario where you don’t choose to use events, a “Goal” in Google Analytics simply recognizes a confirmation page page-view as a conversion. For marketers, it makes sense to have the most accurate data possible.
Set up basic tracking in Google Tag Manager:
The JSON file embedded below this paragraph provides the tags, triggers, and variables needed for a basic tracking set-up in Google Tag Manager. With the included items, you can track events such as form submissions, YouTube video interactions, contact link clicks, outbound link clicks.
Enter your email for instant access to the file:
Google Tag Manager Pack
The file above represents a distillation of concepts presented by LunaMetrics, now Bounteous, and Simo Ahava. If you find that the container is too simple for your needs, we highly encourage you to check out these two excellent resources.
The following tags, triggers, and variables will need to be updated with your information:
Lower down in the page, you’ll find a number of helpful links, including links to GTM containers with tags, triggers, and variables largely set-up. Here’s the starter pack.
Simo Ahava is an invaluable resource for troubleshooting more advanced use cases in Google Tag Manager. He also has a number of other helpful posts related to web analytics in general. His posts have saved us hours troubleshooting issues, and will likely do the same for you.
Google Search Console works hand in hand with Google Analytics and Google Tag Manager, so there’s no need to integrate it with your Webflow site.
With that said, the insights it offers are extremely valuable.
Google Search Console allows you to monitor organic search performance of pages and keywords, in addition to managing certain aspects of a site’s organic search presence on Google.
It also assists in uploading sitemaps, addressing indexing errors, and more.
Google accounts for over 90% of global search traffic market share, so it makes sense to keep this profile up-to-date and error free.
In addition, the performance data is a helpful tool for monitoring SEO trends for your own site, especially pertaining to specific queries and pages.
All integration of Google Search Console occurs outside of Webflow. Here are step-by-step instructions from Google on how to connect Search Console to Analytics.
Increase the likelihood multiple sitelinks showing up under your search listing:
It's no secret that some SERP listings are more powerful than others. It's easy to have a direct impact on some elements of a search result for your site, such as writing a more appealing or descriptive title tag and meta description. However, you have less control over elements like additional sitelinks below your main search result.
A question that often arises is, "How do I get my site’s card on Google to display my pages under it?" In short, the only way to impact this listing type is by having a thoughtful internal linking structure. When a user reaches a page on your site, how easy is it for them to reach related pages? If the answer is "not easy", then the Google bot also has a hard time connecting related pages together, thus sitelinks are unlikely.
A quick solution to increase the likelihood of sitelinks is to utilize header and footer links throughout your site pointing to your core pages (think: Contact, Reviews, etc.). In Google's support documentation on this topic, they mentioned the potential for webmaster input in the future, but confirmed the process of populating sitelinks is completely automated at the present time.
This is Google’s official blog for all things related to crawling and indexing. News related to the Search Console tool, including product updates, is announced on this blog.
Here’s a quality, no-nonsense overview of search marketing news stories, including changes to Search Console. If you go to one SEO industry news site, it should be Search Engine Roundtable.
Here’s a Google support doc providing step-by-step instructions on how to connect Search Console to Google Analytics.
If you have a business with a website, and you want that website to be found, it’s likely you will benefit from using Google Ads.
Google Ads allows you to purchase ads displayed on Google SERP pages.
While we believe it’s important to have a strategy in place for bolstering your website’s organic SEO, it’s undeniable that using Google Ads can get you tangible results much faster, and it should be a part of most online marketing strategies.
Paid search traffic can be a useful component of many digital marketing strategies, especially to supplement the early stages of an SEO effort.
All integration of Google Ads occurs outside of Webflow. Here are step-by-step instructions from Google on how to link up Ads to Analytics.
A Google support doc providing step-by-step instructions on how to link Ads to Analytics.
CausalImpact is an advanced analytics package developed by Google engineers that helps to answer questions like “how many additional daily clicks were generated by a Google Ads campaign?”. Please note that this tool requires a basic understanding of how to use the programming language R.
These are two resources that both explain and build upon the CausalImpact R package. The first post from Kan Nishida does a great job of explaining how the CausalImpact algorithm works, including concise definitions of key data science concepts used in this R package. If you’re more comfortable with R and data science, jump right into the Stitch Fix Case Study.
Google Optimize is a platform that facilitates easy A/B, split traffic, and multivariate testing.
A common use case is testing different versions of a landing page CTA. For example, does changing the color of the “Add to Cart” button from blue to orange increase conversion rates?
While small changes like this can seem minor and insignificant, they are definitely not. A/B testing should be on your radar as a webmaster, because testing a simple change could lead to a massive improvement in conversion rates.
The continued process of testing and refinement, especially when paired with website goals, focuses efforts on successful strategies. This avoids wasting precious time and resources and efforts that don’t work.
Below are integration steps as they pertain to Webflow. Google Optimize will still need to be linked with Google Analytics, and step-by-step instructions for this process are included in this support documentation from Google.
Here’s how to set-up the Webflow integration:
Paste your Container ID in the Google Optimize Integrations tab by accessing, Project settings > Integrations > Google Optimize.
Your Google Optimize Container ID can be found in a number of places, including on the home screen when you log into Google Optimize. If you manage multiple sites and create more than one container, ensure you're using the correct Container ID.
In order to provide the highest possible UX when running Optimize experiments, implement the anti-flicker code below. This code prevents two versions of the same page loading in quick succession, resulting in the page appearing to flicker for users.
To add the anti-flicker code to your site, navigate to Project Settings > Custom Code, and paste as the first item in the Head Code section. Here is the Optimize anti-flicker snippet:
This is Google’s support resource center for Optimize. Included are set-up instructions, information on how to link to Google Analytics and Ads, as well as a first-time users guide after the set-up process is complete.
This resource from Webflow includes step-by-step instructions on integrating Google Optimize with your Webflow site. Also included on this page are concise explanations of the various testing types available on Google Optimize.
From the horse’s mouth, Webflow Ecommerce allows you to “launch a fully functional, completely custom online store without writing a line of code”.
No ecommerce store is complete without payment processing, and Stripe allows for seamless payment processing, including Apple Pay and Google Pay, as well as providing fraud protection.
With Webflow Ecommerce and Stripe, you don’t need to be an expert in web design or ecommerce to launch a fully functional and completely custom online store.
Decide on whether or not you want to use an Ecommerce template:
If you start from scratch, use a non-Ecommerce template, or update an existing site; gain access to the ecommerce features by clicking on the Ecommerce icon in the left-hand sidebar of the Designer.
This is the best overview of Webflow ecommerce functionality, with information on building your store all the way through to processing orders. This page also contains links to a number of additional Webflow University articles related to Ecommerce.
Payments for Webflow ecommerce sites are processed through Stripe. Learn how to connect your Stripe account to Webflow, as well as browse frequently asked questions regarding payment processing using the two integrated platforms.
Gain access to Shopping ads on Google and YouTube by uploading your product and store data to Google Merchant Center.
Shopping ads show users key information about your product such as a product image and price, and appear on Google Search (including image search), in addition to YouTube.
Sure, it’s cool to have a Google Ad composed of a flashy title and captivating copy, but if you run an Ecommerce store, why stop at that?
It’s important to seize any opportunity you can to visually showcase your product and decrease barriers to purchase. That’s what you’re getting with Google Merchant Center.
Images are often more powerful than words, and the same holds true when trying to sell consumer goods using advertising on Google Search.
All integration of Google Merchant Center occurs outside of Webflow. Here are step-by-step instructions from Google on how to set-up your first product feed and get started using Google Merchant Center.
Create your first product feed in minutes using Sheets and this resource. The post also gives you access to the Google Merchant Center Help resource, which is especially valuable if your order volume or inventory size necessitates the use of Content API for Shopping.
We use Ahrefs every single day. It is an absolute powerhouse when it comes to all sorts of SEO and content marketing research.
Ahrefs is a leading SEO tool, facilitating common tasks such as keyword research and backlink analysis—both for your own site and that of competitors.
SEO is a main pillar of any successful digital marketing strategy. By using Ahrefs for content and competitor research, you can direct your content creation time to efforts that are likely to yield the desired results.
Here’s Ahrefs’ blog, a fantastic industry resource that doubles as a great way to learn how to use Ahrefs to the full extent of its potential. Scroll down the page to find the curated “Best of Ahrefs” blog section for the top articles.
Do you need to present data in a visual manner, but find that the process of creating data visualizations is overly burdensome and time consuming? If yes, then Google Data Studio is worth checking out.
Google Data Studio is a free business intelligence and data visualization platform. Building dashboards to track KPIs is the most common use of this platform.
Google Analytics—Google Search Console—Google Ads—Facebook Business.
That’s a lot of platforms!
Instead of visiting each platform individually to view analytics, a well designed dashboard can simplify this process by including your most important metrics in one spot.
Much like Google Tag Manager reduces the load on developers to implement tracking code, Google Data Studio reduces the load on analysts for pulling and reporting website data.
The Data Studio Gallery provides over 60 Data Studio templates to browse, all of which can be copied and edited to suit the specific needs of your business. The Marketing Templates section contains dashboards tailored to specific Google products, and the Community Gallery contains more general use business intelligence dashboards.
This article makes the argument that if you’re not using a dashboard everyday to take action, it should be deleted. They present an alternative to the types of dashboards found in the Data Studio Gallery, with a focus on simple, intentional design.
A sample Data Studio dashboard we set-up--feel free to copy and build out to fit the needs of your business. This report is a balance between the reports seen in the Data Studio Gallery and the vision laid out in CIFL’s post.
If you care about your website’s SEO performance, this tool is about to make your life a heck of a lot easier.
Screaming Frog is an awesome web scraper that facilitates robust and repeatable technical SEO audits.
If your site has more than 10 pages or so, it’s not efficient to review each page for tag coverage or meta description length. Save time and catch issues on your site with a repeatable and robust process by utilizing Screaming Frog.
A guide to doing “almost anything” with Screaming Frog from Seer Interactive. Included are instructions for using Screaming Frog to perform over 50 different technical SEO audit tasks.
Details on how to the custom search functionality in Screaming Frog. An example of how to use this tool is ensuring that all of your pages have the proper analytics tags. If a page is missing a tag that you specified in the custom search feature, it will be easy to find within the Custom report tab in Screaming Frog.
Screaming Frog’s custom extraction feature allows you to pull almost anything from your site’s source code into Screaming Frog. Let’s say you don’t want to just confirm that a Facebook pixel event exists on a page, but also identify the specific type of event pixel. Custom extraction allows you to do this, and Brian Shumway’s article is a perfect place to start learning how to use this powerful tool.
Screaming Frog presents data from crawls in different mediums, including visualizations. Crawl visualizations are helpful for understanding the link structure on your site, and directory visualizations are helpful for understanding your site’s page structure. This resource from Screaming Frog provides more details on the visualization features.
You’ve just integrated your Webflow website with powerful digital marketing tools. You’re on your way to running a dominant website that’s custom-tailored to business success.
Feeling integration overload? Have more integrations in mind? We want to hear from you!
Looking for a brand new Webflow site? Contact us here!
Have your design ready to be developed in Webflow?
Done in 1 Week
Mobile Ready, SEO friendly, & Accessible
Money-Back Satisfaction Guarantee
We handle everything web related for your business!
Unlimited Requests & Revisions
Money-Back Satisfaction Guarantee