How to track a newsletter signup

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.

Find 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 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.

   

   When you see the event stg.formSubmit, then you know you can use the form submissiontrigger. 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.

7. Click the logged element and navigate to Variables.

   

8. 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">

Set 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. Navigate to Tags.
3. Click Add a tag.
4. Name the tag and select the following type: Custom event.
5. Click Next.
6. 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.
7. Set action as Newsletter. You can use another label for an action depending on the framework you use for organizing events in your reports.
8. 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.

   

9. When you’re 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. Go to Menu > Tag Manager.
2. Navigate to Tags.
3. Click on the tag you want to work with.
4. In Tag triggers, click Add a trigger.
5. Name the trigger.
6. In Event type, choose the following type: Form submission.
7. Click Next.
8. In Event conditions, define conditions for the trigger. 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".

   

9. When you’re done, click Save.

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. Go to Menu > Tag Manager.
2. Navigate to Tags.
3. Click on the tag you want to work with.
4. In Tag triggers, click Add a trigger.
5. Name the trigger.
6. In Event type, select the following type: Click.
7. Click Next.
8. In Event conditions, define conditions for the trigger. 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.

   

9. When you’re done, click Save.

Check 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. Click Debug in the upper right corner.
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.

View 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 custom event report under Menu > Analytics > Reports > Custom 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:

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!