How to Integrate Webflow Google Analytics

The notion behind creating a website is that it is an overwhelmingly daunting task meant for developers and coders. However, that is not the case. It is possible to create a website by yourself without any coding experience. 

This is done using website builders that remove the hassle and complexity of codes. An example of website creation software is Webflow. 

What is Webflow?

Webflow is a software-as-a-Service (SaaS) program that allows you to create unique and visually appealing websites. 

Webflow allows developers, designers, and marketers to quickly bring their business ideas to life, as Webflow put it, “The site you want without dev time.” 

Webflow gives designers complete control to create different projects such as portfolios or blogs. 

Webflow supports Marketers with marketing features and publishing power. 

While Developers have the opportunity to use their coding skills and Webflow’s abilities to integrate custom codes and utilize Central Management System (CMS) interface.

Benefits of Webflow

Webflow is free. You can use all its features until you are ready to launch your website. 

Webflow allows you to create designs that are content-driven based on your requirements. 

You can build e-commerce stores for your brand or business. 

Grow an audience,  build a community and provide members-only content. 

Make your site interactive and exciting with animations. 

An inbuilt What-You-See-Is-What-You-Get (WYSIWYG) editor that makes content creation, edition, and publishing easier and faster. 

Access to robust Search Engine Optimization (SEO) settings that rank your website well in search engines. 

Access to its Web hosting service is known for its speed and reliability. 

Most importantly, it allows the integration of your Webflow website with tools that help your business grow, such as Google Analytics.

Read more on: All You Need To Know About Firebase Google Analytics | Beginners guide.

Now that we have an overview of Webflow and its benefits let us go through how to create an essential Webflow website. 

STEP 1: Go to the official Webflow website and sign up for a free Webflow account. Although the website is free, you will have to pay for hosting. 

HOW TO HOST WITH WEBFLOW 

– Go to the Webflow website, click “Get Started,” and create a free account. You can add a custom code or export code if you are code-savvy. 

– Buy a custom domain in Webflow or use your domain if you have one. 

– Buy the site plan that fits your goals: A basic plan for static websites, a Business or CMS plan for dynamic websites, and any E-commerce store plan for your online store. 

– Connect your domain to your Webflow website.  

– Manage your website. Invite colleagues to edit content with you on your website.

STEP 2: ANSWER THE QUESTION PROMPTS

These questions include the name of your website, your skills or experience level, role in the website creation, which the website is, e.g., clients, a company, business, or yourself, and what you want Webflow to build for you. 

Such as e-commerce stores, portfolios, blogs, etc. Ensure to choose the best fit for you. 

The questions help Webflow to tailor your creative journey to suit your needs. Click “Continue” when you are done. Next, click on “+ New Project.” 

STEP 3: SELECT A TEMPLATE

From step 2 above, you will be taken to a page with different templates. Choose a template you like, open it and preview the pages built in it. 

You can also preview how visitors will see the template on your website and how it will look as an actual design. 

Click on “use for free” if it is a free template or buy it if paid. 

STEP 4: NAME YOUR WEBSITE

A pop-up question will ask you to name your project or site. Next, click on “Create site.” This opens the Webflow interface. 

STEP 5: GET FAMILIAR WITH THE WEBFLOW INTERFACE

The Webflow interface has various features that perform different functions during the creation process. They include:

CANVA: This is the WYSIWYG editor, which allows you to engage with items on your screen by clicking and dragging them. 

+ SYMBOL: This is located at the top left corner of the canvas, and it opens up the “Add” panel. You can add blocks, sections, headings, forms, etc. Ensure to check out all elements. 

STYLE PANEL: This is used to modify or edit the elements you add from the “Add” panel. 

NAVIGATOR: This is found at the top right corner of the canvas. It gives you an overview of how the Webflow elements are organized.  

You can change the location and structure of various elements to suit your preferences. 

PAGES PANEL: The paper icon at the top left icon of the canvas. It allows you to change your SEO settings and make changes to your current page. 

E-COMMERCE ICON: This icon allows you to create an online store. 

ASSETS: Drag and drop files or photos you have uploaded to your “Assets” section.

Webflow CMS: Webflow’s Central Management System allows you to add and edit any content and switch up your project from one type to another, from portfolio to blog. 

You can also link your CMS to Social Media like Twitter. 

To find your CMS, navigate to the Stack symbol at the top left corner of the dashboard and enable your CMS. 

Webflow EDITOR: The editor removes the hassle of back-end editing and allows you to easily modify content on your site, thereby preventing you from changing the website design and layout. 

To launch your editor, go to your “Live” site and click “Edit site” in the bottom right corner. A toolbar will pop up where you can change text, pictures, and edit button links. 

STEP 6: CUSTOMIZE YOUR WEBSITE

To customize your site, you can follow the “Webflow essentials” guide, which creates a list of tasks you must complete. 

You can structure your site by adding layouts, blocks, and items and changing the layout, spacing, size, position, etc., of various elements. You can also create reusable styles, share blog posts, articles, etc. 

1. Start with your homepage: It is essential to make changes to your homepage first because any change made to the elements on your homepage will be effective across all pages. 

