🤩 Banners for All Your Markets 🔗

article-image
Unless stated otherwise, all pictures in the article are by the author.

Translating your banner advertisement into other languages can really impact the effectiveness of your marketing creatives.

In my experience, CTR rates are consistently (and often substantially) higher when ads are written in the local language instead of English. — Pauline Jakober, searchenginejournal.com

article-image
(source: https://www.searchenginejournal.com/translate-google-ads/)

In this article, we’re not only going to provide some advice on translating advertising creatives, but also show you how to make this process much more streamlined. For more tech-savvy marketers, I will show how to easily manage HTML translations of banners and how to automatically display the appropriate language version.

But first, here are few tips on how to make the process easier.

Work with trusted translators 🔗

If you are not fluent in the language you are translating into, it is better to use experienced translators. Using machine translation engines, such as Google Translate or DeepL may be tempting, but unless your advertising communication is simple, I would advise against it. Finding a good translator is a daunting task, especially bringing one into the technologically complex process of launching a digital campaign.

Therefore, preparing the right tools (more on that later) will pay off.

Track length of words 🔗

Some languages seem to require more room than others to say the same thing. You must consider the length of words and character space issues. Text in some languages requires more space than others to say the same thing. That’s why your translators have to know not only the original message of your ad, but also the character-count limit. Moreover, an often-forgotten problem is the variable character width in most fonts.

🎁 Case 🔗

Now I’m going to show you how to improve the translation and localization management of your banners. Let’s say you have a set of banners in different sizes that you would like to translate into another language. Translating every ad takes a lot of time and could be rather repetitive and boring work. Not to mention setting up and managing campaigns for individual languages.

📦 Download a sample banner

The banner adapts to the size of the advertising placement. You can test it by opening the preview.html file from the sample package.

article-image

Since the banner is size responsive, let’s make it adapt to the browser language as well. To edit text, we can use simple JavaScript:

article-image

Ok, it works. But we would still have to prepare separate files for particular languages (index_en.html, index_pl.html, index_de.html etc.)

🌐 Detect browser language 🔗

Therefore, we will first detect the language of the browser and then insert the appropriate language version (or leave the English version, in the absence of a suitable translation).

From now on, if you change the language in the browser settings to Polish, the banner will automatically display messages in this language.

🧭 Working with translations 🔗

If we now wanted to add further language versions, using professional translators, we would have to send them the texts, number of characters and other comments. After all, they will not make corrections directly in the source code 😅 But we can make their job easier by implementing a translation management system.

Firstly, we will separate the labels into a separate variable locales and make a few other changes:

Note that we’ve extracted the locales variable into a separate locales.js file. As a result, we can now use Localazy.

🚩 Localazy 🔗

Localazy is an awesome piece of software that makes the usually awful translation experience bearable and even almost pleasure. It supports many frameworks and localization file formats and provides CLI tools for build automation. My favorite features are machine suggestions for translations and automagic management of changes in translated files.

So, let’s integrate our banner with Localazy. First, create a Localazy account and install Localazy CLI. Then, create a new app.

article-image

Make sure to set the App Type to Private app. Then, select JavaScript from available file formats.

article-image

You will see a template configuration file localazy.json. Copy it to the folder with banner source code. We also need to make modifications to support one, multilingual file:

Now you can upload file into Localazy:

localazy upload
article-image

Then, go to your app dashboard in Localazy. If you put more than one language in the locales.json file, it should be automatically loaded into Localazy!

Also, if you add comments next to individual labels, they will be visible in the dashboard.

article-image


Let’s now add another language version.

article-image
article-image

Once all the translations have been accepted or created, you can download them back into the banner:

localazy download
article-image

Make a note to change the file path:

Let’s now check the German version:

article-image

Nice!

And the best part is that if Localazy allows you to work collectively on translations. This will allow translators to support work on subsequent language versions, without having to go into technical details.

article-image

📦 Download the final version of the project

✔️ Takeaways 🔗

Localization is an important part of expanding your business beyond national borders. If you plan to run ads in multiple countries, you need to provide different language versions. Using relatively simple JavaScript and Localazy, all the postulates mentioned in the first part of this article can be implemented. Localazy makes it easy to work with translators and keep an eye on the correct number of characters in texts, while JS will take care of detecting the browser language and displaying the localization.

Thank you for reading. I hope you enjoyed reading as much as I enjoyed writing this for you.

💖 You might also like 🔗

If you enjoyed reading this, you’ll probably enjoy my other articles too:

🔷 How to build a multi-language dashboard with Streamlit

🔷 Create multi-language newsletters for free using Google Sheets and Localazy

🔷 Automatic data reports in multiple languages with Python, Gettext and Localazy

📑 References 🔗

This article was originally published on DataDrivenInvestor by Rafał Rybnik