DEV Community: Matthias Kupperschmidt

Track Google Form Views with GA4 & Marketing Pixels

Matthias Kupperschmidt — Sat, 15 Apr 2023 08:25:48 +0000

Do you want to know how many visitors visit your Google Form? - In this tutorial I explain how to use Google Analytics to track visits to a Google Form to measure engagement and form views. After that, we'll learn how to use the visits for Google Ads campaigns.

I'll also show how, using the same principle, you can implement other Tracking Pixels from Facebook, Linkedin or Twitter on the form to target visitors through Retargeting Campaigns, for example.

As a Google Analytics consultant I have set up tracking for Google forms quite a few times. So I will explain you why it is smart to track your form with additional tracking tools and what the advantages are.

Why is it important to track Google Form attendance with GA4?

Google Forms are an attractive solution to create online forms for websites. By March 2023, Google Forms is used by 0.26% of websites across the Internet as a solution for feedback forms. Popular websites using Google Forms include washingtonpost.com, techcrunch.com, and usatoday.com.

Why?

The advantages of Google Forms are:

Free with no limits
Forms can be created quickly and easily in minutes
Free upload feature
Many templates available
Compatible with desktop and mobile devices
Instant access to entered data in Google Sheets

Tracking the individual views of a Google Form with Google Analytics or Marketing Pixels from Facebook, Linkedin or Twitter is not possible without overcoming a few technical hurdles.

Yet it is worth it!

Tracking individual page views of Google forms has compelling advantages:

In Google Analytics 4, you can link your conversions to your Google Ads account, for example, to run retargeting campaigns. This means that if you configure the form visit as a conversion (!), the visitors will be added to a Google Ads segement for campaigns. Thus, you can later show promotional offers to the visitors. So, for marketing purposes, the visitors of the form are completely available.
You get to know how many visitors visit the form. If you subtract the number of completed forms from the visits, you know the potential of the campaign. GA4 engagement tracking additionally tells you how much time visitors spend on the form - which helps to improve the form in case visitors spend too much time filling it out.
By tracking with Facebook or the Linkedin tracking pixel, you can learn more about the interests or demographics of your visitors, thereby improving communication with your customer segments.

So if you combine the general advantages of Google Forms with the benefits of tracking with Marketing Pixels, Google Forms becomes a super efficient & free solution for digital campaigns with contact forms!

How to Track Google Form Visits with GA4

View Tracking for Google Forms in GA is achieved by embedding the Google Form Iframe together with the Google Analytics Tracking Code on the same page.

Since Google Analytics tracks every load of the website as a page view and the page contains the form, the views to the form can thus be tracked as well without having direct access to the form's code.

Simple, right?

Let me explain how you do this exactly, whether you have your own website or not.

Measure attendance of Google Forms through embedding

First of all, you should always embed Google Forms in a webpage, as this will allow you to insert your own Google Analytics tracking code into the page to measure the number of visitors to the form.
I repeat: you should not send the direct link to the Google Form to your users.

If you use the Google form embed code on your own website and also add your Google Analytics snippet, every visit to the form will be recorded as a page view in Google Analytics.
This gives you the advantage of being able to track the form attendance.

In addition, you can now also implement Tracking Pixel for Google Ads, Facebook, Twitter or Linkedin on the page - which would not be possible otherwise.

Don't have a website where you can embed the Google Form? That's no problem. You can create a hosted HTML page in seconds and embed the Google form in it.

For example, use the Basic Website starter from glitch.com, Github Pages or simply upload your HTML file to Netlify. Below I give an example of Glitch and Netlify.

1. Embedded Google Form with GA tracking on custom website

First, copy the embed code for your Google Form.

2. Create a single custom web page

If you already have your own website, create a new page with any address path and add the embed code.
If you don't have your own website, follow one of the examples below.

First create an empty HTML page with a default boilerplate code and add the Google Form snippet and the Google Analytics tracking code. Then upload the file to a web host.

Glitch Example

Start a new web page with the Basic Website Starter from glitch.com and add the embed code for the Google Form at the top of the <body>. Delete the rest of the code in the body tag.

Add Google Analytics 4 Snippet: Now add the Google Analytics snippet.

Alternatively, you could also add a GTM container snippet with a GA4 page view tag enabled.

Copy the new link to your Google Form: Next copy the link to your glitch page.

Under Preview -> Preview in a new Window you get the created page opened in a new browser tab. From now on use this link to invite visitors to your form.

