All Articles

Marketing - what you should know as a frontend developer (2020)

I’ve worked in web development for almost 5 years now. I had a chance to support different clients. They all had one thing in common. They needed marketing to promote their services, so they can earn money so they could pay us - developers - to work on their website, where they could do more marketing stuff to sell more goods to earn more money. During that time I didn’t really pay attention to what the marketing was about. However it affected my everyday work to some extent. From time to time, guys from sales and marketing departments asked us to put some snippets into HTML asap, or to display some iframe we didn’t have control over. Obviously it irritated us because we are software craftsmen so we wanted to have the code well organized, and thought through. So this was unimaginable pain to add some <script> tag into HTML head, with the tracking ID hardcoded in string, not extracted into a config file etc. But this was how it was. I couldn’t understand it. Until I started my own business.

Suddenly I realized why they wanted to do all these things, even though it introduced more chaos into the code. Marketing is full of unpredictability. You do something, you check results and you have to react quickly, before competitors do it. Besides that, as a marketer you don’t have control and power of what is going to happen. You can’t write unit tests for your marketing campaigns, because they won’t reap the same results twice. It’s a different mindset.

So here is a list of basic things that I learned about marketing that can help you, developers, understand marketing people, and make the cooperation more efficient and less painful for both sides.

By the way, this is a second article of this series. The first one was about SEO.

Table of contents

The Open Graph and what you can find in meta tags.

The Open Graph protocol enables any web page to become a rich object in a social graph.

What does it mean? It means that you can control how your website introduces itself when shared on social media. By using <meta> tags you can control what title, description and image it shows on facebook post, or messenger private message.

Actually Colin Bendell wrote a pretty nice article (he used the term “microbrowsers”) about the importance of this aspect and showed various places where you can come across these.

Screenshot showing facebook feed with the Colin Bendell's article about microbrowsers pasted in. It presents how facebook displays open graph attributes.

In the screenshot above following properties were used so you can see that they match:

<meta property="og:title" 
  name="twitter:title" 
  content="Microbrowsers are Everywhere">
<meta property="og:description" 
  name="twitter:description" 
  content="Colin Bendell gets into the minutia of microbrowsers - the small previews of your site that are pervasive all around the web and through social media apps and search engines whenever an item of content on your site is referenced.">
<meta property="og:image" 
  name="twitter:image" 
  content="https://cloud.24ways.org/2019/sharing/microbrowsers-are-everywhere.png">

Besides Open graph attributes, twitter has its own set of attributes to control the appearance of the links on tweets.

What is Pixel and what is remarketing?

Have you ever clicked on an ad, didn’t buy anything and in a couple of weeks you saw an ad of the thing you hadn’t bought? This remarketing. How does it work in detail? If we’re talking about facebook ads specifically, there’s something called facebook pixel. It is a javascript code you include on your website. Firstly, if someone visits your website, the script leaves information in cookies, so later you can target these people using facebook ads. Secondly, it is useful when you use facebook ads, and want to track what people do on your website after they have clicked the ad.

Why does it matter for front-end developers? This usually means you’re going to be asked to paste the snippet or add an option for marketing people to do so. So you may think in advance and be prepared that at some point you can either give an option to add the whole snippet or to set a facebook pixel config id field.

As we discussed topics like cookies, it inevitably leads to one important topic:

Tracking, Google Analytics, Google Tag Manager.

If you work in web development there’s almost no chance you haven’t heard the name google analytics. It is the most popular tracking and analytics tool in the world and it is very easy to set up.

Screenshot showing table of market share of different analytics tools. Most of them are from Google Screenshot taken from https://www.datanyze.com/market-share/web-analytics

In a basic setup google analytics, lets you monitor how many people visit your site, what is the bounce rate (bounce happens when someone lands on your website, and doesn’t go anywhere else, i.e. visits a single page. Bounce rate is a ratio of Total number of visitors viewing one page only / Total entries to page), and what is the usual journey of the users - from which to which page they usually go.

Tracking and privacy

But obviously you can extend it. For example by turning on ad features. This has two implications.

First is that now you’re going to see much more data about your users, like for example demographics data or their interests.

The second is that you have to inform users about the data you collect. This usually means implementing a cookie notice or a GDPR consent box. It is possible to use 3rd party tools that do it for us, but not all of them are entirely GDPR compliant. One example could be turning the advertising features only after the user has accepted the data collection using allowAdFeatures which is not always the case, and some services have this turned on by default, and do nothing whether users give or not the consent.

Custom events

Another useful thing you can do with google analytics is using custom events. One example might be the “reveal phone number” feature that some online marketplace services have in order to track how many people were interested in a specific advertisement.

