Our Pro Tip: Conducting System Integration with Webflow

What is System Integration like in Admiral Systems?

At Admiral Systems, we integrate Webflow with a robust set of SaaS tools that allow us to collect and inspect data. This allows our team to track how users interact with your website and their actions. By integrating Webflow with these tools, we can deliver helpful insights that help you optimise your site. These insights include conversion tracking, custom event tracking (e.g. add to cart, subscription, sign up), user session timelines, real-time reporting and real-time insights to improve your user’s experience.

Every company has its own way of doing things. Some are more complicated than others, but at the end of the day, it all comes down to finding a solution that works for you.

What’s the recipe? This is the list of must-have software tools

Google Tag Manager

The Admiral Systems team uses Google Tag Manager to manage our tags and custom code. We also use Webflow to create our websites, so we wanted to share how we use them together.

One of the most important parts of any web project is making sure that it’s tracking properly. To do this, we use Google Tag Manager (GTM) as our preferred tag management.
‍

Here’s how it works:

• GTM allows us to tag individual pages on your website with custom JavaScript tags that can be used for conversion tracking, site analytics, remarketing and more.
• Google Tag Manager allows us to add and update custom tags for conversion tracking, site analytics, remarketing and more. It's a lightweight tool that doesn't require any coding knowledge and works across any device or browser.
  
• Error checking and tag loading are easy to use, ensuring that your data is collected reliably and accurately. Your digital team will feel confident that the site is running smoothly, so everyone's happy--even during busy holidays or the launch of a new campaign.
  
• Tag Manager allows the team to add or change the tags as needed. The tool supports all tags and offers easy-to-use turnkey templates for a wide range of Google and third-party tags for web and mobile apps. In addition, Tag Manager can help the team manage how the tags behave once users make their cookie consent decisions.

Google Search Console

Search Console is a free, web-based tool from Google that website owners can use to understand how their sites appear in Google search results and discover ways to improve their performance.

When integrating Google Search Console with Webflow, we can monitor and maintain our site's presence in Google Search results. This helps us identify issues quickly and troubleshoot them before they become serious problems.

Better yet, there is no need to log in to Search Console every day. If new issues are found by Google on your site, you'll receive an email alerting you to the problem.
‍

Here’s how it works:

• We verify the site through Webflow's SEO settings, then submit the sitemap in Search Console.

Learn what Webflow handles for SEO and what it leaves to you, such as Google Search Console.

Google Analytics 4

Admiral Systems uses Google Analytics 4 to track traffic and engagement across our websites. We use this information to determine what content is most popular and how users are interacting with the sites.

The Google Analytics 4 integration allows us to measure traffic and engagement across your websites. We can tell how many people visit each page, where they came from, how long they stay on the site, which pages they view and more. This information is extremely valuable in helping us optimise our sites for better performance.
‍

Here’s how it works:

• Google Analytics 4 offers machine learning capabilities, which provide insights automatically and allow you to gain a complete understanding of your customers across devices and platforms. Its privacy-centric design ensures that you can rely on Analytics even as industry changes like restrictions on cookies and identifiers create gaps in your data.
  
• Previously, you had to use Google Analytics for website tracking and Firebase for app tracking. Now you can do it all in one place (website and app) with Google's new unified analytics package, which is called simply "Analytics." This is good news for marketers because fewer martech tools mean they have more time to get other important work done.
  
• Google Analytics 4 provides ready-made measurements out of the box for marketers, such as scrolling, outbound link clicks, document link clicks, and website searches. This means that marketers can track more without having to rely on developers' help to set up custom events.

Learn how to audit a Google Analytics 4 setup.

Segment

Segment is a customer data platform (CDP) that helps you collect, clean, and activate your customer data. It allows you to send all of your application data to the tools you want to use. This includes the likes of Google Analytics, Mixpanel, Customer.io, AB Tasty, Fivetran, Facebook Ads and many more.

Segment has a powerful API that allows you to send any type of event or data point from any platform. You can even use Segment as a way to manage your company's data warehouse or ETL process.
‍

Here’s how it works:

• Segment's libraries generate and send messages to the tracking API in JSON format. Segment provides a standard structure for the basic API calls, along with a recommended schema that helps keep the most important parts of your data consistent while allowing great flexibility in what other information you collect and where.
  
• Sources: Segment provides a number of different Source types that can be used to send data to Segment. The type you choose depends on the needs of your app or site. For websites, you can embed a library which loads on the page to create Segment messages.
  If you have a mobile app, you can embed one of Segment's Mobile libraries, and if you'd like to create messages directly on a server (if you have, for example, a dedicated .NET server that processes payments), there are several server-based libraries that you can embed directly into your backend code. (You can also use cloud sources to import data about your app or site from other tools like Zendesk or Salesforce, to enrich the data sent through Segment.)
  
• Destinations: When Segment generates messages, it can send them directly to our servers for translation and forwarding on to the Destinations you're using. Or it can call your APIs directly from the app or site. The choice depends on which Destinations you're using, among other factors.

Fullstory

Admiral Systems uses Fullstory to help our clients learn more about their users. We use it to gain insights into their behaviour and to uncover the most common problems they face.

Fullstory is a Digital Experience Intelligence (DXI) platform that captures every user interaction with total privacy. When user data is clear, the path to perfection is, too. Uncover more, optimise more, and convert more.

We’re able to create an environment where our clients can feel safe sharing their data with us so that we can help them improve their products and services.
‍

