On this Webflow lesson we take a look at the post-launch checklist. How to integrate Google Analytics with Webflow and how to submit your Webflow sitemap.xml correctly to Google Search Console.
All our project files for you to practice and play with along with some bonus materials.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
all right guys this is the last lesson
of the webflow course
so we know that webflow has some basic
analytics
so if you go over to your webflow
general settings you're going to have
some basic
statistics how many visitors you have
and how many views and the bandwidth but
these analytics
are very uh simple very basic
what i want to show you guys is the
ability for us to have
a little bit more control over who's
visiting what device they're coming from
where the actual users are coming from
and a bunch of other features that
webflow does not
provide if you open up your cloudflare
again you will see that they do have
some analytics but again these are very
basic
statistics so the way we do this is we
create an account with google
analytics and you will see something
like this
where you have three columns to create
the account so that would be the primary
account
that you want to use then you have a
create a property
and this is the one we want and then
create a view is just additional views
of that same property now the property
what it
what it means is just creating a website
or or
linking it to a to a domain
so we're gonna click create property
and right away we get asked a couple of
options
we're gonna select the first one which
is web
we're going to put in the site the name
pretty simple
and we're going to put in the domain so
just like that
streamvr.app we want to make sure that
we use the
secured uh url so that's within https
rather than the http this is actually
the way we've set up or how
typically webflow sets up the site
because it uses
a certificate so you can see here this
ssl stands out
and you can see the connection is secure
so that's the one we want to select
the industry you can you know put
anything i'm going to just put in here
entertainment reporting time zone that's
up to you we're just gonna keep it the
way it is
okay once you've created that property
the next step is to
add that code over to your site so that
google can start tracking
all the analytics now right away you get
the tracking
id and a script
that you can just simply copy over into
your custom code
but because webflow already considers
the integrations you just need to go
over to
your integrations tab and on the first
form field it's going to ask you the
universal tracking id so all you have to
do
is copy that id that you get paste it
over to your workflow
and that's pretty much it you save the
changes
and then you can publish the site so
that we can
test if that the code is if the code is
connected correctly
so i'm going to go ahead and publish
that what's going to happen is once
you've
connected the site you're going to see a
little status report here on the top
of the google tracking id section
another thing you could do
is simply go over to the home page
now that you've created that property
you'll see that over here with the
breadcrumb of the stream vr
you're gonna see a series of dashboards
where you can track
some really cool stuff so you can see
here we have
different reports you have the real time
report the audience and
acquisition and all these are can be
summarized in the home page but if you
go into each one of these
you get additional information like an
overview
the locations where they're coming from
live
live users from different from around
the world
and all this data all this analytics is
only possible with a
with a tool like this and the best thing
of course is that google analytics
is free and it's best practice to always
connect this
on every project that you are going to
work on
so that you can start tracking this data
there's a lot of advanced tools in here
that we won't be covering in this lesson
but what i want you to know is that once
you have that connected it'll be easier
for us
to start tracking additional information
all right guys
so the next and final thing that i do is
set up the google search console
okay so the google search console is
something that i always
add into a every project or this used to
be called
webmaster tools not too long ago and
they've rebranded it
but now the google search console will
help us
submit the pages that we create
on our site over to google so he
starts indexing all the pages as soon as
possible
so this is just going to help google
understand what your site has
all the sub pages and all that we need
to understand the sitemap.xml which is a
little document
that webflow creates for us so we go
over to our domain
and we type in at the end of the url
sitemap.xml
so you have the home page the playground
and the movies and the search now we
need to send that over to google
and that's where search console comes in
handy so the first thing i'm going to do
is add the property
and in the at the property there's two
ways we can do this
through domain or through url prefix
now domain what it does it so it just
crossed throughout all the site
right so even sub domains url prefix
though it's specifically
for a page section or if you have a
website where you have different domains
that you want to specifically track
you can use the url prefix so i
recommend we we go with the domain
so i'm going to put in here streamvr.app
we need to add this exact little code
into our dns provider right so if we go
over to
our dns provider in this case cloudflare
we just simply have to create
a text record and copied and paste
this code in there so i'm going to do
that right now
all right there we go so we have the
ownership verified so we click on
go to property and that will give us
some additional settings over here
in our search console so the first thing
i want to do is
just head over to our sitemaps and
right here we want to add the new
sitemap that
we got from webflow so we simply grab
the url the sitemap.xml and with along
with the url
and paste that over here
and click submit right so this will
probably take a little bit
until the actual depending on your site
size or how many urls you have created
google will automatically start
indexing those pages this does not mean
that as soon as you submit this sitemap
your site is going to start ranking on
what this does is just lets google know
that your pages exist the url exists
along with what we talked about earlier
where you have backlinks and relevant
content outbound links
i think all the spiders are going to
start collecting all your content
and indexing slowly but surely
into the google search and engine
results page
and that's exactly what we want there's
two last things that i want to mention
to you guys that our best practices when
we
have launched our site so webflow gives
us
a template called the 404 template
this template you could customize it
however you want
but ideally what we want to do is have
the page
redirect the users back home and just
give them a little warm message
telling them that the site that they're
landed it doesn't exist
but they can still return to the home
page
and or use the search tool to find what
they're looking for
so this is generally good practice to do
you want to make sure you customize this
page
maybe add a call to action that just
sends them back
to safety or sends them back home and
head over to
the hosting section
and you'll find a little category called
the 301 redirects
so this is actually really handy for
when you have those old
urls and you want to redirect them to
the new url
you want to make sure you do this every
time you've made a change to
a to a blog post or in this case
movies or games so that google when it
starts to crawl your site it doesn't
hit some errors because we've connected
the google search console
are going to start appearing in our
in our dashboard so just a heads up 301s
super important that we have those added
if we if we're changing a lot of urls
and making sure that your 404 page is
nicely customized
this has been a long journey into
one of my favorite tools right now to
create
interactive and engaging sites using
webflow
i'm really excited that you guys made it
this far can't wait to see you
on the next course where we're going to
overcome
some of the limitations that webflow
has with craft cms
Coming Soon
Access our premium community including bonus tutorials, project files & weekly resources.
LIFETIME 💎 ACCESS