Chapter 08

How to Track a Newsletter Signup

By Anna Tomalik

Now that you have contact form tracking under your belt, you can use these skills to record newsletter signups. Obviously, people who subscribe to your newsletter appear on the email list in your MailChimp, Aweber, Feedburner, or other email marketing account. But if you want to collect data about visitors who clicked the subscribe button and see it in Analytics, you can use Tag Manager and a custom event tag. In this chapter, we’ll show you how.

About newsletter signup forms

The newsletter signup forms are similar to contact forms. When you peek into the code, you will usually find the <form> </form> construction with form and button CSS attributes. Thanks to that, you can use the form submission trigger to capture the moment when visitors subscribe to your newsletter.

In cases when the newsletter signup is configured differently, you can use our old friend the click trigger.

Finding the CSS attribute of the newsletter signup

To get ourselves ready for defining a tag and trigger, we need to collect some information about our newsletter signup form. Like in the previous chapter, we’ll use debug mode. First, to check if we are working with a type=submit attribute, and second, to pull out CSS attributes that will pinpoint the form we want to track. Remember, when we’re dealing with CSS attributes for buttons or forms, we need to double-check that we’re tracking the exact elements we want to. Sometimes it happens that all buttons or forms have identical attributes.

To find the CSS attribute of the newsletter signup form using debug mode, follow these steps:

  1. Open your website in debug mode. For example, our link is https://clearbank/contact/?_stg_debug.
  2. Go to the page with the newsletter form.
  3. Toggle the Prevent page reload option. This will freeze the page so that when you click a subscribe button a new page won’t open.
  4. Navigate to Events log.
  5. Click the subscribe button.
  6. If the Tag Manager spotted the submit type of a CSS attribute, you will see an event stg.formSubmit. If not, you will see an event titled stg.click.
  7. When you see the event stg.formSubmit, then you know you can use the form submission trigger. If you don’t, you need to find the click class for this element and use the click trigger. In both cases, we’ll dig deeper to find CSS elements.

  8. Click the logged element and navigate to Variables.
  9. In Variables, you will see many types of information that the Tag Manager can capture for this element. Among them you can find form ID and form name, which can be used for defining the form in the submit form trigger. Here you will also find click class, which can be used for the click trigger.

Just to give you a different perspective, if we look for the code using an inspector for a website browser, it will appear as follows: 

<form class="et_pb_contact_form clearfix" method="post" action="https://clearbank/blog/" id="newsletter" name="blog_newsletter">.

Setting up newsletter signup tracking in Tag Manager

When you know the type of your newsletter signup form, you can create and define the tag and trigger.

To set up a tag for tracking newsletter signup, follow these steps:

  1. Go to Menu > Tag Manager.
  2. In the left-side menu click Create new tag.
  3. Name the tag.
  4. Select Piwik PRO Custom Event tag template and click Save.
  5. Set category as Content blog. You can use another name depending on the framework you use for organizing events in your reports. We’ve decided that we want to track newsletter signups under this category because subscriptions happen on the blog. But you could also have it under Form submission category or any other of your choosing.
  6. Set action as Newsletter. You can use another label for an action depending on the framework you use for organizing events in your reports.
  7. Set name as {{ Page Path }} or {{ Page URL }} variable. This way Tag Manager will pull out information about the page where the form was submitted.
  8. When done, click Save.

Now, like in the chapter about the contact forms, we’ll show you two ways of setting up triggers — one with a form submission trigger, the other with a click trigger.

To set up a form submission trigger, follow these steps:

  1. Open a created tag for tracking a form submission and scroll down until you see Tag triggers.
  2. Click New trigger.
  3. Name the trigger.
  4. Select the Form submission event type for the trigger (on small-size screens click the drop-down menu).
  5. In Trigger conditions, set the condition for the tag to fire. For our example, we’ll use the condition Form ID equals newsletter. This way we’re making sure that this tag will fire only for the form with form id="newsletter".
  6. When done, click Save for the trigger and click Save for the tag.

Now we’ll try the second approach in defining triggers — the click trigger.

To set up a click trigger for tracking a newsletter signup, follow these steps:

  1. Open a created tag for tracking a form submission and scroll down until you see Tag triggers.
  2. Click New trigger.
  3. Name the trigger.
  4. Select the Click event type for the trigger (on small-size screens click the drop-down menu).
  5. In Trigger conditions, set the condition for the tag to fire. For our example, we’ll use two conditions Click classes equals et_pb_contact_submit et_pb_button and Page URL contains https://clearbank/blog/. This way we’re making sure that this tag will fire for buttons with this class and only on blog pages.
  6. When done, click Save for the trigger and click Save for the tag.

Checking the setup in debug mode

With our tags and triggers ready, we can test if they work properly in debug mode in Tag Manager.

To use debug mode, follow these steps:

  1. Go to Menu > Tag Manager.
  2. In the top-right corner click Debug.
  3. Your website will open in a new tab with debug mode running.
  4. Go to the page with newsletter signup.
  5. Toggle the Prevent page reload option. This will freeze the page so that when you click the subscribe button a new page won’t open.
  6. Click the subscribe button and see if the tag was fired.
  7. When you’re happy with how the tag works, go back to Tag Manager and publish the tag.

Viewing newsletter signups in a report

As soon as you publish the tag, Tag Manager will start collecting data about newsletter signups. After a while, you will be able to see the data in the event report (Menu > Analytics > Actions > Events). As with the tags from previous chapters, the data will appear according to the framework you use for labeling the category, action, and name of an event. In our example, the report will look as follows:

When we look at this report from an event name perspective, we’ll see a newsletter signup event among other events that we’re tracking for this page.

The newsletter signup is our last example of event-based tracking covered in this guide. With the knowledge you’ve gained you’re ready to track button clicks, logo, menu and footer items, measure page scrolling, and record data about form submissions. We hope that by now you can take the leap on your own to set up tracking of elements on your site. Remember to use a custom event tag or custom asynchronous tag template and a page view, click, form submission, or scroll trigger event. In the next chapters we’ll tell you more about how to see several websites together in a single view, set up goals, click paths, and funnels, and read the visitor log report. Stay tuned and keep reading. Bon voyage!