The Definitive Guide to Business Marketing, SEO, and Analytics when using Webflow to manage your website
Our agency’s journey with Webflow began almost 10 years ago—and over the course of those years, we’ve been in a constant state of learning, as we’ve refined our craft.
If we were to boil down our experience to one sentence that encompasses why a platform like Webflow matters, it would be this:
Every webmaster—whether they are a business owner running a company website, or an agency charged with creating, running, and growing a company’s digital presence—needs their website to work seamlessly, facilitate marketing efforts, and meet business objectives.
Right now, you might be thinking, “I hope it doesn’t take me five years to learn something so simple!”
Don’t worry, it won’t, and here’s why:
We’ve decided to share our experience integrating Webflow with a number of free or low cost Digital Marketing, SEO and Analytics tools.
You’ll find that Webflow is much more than a web design platform. It’s also a flexible, central hub for all of your digital marketing efforts.
Once you’ve devoured this post, you’re going to be an expert at integrating your Webflow site with tools and platforms that help you deliver winning results.
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.
Please Note:
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:
Variables:
Triggers:
Tag:
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.
Google Support - Configuring Search Console data in Analytics
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.
Google Support - Link/unlink Google Ads and Analytics
A Google support doc providing step-by-step instructions on how to link Ads to Analytics.
CausalImpact R Support Documentation
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:
Google Support - Set-up Optimize
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.
Webflow University - Integrate Google Optimize for A/B and multivariate testing
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.
Webflow University - Webflow Ecommerce Overview
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.
Webflow University - Connecting to a Payment Gateway
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.
Google Support - Create a Feed
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.
Coding is For Losers - Dashboard Confessional
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.
Screaming Frog Blog - Custom Search
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.
LinkedIn Pulse - Custom Extraction in Screaming Frog: XPath and CSSPath
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 Blog - Site Architecture & Crawl Visualizations
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.
Looking for a brand new Webflow site? Contact us here!
For Designers, Agencies & Marketers who need help on a regular basis.
Tracking Dashboard
3-Day Guarantee for most tasks
Money-Back Satisfaction Guarantee
We handle everything web related for your business!
Tracking Dashboard
Same-Day Guarantee for most tasks
Money-Back Satisfaction Guarantee
Social Media Platform Integrations
Webflow and the Facebook Pixel
Using the Facebook Pixel
The Facebook Pixel is quite possibly the greatest thing on earth for marketers. Ok, well, maybe that’s a bit of hyperbole, but we really, really love it.
Why?
Basically, the Facebook Pixel is a piece of code that collects information on actions that Facebook users take on your website.
It allows you to retarget traffic that has visited specific pages on your website, or at an even more granular level, performed certain actions on those pages.
For example, let’s say you’re running a Facebook ad that drives people to a landing page where they can purchase your product.
With the Facebook Pixel, not only can you run retargeting ads to anyone who has landed on that page without purchasing, but you can also run ads specific to users that scrolled all the way down the page, or abandoned their cart.
Why does it matter?
Facebook Pixel data can be used to tailor ads to specific audiences that are most likely to take a desired action, leading to a higher ROI for Facebook Ad spends.
How to integrate the Facebook Pixel with Webflow
Use the Webflow integration
Paste your Facebook Pixel ID in the Facebook pixel section on the Integrations tab by accessing, Project settings > Integrations.
For events not included in the integration (any events beyond pageview, viewed product, added product to cart, and purchased product), use Page Settings > Custom Code to add the <body> section of each page as needed.
Tips and Tricks for using the Facebook Pixel
A sensible approach to Facebook Pixel event tags
Including the proper code for specific events captured by the Facebook Pixel is integral to generating accurate data that enables actionable insights. Creating a spreadsheet that maps out when and where you want to include specific Facebook pixel event code is a worthwhile approach to ensuring tagging consistency.
Here’s an example of a simple spreadsheet that we use for this purpose.
Keep in mind that by using Webflow’s Facebook Pixel integration, four standard events are passed to Facebook automatically: pageview, viewed product, added product to cart, and purchased product.
In addition to the events automatically included above, here is a list of the Pixel event tags that we use most often. To use these on your site, paste the desired Facebook Pixel event tags in the <body> section of the code, found under page settings, on the applicable pages:
Additional information on Facebook Pixel standard events can be found here.
Additional Resources
Facebook Ads Help Center - Standard Events Best Practices
Learn more about Facebook Pixel standard events, including definitions of the available events. If the standard events don’t meet your needs, you can read about the custom conversions option here.
Webflow University - Facebook Pixel
If you need to use multiple Facebook Pixels on a site, or require information on how to set-up a pixel cookie consent banner for your site, this Webflow University post should provide all the requisite information.
Open Graph (OG) Setting in Webflow
Using Twitter with your Webflow site
Let’s get something straight here for the hip hop fans: OG stands for Open Graph.
In order to properly display your Webflow site’s content on social media, define the OG settings of your pages. These OG settings help social networks pull data from your site, such as an image to correspond with a page, when your URL is added to a specific social network.
This same OG standard is also used by other social media channels you may post on, such as Instagram and Facebook. Please note that you may need to adjust image dimensions based on platform. More information on recommended OG Image dimensions for popular social media platforms can be found here.
Why does it matter?
Modern social networks are inherently visual platforms. Ensuring the visual presentation of a shared link is as strong as possible may be the difference between getting a click through to your site or not.
How to integrate Twitter with Webflow
In the Designer, select the Pages panel > Page settings > Open Graph Settings. An Open Graph Preview will also be available in this window.
Tips and Tricks for Twitter
Additional Resources
Webflow University - Open Graph Settings
This is an excellent overview from Webflow on the Open Graph standard, and it also provides information on more in-depth features in Webflow, such as using dynamic Open Graph settings.
Webflow and YouTube
Using YouTube with your Webflow site
Ignoring video in your online marketing strategy is the equivalent of perennially skipping leg day at the gym.
Video is an increasingly popular way to consume content online, and YouTube is the largest online video platform in the world. As such, Webflow includes a specific YouTube embed element for including this type of content on your site.
Why does it matter?
Video is a powerful tool to convey brand messaging and show off your product.
How to integrate Webflow with YouTube
Use the YouTube video element to embed YouTube videos on your Webflow site.
If you’re not using a YouTube video, employ the Webflow native video element.
Tips and Tricks for using YouTube
Additional resources
Webflow University - YouTube Video
An article from Webflow University about the YouTube video element and how to implement on your Webflow site. As opposed to the native video element, the YouTube video element gives you more control over how the embedded video looks, its play functionality, and the ability to track user interactions with the video.
Webflow University - Video
A more general article from Webflow University on adding video to your site. If you need to embed a video from Twitch, Vimeo, or KickStarter, this is the video element to use. In total, 12 video platforms are supported which are all listed in this article.