Updated 4/30/22

How to run a successful business using Webflow

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:

Create a dominant website, supercharged by integration with industry-leading tools

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.

Feel free to read the whole post from top to bottom, or jump straight to the section you want to learn!

Analytics, SEO and UX Integrations

Integrating Webflow with Google Analytics & Google Tag Manager

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.

Webflow and Google Analytics

Using Google Analytics with your Webflow site

Google Analytics is a tool for collecting and analyzing traffic, engagement, and conversion data for website and campaign goals.

Why does it matter?

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.

How to integrate Google Analytics with Webflow

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.

google analytics and webflow

Tips and Tricks for Google Analytics

  • Spam traffic will negatively impact the quality of data in Google Analytics, and can be largely avoided through the standard “Exclude Bots & Crawlers” option, in addition to implementing the CarloSEO filter pack linked below.
  • If you’re collecting any personal identifying information (PII) in forms, including names and email addresses, change forms from the default “GET” protocol to “POST”. This will ensure that no PII is passed to Google Analytics within URL query strings, which is explicitly forbidden by Google, and could result in the account’s data being wiped. And nobody wants that.

Additional Resources

Carlo SEO

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.

Free e-learning from Google

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.

Webflow University

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.

Webflow and Google Tag Manager

Using Google Tag Manager with your Webflow site

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.

Why does it matter?

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?

How to integrate Google Tag Manager with Webflow

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.

install google tag manager

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.

custom html and css

Tips and Tricks for Google Tag Manager

  • It’s easier to rely on the Facebook Pixel Integration rather than trying to manage this code through Google Tag Manager. (Note that this tip is specific to Webflow)
  • If you’re using the Webflow native video element  to serve YouTube videos to users on your site, you will not be able to track interactions with these videos.

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)

  • We encourage the use of events to track form submissions, even when there are confirmation pages that can be tracked against with destination-based goals.

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:

Oops! Something went wrong while submitting the form.

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.

  1. To import a container in Google Tag Manager, open up the desired container and click on the Admin tab at the top of the screen.
  2. Under the Container column, click Import Container.
  3. Choose the JSON file provided.
  4. Click "Existing" under "Choose Workspace," and select your current workspace from the list provided.
  5. Choose "Merge" for the import option, and "Overwrite conflicting tags, triggers, and variables.
  6. Click "View Detailed Changes" to review, and click "Confirm" to process the changes.

The following tags, triggers, and variables will need to be updated with your information:

Variables:

  1. GA Tracking ID
  2. Google Optimize - CLIENT Container Snippet

Triggers:

  1. LEAD GEN FORM - Successful Submission
  2. Contact Form - Successful Submission

Tag:

  1. GA - Event - LEAD GEN FORM

Additional Resources

Lunametrics (now Bounteous)

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

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.

Setting Up Google Search Console & Integrating with Google Analytics

Using Google Search Console with your Webflow site

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.

Why does it matter?

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.

How to integrate Google Search Console with Webflow

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.  

Tips and Tricks for Google Search Console

  • Use the Search Analytics for Sheets add-on for Google Sheets. This allows for in-depth analysis using Sheets functionalities, especially when it comes to analyzing clicks, impressions, and rankings for specific queries.

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.

Additional Resources

Google Webmaster Central Blog

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.

Search Engine Roundtable

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.

Webflow and Google Optimize

Using Google Optimize with your Webflow site

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.

Why does it matter?

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.

How to integrate Google Optimize with Webflow

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:

<!-- Anti-flicker snippet (recommended)  -->
<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',4000,
{'OPT_CONTAINER_ID':true});</script>

Don’t forget to replace OPT_CONTAINER_ID with your own Optimize Container ID!

optimize container id
add custom code

Tips and Tricks for using Google Optimize

  • Google Optimize makes setting up A/B tests simple. Just make sure to have a Goal to measure against set-up in Google Analytics before setting up your A/B test.
  • Keep in mind, multivariate and split traffic testing methods are also available in Google Optimize.

Additional Resources:

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.

Ecommerce Integrations

Webflow Ecommerce & Stripe

Using Stripe with your Webflow site

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.

Why does it matter?

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.

How to integrate Stripe with Webflow

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.

Tips and Tricks for using Stripe

  • Test before you go live! The Stripe testing function does not work on a live site, so if you are already live and want to test functionality, you will need to process a transaction and then refund it back to yourself.
  • Stripe’s instructions on using the testing mode before launching your site are provided here.
  • If you forget to test before going live, set up a $0.50 item to purchase. Stripe has a $0.50 minimum product price.

Additional Resources

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.

Google Merchant Center & Google Sheets or Content API for Shopping

