How to hide the newsletter sign-up for existing subscribers with Google Optimize

It is unbelievable how good newsletter subscribers convert in an online shop when coming from a newsletter campaign. They keep those subscribers up to date on the latest offers and products, thus making them highly engaged with the brand.

No wonder it has become a common best practice to convince users of submitting their email address as a first touchpoint.

But what if the user has already subscribed? 

There would be no point in asking for the email address again. Instead the user’s focus should be led to other items on your website. In order to do so either the sign-up section could be removed or the space of that section could be replaced with other elements, which could be more valuable for users as well as for those running the website. 

For this purpose, we have to keep track of who entered the website via newsletters. When a user clicks a button or an image within the email which links to the website, Google Analytics can track the corresponding source. To avoid (not set) in Google Analytics, we have to tell the system that the user is coming from a newsletter. Due to analytical reasons, we’re using UTM parameters.

What are UTM parameters?

UTM parameters allow campaign-specific tracking which helps measuring marketing campaigns and getting insights for conversion rate optimization. You cannot only check how many users entered a specific page but also which image or button made the deal to be clicked.

Example: https://jonas-bayer.com/?utm_source=newsletter&utm_medium=email&utm_campaign=blogpost-hide-newsletter

The table below delivers an example on how to appropriately put UTM parameters to use.

UTM Tags

utm_sourceSource where the user is coming from. E.g., search engine, social media, newsletter
utm_mediumAd and marketing medium. E.g. CPC, organic, email
utm_campaignSpecific campaign name to analyze the performance
utm_contentSet parameters to keep track of which element in the newsletter was clicked, e.g. when a button and an image in the newsletter link to the same page
utm_termtrack paid ad campaigns (not necessary for now)
#utm-table {border: 2px dashed #29335c; padding: 15px 10px;} #utm-table td {border-bottom: 1px solid gray;} #utm-table tr td:nth-child(0n+1) {border-right: 1px solid gray;} #utm-table tr td:nth-child(even) {padding-left: 3px;} #utm-table tr:last-child td {border-bottom: none;}

In our case, besides Google Analytics, the website itself needs to know where the user came from as well. If the user entered the website via newsletter, this should be remembered for the future.

Since working on the website code tends to be a little tricky, we are using Google Tag Manager for that.

Google Tag Manager Custom HTML Tag to find utm-parameters and set localStorage

First of all, create a Custom HTML Tag in Google Tag Manager. The JavaScript code within the script-Tag searches the URL for the UTM parameters. In our case, we are looking for utm_source=newsletter and utm_medium=email. If the URL contains a value for either one or both of them, the code saves the value to sourceValueFound and mediumValueFound.


var url = window.location.href;
var keyToFindSource = 'utm_source';
var keyToFindMedium = 'utm_medium';

if (url.indexOf(keyToFindSource + '=') > -1) {
    var sourceValueFound = url.substr(url.indexOf(keyToFindSource + '=') + keyToFindSource.length + 1).split('&')[0];
}
if (url.indexOf(keyToFindMedium + '=') > -1) {
    var mediumValueFound = url.substr(url.indexOf(keyToFindMedium + '=') + keyToFindMedium.length + 1).split('&')[0];
}

if (sourceValueFound == "newsletter" && mediumValueFound == "email") {
    localStorage.setItem("newsletter", true);
}

If utm_source=newsletter and medium=email are set, the tag adds the key-value pair newsletter: true to the LocalStorage. The LocalStorage is persistent (similar to cookies); this means the information that the user came via newsletter to the website will still exist in further sessions in a few days or even weeks.

localStorage newsletter true
Google Tag Manager All Pages Trigger

We don’t know via which links users will come from and which pages are linked from newsletters in the future. Therefore, we set the trigger for the custom HTML tag to All Pages.

Personalization with Google Optimize

Besides A/B tests, Google Optimize provides the option of showing personalized website variants for different target groups permanently. Depending on the users interest or behavior, the website can be displayed slightly different. The variants tends to fit better for the individual user and they might interact better with the website.

How can I hide the newsletter section with Google Optimize?

Create a new Personalization in Google Optimize

Select Personalization in Google Optimize

Click on Make Site Changes and create a new variant. Search for the section you would like to hide or replace.

In the shown case, the newsletter section is called #section-108-109. In this section, we don’t want to add any other items or content, but replace it for design reasons with an orange line, which will divide the content above from the footer.

Before:

newsletter section to be personalized

After:

personalized newsletter section

Select #section-108-109 and click edit element in the bottom right corner.

Newsletter section code before personalization with Google Optimize

  Replace the existing code with the new one or just delete it.

Newsletter section code after personalization with Google Optimize

It is important to apply this change to any other page that contains the same newsletter section. That’s why we have to change URL matches to URL starts with the URL of our website.

Google Optimize page targeting

In the audience targeting section, we have to select only users who have newsletter: true set in the LocalStorage. To get the value from the LocalStorage, we select Custom JavaScript under rule type. This snippet gets the value from the LocalStorage.

Configure JavaScript function in Google Optimize to target subscribed users

function() {
    var newsletter = localStorage.getItem('newsletter');
    return newsletter;
}

If this value equals true (remember we have set this value to the LocalStorage before), the new variant we have created previously should be displayed for website users.

Targeting: localStorage - Newsletter equals true

Before going live, we have to check if everything works fine. Turn on the debug mode under Site Changes > Preview.

Check with Google Optimize Debugging Mode if personalization is running

Voilà, everything seems to be fine!

How to analyze the performance of personalization

It could be possible that users interact better with the personalized variant, or maybe the control variant works better for them, but as long as we don’t check it, we don’t get any insights which variant of the website performs better. But digital analysts and online marketers really rely on this information!

Go to your Google Analytics account to create a segment to compare the performance of both variants.

Get the Experiment ID from Google Optimize and paste it in Google Analytics.

Google Analytics: Create Newsletter Segment with Experiment ID

If this doesn’t work for whatever reason, there’s a second way to reach the goal: Set Event Category to Google Optimize and use the experiment ID as Event Action.

Google Analytics: Create Newsletter Segment with Event Category and Event Action
Google Analytics: All Users and Newsletter Segment Overview

Now we are ready to compare the variants and check if users who have entered the site via a newsletter campaign really have higher engagement and higher conversion rates!

Leave a Reply

Your email address will not be published. Required fields are marked *

linkedin-squarexing-square