Netlify Drop Beispiel

Create a HTML page from a boilerplate template and add the copied embed code of the Google Form to the <body>. Then save the file as index.html in an empty folder.
Visit Netlify.com and log in with your preferred login service.
After that, go visit Netlify Drop and drag the folder with the index.html file into the drag & drop area.

3. Test if everything works

To test GA4 tracking you can simply visit the real-time report. On the events widget you can click the page_view event and then select the page_location parameter. This will show you all web addresses of the last minutes.

There you should see the URL to the page with the Google Form.

Analysis of form views in GA4

GA4 tracks engagement metrics like average engagement time by default.

When the form is called, the engagement tracking starts automatically, so you can look at the average engagement time (time tracking) of the visitors with the form later in Google Analytics.

To create a time tracking report you then build e.g. an Exploration Report with the values User Engagement and as dimension for the rows the Page Path.

Also add views to the values to show the total number of form visits (form attendance).

Track Google Form Visits with the Facebook Pixel and other Marketing Pixels (Twitter, Linkedin etc.)

Also, you can insert all sorts of marketing tracking pixels on the page as well. See here an example for the Facebook Pixel. The FB snippet is simply inserted after the GA4 snippet.

After you have implemented the Facebook, Twitter, Pinterest, Linkedin or any other pixel, you need to test if the implementation worked.

The easiest solution is to log in to the respective platform of the marketing pixel. After 24 hours at the latest you should see traffic there.

If you don't want to wait that long, there are extensions for most tracking pixel browsers that show information about the pixel when it is working.

For Facebook there is the Meta Pixel Helper.

After the extension is installed in the browser and we call the Google Form with the implemented FB Pixel, the Pixel Helper confirms that the tracking is working.

There are also similar Pixel Helper extensions for Linkedin and Twitter to check the functionality of the pixel.

Conclusion

I hope I could convince you of the importance of embedding the forms, so that you take the extra effort in the future instead of sharing the direct link.

Especially for YouTube or email campaigns, this way of quickly creating a landing page that is visually the same but offers many advantages in terms of marketing is a good idea.

We also looked at how to co-implement other tracking tools on Google Forms so that you have more metrics available for data analysis 😎.

References
Twitter post
Facebook post
Mastodon post
Patreon post

How to outline a blog post fast

Matthias Kupperschmidt — Tue, 15 Dec 2020 19:42:35 +0000

To write a blog post outline you need to determine all relevant subtopics that cover your main-topic thoroughly.

For each subtopic you then note down a headline until all important aspects for your target audience are covered. So the outline structure will only contain headlines.

This is an example of a draft outline:

If you like though, add a few content notes for a paragraph neatly indented under a heading with bullet points to give each section more depth:

But there is still one step missing during this process.

Keep search engine optimization in mind

You probably want your article to rank for a certain target keyword that is close to your main topic.
Headlines are critical for search engines to understand what a blog post is about.

So when writing headlines during your outlining process, you want to strike a balance between making them engaging and descriptive, so search engines understand them and deem the topic relevant to the article.

If you neglect this step you risk not showing up in your keywords' search results at all.

But how can you make a high quality, topically relevant blog post that is SEO friendly without spending too much time?

Write a Great Blogging Outline very fast

A nifty way to determine what information to include in your blog outline is looking at the subtopics of articles that are already ranking for your keyword.

Following this approach, you save time planning subtopics and researching which to include in the article. Plus, you leverage your competitors header optimization.

If those competing articles are ranking at the top, clearly they must be doing something right about their headlines, so it makes sense to leverage their optimization.

Step-by-step the process goes like this:

Search for your target keyword
Open the best ranking results
Compare their subheading structure with each other
Draft your blog outline based on their headings
Give it your personal twist and add value with your own ideas

If you compare the subheaders side-by-side in Google Sheets or Excel, you can scan them at once and determine:

common subtopics across all blog posts
special topics that are only covered few times

The general rule to follow is, take what's commonly covered by others and choose from the special topics if you consider them to be valuable.

This is how it looks like when you put all headlines of the top-ranking blog posts for the keyword “best backlink tool” next to each other for comparison:

You see how much more structured this approach is, than visiting each piece of content yourself (and maybe getting distracted by videos, images and advertising 😂)?

Create summarizing headings

To create your own article outline, tint subheaders that cover the same information with one color and work your way through all of them.