Using Google Merchant Center and Google Sheets

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.

Why does it matter?

Images are often more powerful than words, and the same holds true when trying to sell consumer goods using advertising on Google Search.

How to integrate the Google Merchant Center and Google Sheets or Content API for Shopping with your Webflow site

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.  

Tips and Tricks for using Google Merchant Center with Google Sheets or Content API for Shopping

  • The standard product feed templates are the easiest way to get started, but stores with more SKUs or higher order volumes should use the Content API for Shopping.

Additional Resources

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.

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.

google optimize

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.

add custom code

Tips and Tricks for using the Facebook Pixel

  • With Webflow’s integration, you are presented with the option to delay the pixel from loading without cookie consent. We are not here to tell you whether GDPR applies to your site. If it does, selecting this option is very important.

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:

Event
Pages
Event Code
ViewContent
Key pages, such as product pages or ad landing pages
<script> fbq('track', 'ViewContent'); </script>
CompleteRegistration
Confirmation page(s) for contact forms
<script> fbq('track', 'CompleteRegistration'); </script>
Subscribe
Confirmation page(s) for email newsletter sign-up forms
<script> fbq('track', 'Subscribe'); </script>
Lead
Confirmation page(s) for transactional forms
<script> fbq('track', 'Lead'); </script>
SubmitApplication
Confirmation page(s) for job applications
<script> fbq('track', 'SubmitApplication'); </script>
AddPaymentInfo
E-commerce checkout page(s)
<script> fbq('track', 'AddPaymentInfo'); </script>

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.

integrate twitter with webflow

Tips and Tricks for Twitter

  • Many times, you may simply want to reuse your title tag and meta description for the OG Title and Description. In Webflow, this is as simple as selecting this option below the applicable fields in the Open Graph Settings window. However, don’t forget to set an OG image!

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.

integrate webflow with youtube

If you’re not using a YouTube video, employ the Webflow native video element.

Tips and Tricks for using YouTube

  • Within the YouTube embed element, under Privacy, make sure “Limit related videos to the same channel” is checked.
  • With the use of Google Tag Manager and Webflow, videos from YouTube are the easiest to include on your site, and it’s equally easy to then track how users interact with this content.
  • You can embed videos from other sources as well, but watch out for nested iFrames. This can create interference for APIs, which makes tracking difficult. For example, you cannot track YouTube videos that are served through the Webflow native video element, due to the YouTube iFrame being nested within the Embedly iFrame.

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.

Other Tools: Not Webflow-Specific

Ahrefs

Using Ahrefs

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.

Why does it matter?

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.

Tips and Tricks for using Ahrefs with your Webflow site

  • The “Site Audit” tool can be used for technical SEO purposes, the “Content Explorer” and “Keyword Explorer” features help with content creation and SEO strategy, and the “Rank Track” can be used for ongoing tracking—both of your site and that of competitors.

Additional Resources

Ahrefs Blog

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.

Google Data Studio & Other Data Sources: Google Analytics, Google Search Console, Google Sheets

Using Google Data Studio with other data sources

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.

Why does it matter?

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.

Tips and Tricks for using Google Data Studio with other data sources

  • The data studio gallery is the perfect place to start with this tool—see what’s possible and build off of other reports by copying a template. The Coding Is For Losers post shared below offers another perspective on dashboards that are simple, and built for humans to understand. Between the data studio gallery and the CIFL post, you will find a balance between simplicity and depth of data that works for your business.
  • Google Data Studio was officially released from beta in late 2018, and the tool is continually updated and improved. You can add, comment, vote and track requested features here.

Additional Resources

Data Studio Gallery

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.

Data Studio Sample Dashboard

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.

Screaming Frog

Using Screaming Frog with your Webflow site

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.

Why does it matter?

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.

Tips and Tricks on using Screaming Frog

  • Use Custom Search & Custom Extraction to find and extract elements from the code on your site’s page. This can be helpful for ensuring that pages have the desired tags.
  • Crawl and Directory diagrams can be used to assess the link structure and page structure of your site. The directory diagrams are helpful for quickly spotting indexing issues on your site, especially concerning improper canonicalization.
  • Use the API feature to pull data from your favorite SEO tool (including Ahrefs, Majestic, and Moz), as well as Google Analytics and Google Search Console. Just remember that these APIs do not automatically turn on. If you use this feature, connect the desired APIs pre-crawl.

Additional Resources

Seer Interactive

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.

Grand Finale

Congratulations!

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!

What did we miss? Is there anything we should add?

How can we make this guide even better?

Leave a comment below and let us know!

How we work

Looking for a brand new Webflow site? Contact us here!