🤩 Banners for All Your Markets
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(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.
The banner adapts to the size of the advertising placement. You can test it by opening the preview.html file from the sample package.
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:
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.
Make sure to set the App Type to Private app. Then, select JavaScript from available file formats.
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 uploadThen, 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.
Let’s now add another language version.
Once all the translations have been accepted or created, you can download them back into the banner:
localazy downloadMake a note to change the file path:
Let’s now check the German version:
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.
📦 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
This is a companion discussion topic for the original entry at https://localazy.com/blog/how-to-localize-banner-ad-campaign