At the end, the colors represent potential topics for the blog content and you can simply add a heading to as a section to your draft by choosing from the same color together.

This is how it looks like when I'm putting it together:

So by scraping the headings from the top of the search results and comparing them in a spreadsheet, you can:

plan your blog post outline FAST
make sure you cover the most important subtopics
ensure headlines are topically relevant (SEO)
find opportunities for insights others don't cover yet (since you now have an easy overview)

This is all great - except it’s a pain to manually extract subheadlines from the top search results and put them in a spreadsheet.

Since I started freelance consulting with Blue River Mountains, I automated as much as I could, since it is one of the few ways to scale as a freelancer.

That’s why I automated the process and below I’m sharing my head ripper tool with you so you can extract all subheaders in just seconds.

Competitor headline extractor tool for batch-analysis in Google sheets

Here is the link to the head ripper tool.

The tool runs in Google Colab, so let me quickly show you how it works:

This is what you need to run it:

Google account
URL's of competing pages

Step-by-Step guide to run the Python script

First, go to the head ripper tool in Google Colab and Save a copy in Drive.
Execute the first code block by pressing the play button.
Click the link in the output to get the authentication key, then paste it into the empty field and press enter. This allows Google Colab to create a Google sheet.
Search for your target keyword on Google, then copy and paste the URLs of the search result pages into the form.
Give the Google Sheet a name.
Execute the second code block by pressing the play button.
Execute the third code block by pressing the play button.
Done. Go to Google Sheets and open your newly created sheet holding all of your competitor's headlines.

Nice. Now that you have all blog sections in a spreadsheet, you can easily find commonalities and start building your own outline.

Afterwards you can get into the details and start the actual writing process.

How many subtopics should you include in the content for SEO

Group the sections of your competitors by tinting them with a color in the Google sheet. Once you did that with all of them, you know what they most-commonly talk about.

Then add the most common blocks to your own content outline to create the basic structure.

To exceed competing content, add 1-2 additional subtopics that you find relevant to add.

But how can I find additional relevant points that nobody is talking about yet?

Simpletools.io. helps you find related questions to your keyword. Answer them the ones you deem most relevant to your visitor.

Another method is to look at what Google deems highly relevant to your topic. StreamSuggest scrapes all auto-suggest keywords for you and enters each one into another Google search to scrape all of their keyword suggestions again. You get all related auto-suggestions in seconds.

Let’s wrap this up.

Takeaway

Let's take a step back a second, ignore the tool and dissect all important details to learn what the key message is.

You can achieve topical relevance often by just analyzing the sections (H1, H2, H3...) of top-ranking search result pages.
My tool allows you to scan and create a content outline fast, because you get all important subsections distraction-free to start your analysis by grouping and selecting them.
To exceed competitors blog posts, add 1-2 additional points based on your own expert advice, e.g. answer a relevant question from your personal perspective or explain another point that Google finds relevant.

That's it. Let me know on Twitter if you liked this and if it helped you to plan SEO-friendly content. ✌️

How to log all JavaScript events to the console for debugging

Matthias Kupperschmidt — Fri, 25 Sep 2020 10:57:29 +0000

Let's look at how to debug all JavaScript events and log them to the console with a nifty trick.

It's for example important when debugging a web page to see how many submit events a form element sends out.

With this debugging method you prevent sending and tracking browser events multiple times.

Listen for all events in JavaScript

There is a handy API in Chrome developer tools that makes this easy.

The monitorEvents API allows you to log any occuring JavaScript event to the console in Chrome. You just have to give it an element and optionally the event you want to listen to:

monitorEvents(element[,event])

If you want to stop listening for events again, you simply use:

unmonitorEvents(element[,event])

Example: Log all click events of the window object to the console

Now with this helpful debugging tool in our toolbox, we can for example select a form element in Chrome developer tools to start monitoring submit events.

After you select the element in the elements tab, Chrome Dev Tools will show a little $0 sign next to it.

If you keep the HTML-Element selected, you can now use the $0 to quickly reference the element in the console - without needing a CSS selector. Now together with the monitorEvents API you can quickly and easily listen to all ongoing JavaScript events and print them to the console for debugging:

This is helpful for all kinds of event tracking because you can debug every JavaScript event in the console without having to run the GTM Debugger.

So there you have it. By using Chrome Dev Tools' API, it is the quickest way to monitor all JavaScript events that I know of.

Let me know on Twitter if it worked for you and if you liked this. ✌️