an advertisement showing phone number that is masked with asterisks and that requires you to click on it to reveal it. I’m not saying that this service uses google analytics to do it. They have their own API. I’m just giving an example of how the custom events could be used.

Another example of custom events usage, could be checking how many people use specific features in your app. If it turns out that very few or none, it may be better to remove the feature, to reduce complexity in code.

Google Tag Manager

Custom events for google analytics require some programming skills to put event calls in the right place.

ga('send', 'event', 'Ads', 'showPhoneNumber', '<id>');
// or
ga('send', {
  hitType: 'event',
  eventCategory: Ads,
  eventAction: 'showPhoneNumber',
  eventLabel: adId
});

Google Tag Manager is a tool that allows you to do things like that through UI, injecting it into the website without coding it. And it’s not limited to Google Analytics only. There’s a whole bunch of other tags you could use.

The downside for some people though may be that you no longer keep events and services in source control.

UTM - inbound traffic tracking

One part of google analytics dashboard is acquisition report. It allows you to check how people usually get to your website. There are some default values that are set like page referral. But they are not always consistent. Or you simply may prefer to be more specific.

part of the google analytics UI showing multiple inbound traffic sources, even though all of them are from facebook

Sometimes it is even not possible to know the referral because the user is not using a browser, but an email client. How can you track how many people reach your website by clicking the link on the newsletter? To address this issue, you could use UTM codes. For example when you send your website’s address in a newsletter message you can append query parameters to it:

https://website.com?utm_campaign=summer-sale&utm_medium=email&utm_source=newsletter

and then in google analytics dashboard you will be able to see how many people opened the website by clicking this specific link.

Newsletters and email automation

So as you can see newsletters and email marketing are also a big part of the marketers’ toolkit. What does it mean to you as a software developer? Two things, integrating email automation flow, and implementing the designs of the actual email messages.

Email automation flow

At the beginning it’s worth mentioning that the area of email marketing is well covered by SaaS tools like Mailchimp or GetResponse. What can you use them for? Sending specific sets of emails targeted to specific audience groups. For example you wrote a new article, so you want to notify people so they won’t overlook it. Or you’re going to have a 20% discount starting next week. Or you can just simply want to say hello to new subscribers, and give them some free stuff to strengthen the relationship even further.

But this is the easy part. You write an email, select which group you want to send the message to, and fire away. The real question is how you can get the audience. You create an input field on the website where viewers can leave their email address. But there is more to it.

For instance, you can have multiple such inputs on the website, because of different reasons. One is a general purpose newsletter. Something like “Subscribe to our newsletters to get updates and news about our offer”. The other example is “Sign up for the newsletter to get a 20% discount for Christmas presents”. But you may also have some educational resources you would like to share in exchange for the email address, e.g. “Put your email here and get our free E-book on how to set up email automation tools”. Each newsletter is going to tag the audience differently, e.g. “e-book”, “christmas-discount”, “landing-page”, etc. Also, each of them is going to incorporate different flows. You need to send a confirmation email to prevent other people signing you up on your behalf, you need a captcha to prevent spammers from trying to deplete your quotas (e.g. 5000 subscribers a month for 30$). Christmas discount newsletter needs to send the coupon code, e-book newsletter needs to send the link to the ebook etc.

flow diagram of how could email automation flow could look like. Different flows for christmas campaign, different flows for free ebook campaign.

This can become really complex, but the good thing is that the aforementioned tools can do a lot for you, even suggesting things you would never think of. But sometimes the integration of the flow may require additional work in the code, the example being the “thank you” page. So it’s good to know that things like this may happen.

Email template design

Writing a CSS for emails can be a nightmare, because there are plenty of email clients, and each of them has their own capabilities. Luckily there are tools that mitigate the problem. You can for example write emails in a markup that makes sense to developers and it will convert them into HTML and inline CSS that makes sense for email clients. You can hear more about challenges related to emails in this Syntax podcast episode. This is useful when you have to write email templates related to your software like “reset password” or “new message in your inbox” and you don’t use any email automation tools.

For marketing/newsletter emails it would be much easier to choose SaaS tools like Freshmail that take care of compatibility issues, and you just pick a template or create one using GUI editor.

Conclusion

Software developers don’t need to be marketing experts. But web marketing is a huge field that is closely related to web development. It can be useful for both sides to know something about the other side’s work. I believe it can be beneficial for front-developers to learn about Open graph, or Google Tag Manager, understand tracking and email automation. Especially if they plan to open their own business or work on a personal brand.