Here’s how it works:

• FullStory's script creates pixel-perfect renditions of user journeys for our customers so that they can find and eliminate frustration and provide the best user experience.
  
• It captures every action for every user across thousands of websites, providing our customers with insights into how their users interact with their products.
  
• Heatmaps: FullStory has two types of heatmaps that show you aggregate data about how users engage with your pages. From any page in a session replay, click Page Insights at the top. Click Maps show where people clicked on a page, while Scroll Maps show where they scrolled to.
  
• A session is a series of user interactions on your site. A session begins when a user visits your website, and ends after 30 minutes of inactivity or 24 hours of active session capture (meaning the user has been inactive for at least 30 minutes)
  For example, if a user finds your site in a list of Google search results and clicks through to your landing page, their session will begin with the landing page, and last until they have been inactive for at least 30 minutes during the session. If they revisit your site after they've been inactive on your website for more than 30 minutes, their activity will be captured as a new, separate session.

Learn how Fullstory data shapes marketing strategy.

Mixpanel

Admiral Systems uses Mixpanel, an analytics platform for mobile and the web, designed to help everyone make sense of their data. Mixpanel employs an event-based, user-centric model that connects each interaction to a single user. Our system tracks events that happen on your website or app and then uses those events to generate metrics, charts and insights.

Our goal is to provide a simple way for you to understand how your visitors are using your site or app so that you can make better decisions about what features to build next.
‍

Here’s how it works:

• Data Model: Unlike some other analytics tools that measure only pre-defined metrics, such as page views and browser sessions, Mixpanel employs an event-based, user-centric model.
  This approach captures a deeper understanding of user engagement, which allows for more granular analysis and effective targeting of messages and experiments.
  
• Events: An event is a meaningful action that a user performs in an application or on a website. Events can be a wide range of actions, including signing up for an account, playing a song and searching for information. It is important to determine which user actions are important to collect and later analyse.
  Those actions should be tracked as events.
  
• Event Properties: Event properties are key-value pairs associated with an event that describe either the event itself or the user who performed it. Event properties help provide context about events, allowing for more detailed insight into event-driven data. When a new user signing up is tracked as an event, the type of plan they signed up with can be collected as a property of the sign-up event.
  For example, if a user plays a song, the title of the song can be collected as a property of the song-play event.

Google Ads Conversion

Webflow is a tool that allows the marketing team to create a landing page for the next campaign easily. With that out of the way, now the team has more time to prepare creative end-of-the-campaign advertisements and tap into Google Ads to reach customers for what the campaign is offering easily.

Integrating Webflow with Google Ads with Google Tag Manager makes it easier for marketers to reach their target audience and analyse conversions.
‍

Here’s how it works:

• Google Ads Conversion Tags help you build reports that track what happens after a customer clicks on your ads -- whether they purchased a product, signed up for your newsletter, called your business, or downloaded an app. When a customer completes an action that you've defined as valuable, it's called a conversion.
  
• Use Google Ads remarketing to re-engage potential customers. You can add your website and app visitors to remarketing lists and then target those lists with ads.

Meta Ads Conversion

Meta and Instagram ads can be effective advertising channels for many businesses, but they rely heavily on the right data signals to perform. The Facebook pixel is one of these signals: it helps to send information into Facebook's systems, which enhances your advertising performance.

Admiral Systems uses Google Tag Manager (GTM) to add the Facebook pixel to your website tracking by using GTM's built-in Tags for Facebook Pixel.
‍

Here’s how it works:

• The Meta Pixel is a snippet of JavaScript code that allows you to track visitor activity on your website. It works by loading the Meta Pixel library, which you can then use whenever you want to track an action (called an event) that will lead to a conversion.
  
• Tracked conversions appear in the Ads Manager, where you can use them to measure the effectiveness of your ads and define custom audiences for ad targeting. You can also use them to analyse the effectiveness of your website's conversion funnels.

Planning Your Data Right From The Get-Go

At Admiral Systems, we work with our clients to adopt the same mentality--that data drives decisions. This helps them to be aware and understand how their business is performing. We build event-tracking plans from the start so that this goal can be accomplished.

Event Tracking Plan Overview

What is a tracking plan?

A tracking plan is a document or spreadsheet used across an organisation to standardise how it tracks data. It aligns multiple teams around one strategy for customer data collection by listing events (i.e., user actions) accompanied by descriptions for each event.

For example, these events are used to map the most important steps of the customer journey, from free trial sign-up to recurring subscriptions to churn.

What is the role of a tracking plan?

A tracking plan provides a single source of truth across your organisation for understanding what data you are tracking, where that data is being tracked, and why.

Admiral Systems’s Quality Assurance Process

For all the data tracked for our clients' businesses, Admiral Systems runs an extensive Quality Assurance process. The process may look simple, but there are a lot of debugging and checks we conduct to ensure that the data is clear and usable.

What is data quality assurance?

Data quality assurance is the process of determining and screening anomalies, removing obsolete information, and cleaning data throughout its lifecycle. To protect its value, it is important to have an enterprise-wide strategy for data quality assurance that addresses all aspects of the organisation's data.

How do we conduct data quality assurance?

Our quality assurance process has four steps:

1. Define the event, or the change to it, in the event tracking plan.
2. Define the event on the Webflow staging site.
3. Fire the event on the staging site and debug it in Segment's Debugger.
4. When every event and its properties fire correctly, we deploy all tracking to the live Webflow site.