For example, if you change the font of your homepage headline, the headline fonts of other pages will also change. This occurs because Webflow has Cascading Style Sheets (CSS) classes that it uses to control the appearances of elements on your website. 

2. Background images: You can edit the background image of your template. To do this, click on the background container or “Hero” (A box that contains the content on your website). 

Click on the container to select it, navigate to the “Background” section and click on the current image. Select “Replace image” and upload your desired image to the container.

3. SEO and Site settings: To edit your website’s SEO settings, go to the “Pages” panel and click “Home.” Input a meta title and meta description for your site. 

To edit your site settings, go to your dashboard > settings > make the necessary changes you want and save them. 

 STEP 7: PREVIEW AND PUBLISH

Preview how your site will look to visitors by clicking on the eye icon in the top right corner. Next, click on “Publish to Selected domains.” This publishes your site and launches it. 

STEP 8: MANAGE YOUR WEBSITE AFTER LAUNCH 

Webflow allows you to change your website as much as you want. 

Any changes you don’t want to go live after you publish can be published to your Webflow.io domain. 

This allows you to double-check before publishing. 

If you use CMS hosting and Webflow CMS, you will have access to Webflow’s editor. You can use this to write and edit content quickly and view the changes as they appear on your live page. 

As mentioned earlier, Webflow Google Analytics integrates various tools to your website to support and increase the range of activities your website can perform. One essential tool is Google Analytics. 

Google Analytics is a web analytics tool that collects your site’s data, analyzes it, and reports it in a way that is easy to follow. 

It gives you insight into your site’s performance, visitor views, how much time people spend on your website, what decisions they take (bounce rate), where they come from, etc. 

With Google Analytics, you can track your website and compare your signs of progress with time. 

For many small to large-scale enterprises, Google Analytics is the go-to analytics platform that helps them understand their site’s data and make well-informed, data-driven decisions such as changing a marketing tool or strategy or determining their effectiveness. 

How to integrate Webflow Google Analytics into an e-commerce store

So how can you integrate Webflow Google Analytics into an e-commerce store? 

The following steps list the procedures to take to add Google Analytics to Webflow.

STEP 1: CREATE A GOOGLE ANALYTICS ACCOUNT 

1. To do this, go to the Google Analytics website and sign up. Next, in the “Account Setup” section, enter your account name and select a data sharing option. 
   
   

Click on “Add property” and enter other essential information. 

If you want to create a Universal Analytics account, toggle the option, tick the boxes that apply to it, and click “Create.”

 

Choose a “Data Stream” platform: Web, Android, or iOS app. 

Enter your Webflow website URL, input a stream name and click on “Create stream.” When your steam details come up, copy your measurement ID for Google Analytics 4 property) and tracking ID for Universal property. 

STEP 2: ADD GOOGLE ANALYTICS TO WEBFLOW

You can integrate Google Analytics to your Webflow site directly or through Google Tag Manager. 

1. DIRECT INTEGRATION: You can find Google Analytics settings when you log in to your Webflow site > Dashboard > Project settings > Integration > Google Analytics. Next, paste the ID you copied from step 1 above in the field provided. Click on “Save changes”> “Publish.” 
   
   

This successfully integrates Webflow Google Analytics and runs a Google Analytics Webflow program. 

2. GOOGLE TAG MANAGER: To use Google Tag Manager to add Google Analytics to your Webflow site, go to the official Tag Manager website and create an account. 

Next, click on “My container”> “Workspace.” Select “Tags” and click on “New.” 

On the next screen, name your tag and choose your tag type. Select Universal Analytics or Google Analytics 4, depending on your property type. 

Now paste the measurement or tracking ID in the field provided. 

Configure your triggering options: you can choose which pages to track or select “All pages trigger.” Click “Save” when you are done and then “Publish.” 

STEP 3: TEST CONNECTION 

Testing that your Google Analytics account was successfully connected to your Webflow account is essential. 

For the direct integration, sign in to your Google Analytics account first. Go to “Real-time”> “Overview.” Your Webflow site’s data will be displayed on your dashboard. 

If you used Google tag manager, you need to validate your Google analytics code. First, ensure you install “Google Tag Assistant.” 

Next, log in to your account and click on “Enable.” Refresh the page. The results will show the number of tags your assistant picks up, including you recently added Webflow tag. 

If the connection is successful, at least one visitor will be on your website. 

E-COMMERCE TRACKING 

If you are running an e-commerce store, you can track events on your Webflow stores, such as “viewed” products, products that were added to their cart, and purchased products. 

To do this, sign in to your Google Analytics account and go to “Admin”> “VIEW” column > “E-commerce settings.” 

Here, toggle “E-commerce” ON and click “Save.” 

You can also do this from your Webflow site. Go to your dashboard > navigate to Google Analytics Settings and toggle on “global site tag.” 

FINAL THOUGHTS

Webflow is a website-building platform that allows you to create personalized and unique websites, blogs, portfolios, or e-commerce stores. 

It allows the easy integration of Google Analytics to your site, thus allowing you to view and understand your site’s data and improve your site’s overall outcome and quality. 

For more enlightening content like this, follow Adilo on Twitter.