Tutorial: How to make Multilanguage Landing Pages (7)
Today I want to show you how to make multi language landing pages that auto translate based on the browser language.
I don´t use it for all of my LPs but it can be really helpful when you run offers/verticals in many different geos with different languages.
As an example landing page I use the Fin Survey LP that I already shared before.
Reason is that the landing page is pretty simple and it´s easy to make it multilanguage.
The process itself works with any other landing page too but the more complicated the LP the more complicated it is to make it multi language.
Probably there are also other ways to do it but for me it works very good the way I do it.
You need 2 files: The index.html with the landing page code and you also need a Javascript file with the translations, in this case I just call it translates.js.
Put the translations.js in the same directory as the index.html, open the index.html in your editor and put this code in the head section to call the translates.js file
Code:
<script type="text/javascript" src="translates.js"></script>
In the example landing page there are 6 text lines so I had to give them 6 different IDs.
I wanted to keep it as simple as possible so I just used step1-step6 for it.
To attach the IDs to the text just create a separate div tag for each text line and put it in the code instead of the text..
That´s all we have to do in the index.html, let´s continue with the translations file.
In the bottom part of the file is a script to identify the browser language, you don´t need to change anything there
Below the script is the part where you "connect" the div IDs from the index.html to the text in the translations.js.
The first parameter there is the ID you used in the index.html, the second parameter is the ID you use for the text in the translation file.
In this case it´s easy because I used the same label for both IDs, step1 in the index.html = step1 in the translations.js.
If you want to use other IDs in the index.html you need to change it in the translations.js as well.
Let´s say you want to use more meaningful IDs like "headline", then you could change it like this:
Create a div tag in the index.html for the headline
The rename the IDs in the translations.js
In my translations.js I set English as default language, if you want to change the default language to something else you can do it here
This little bit code basically says "When there´s no translation for the browser language I use English" or whatever you put there.
In the upper part of the translations file there are the translations itself.
Same as for the index.html we use one ID per text line.
The first translation is in English because that´s the default language I use.
To add translations to the file we use this format:
Code:
LANGUAGE_CODE: {
ID1: "text",
ID2: "text",
ID3: "text",
}
,
In this example the language block for English is
Code:
en: {
step1: "ONLY TODAY",
step2: "Do you want to earn $1100 per day online?",
step3: "Answer 7 quick questions to qualify!",
step4: "Attention:",
step5: "Offer only valid for",
step6: "CLICK HERE",
}
,
This would be for Spanish
Code:
es: {
step1: "SOLO HOY",
step2: "¿Quieres ganar $1100 por día en línea?",
step3: "¡Responda 7 preguntas rápidas para calificar!",
step4: "Atención:",
step5: "Oferta solo válida para",
step6: "HAGA CLIC AQUÍ",
}
,
I only use such multilanguage landing pages for simple landing pages without much text.
No long sentences, only short phrases.
For such texts you don´t need expensive translation services, for short phrases Google translate is absolutely ok.
One issue however can be that few language codes are not that self-explaining so that you easily get the translation from G-Translate but then don´t know what language code to use in the translations file.
What I just do then is that I change the language in my browser to the language I want to add, put it as first language to use in the browser, then I go to THIS WEBSITE and check what the code for the language is.
For example when I want to add Swedish to the translation file I add Swedish to my browser and put it in first place
Then I visit the website I mentioned above to get the language code
You only need the first part, in this case "sv".
Then add the translation as shown above.
When you want to translate more languages it can take some time to do it one by one with Google Translate.
In this case I use THIS WEBSITE.
There you can translate text to 9 different languages at once, with a paid account you can even translate to 50 languages at once.
I have landing pages that translate to more than 40 different languages, there it´s definitely helpful when you don´t have to do it all one by one.
You see, making multi language landing pages is not hard at all but it can be a huge timesaver when you run similar campaigns in many different geos.
Last but not least here is the landing page so that you can follow directly what I did there: DOWNLOAD
thanks for the info, very helpful 
Thanks @twinaxe
Here is a version of the same script, which does not use jQuery. So no need to wait for jQuery to be loaded for the replacement to be performed.
To put at the end of the script before the closing body tag.
Code:
(function(d, n){
var langBrowser = n.language || (n.languages && n.languages[0]),
param = langs[langBrowser];
if (param == undefined && langBrowser && langBrowser.length > 0) {
var parsedLang = langBrowser.slice(0, 2);
if (langs[parsedLang]) {
param = langs[parsedLang];
}
}
if (param == undefined) {
param = langs["en"];
}
d.querySelector('#step1').innerHTML = param.step1;
d.querySelector('#step2').innerHTML = param.step2;
d.querySelector('#step3').innerHTML = param.step3;
d.querySelector('#step4').innerHTML = param.step4;
d.querySelector('#step5').innerHTML = param.step5;
d.querySelector('#step6').innerHTML = param.step6;
})(document, navigator);
Thank you for this. Is there any way to do it with the <title></title> tag?
Originally Posted by jmor21
Code:
document.querySelector('title').innerHTML = "Of course you can do it with the <title></title> tag";
For those looking to change the title tag through JavaScript, I incorporated jeremie's code, added a 'title' parameter, and added the translated title to each of the languages:
Code:
<script>
var langs = {
en: {
step1: "ONLY TODAY",
step2: "Do you want to earn $1103 per day online?",
step3: "Answer 7 quick questions to qualify!",
step4: "Attention:",
step5: "Offer only valid for",
step6: "CLICK HERE",
title: "Congratulations!",
},
es: {
step1: "SOLO HOY",
step2: "¿Quieres ganar $1103 por día en línea?",
step3: "¡Responda 7 preguntas rápidas para calificar!",
step4: "Atención:",
step5: "Oferta solo válida para",
step6: "HAGA CLIC AQUÍ",
title: "¡Felicidades!",
},
pt: {
step1: "SOMENTE HOJE",
step2: "Você quer ganhar $1103 por dia online?",
step3: "Responda 7 perguntas rápidas para se qualificar!",
step4: "Atenção:",
step5: "Oferta válida apenas para",
step6: "CLIQUE AQUI",
title: "Parabéns!",
},
id: {
step1: "HANYA HARI INI",
step2: "Apakah Anda ingin menghasilkan $1103 per hari secara online?",
step3: "Jawab 7 pertanyaan singkat untuk memenuhi syarat!",
step4: "Perhatian:",
step5: "Penawaran hanya berlaku untuk",
step6: "KLIK DISINI",
title: "Selamat!",
},
th: {
step1: "เฉพาะวันนี้",
step2: "คุณต้องการสร้างรายได้ $1103 ต่อวันทางออนไลน์หรือไม่?",
step3: "ตอบคำถามสั้น ๆ 7 ข้อเพื่อรับสิทธิ์!",
step4: "ความสนใจ:",
step5: "ข้อเสนอนี้ใช้ได้สำหรับ",
step6: "คลิกที่นี่",
title: "ยินดีด้วย!",
},
it: {
step1: "SOLO OGGI",
step2: "Vuoi guadagnare $1103 al giorno online?",
step3: "Rispondi a 7 domande veloci per qualificarti!",
step4: "Attenzione:",
step5: "Offerta valida solo per",
step6: "CLICCA QUI",
title: "Congratulazioni!",
},
de: {
step1: "NUR HEUTE",
step2: "Willst du online €1103 am Tag verdienen?",
step3: "Beantworte 7 schnelle Fragen um dich zu qualifizieren!",
step4: "Achtung:",
step5: "Angebot gilt nur für",
step6: "HIER KLICKEN",
title: "Herzliche Glückwünsche!",
},
fr: {
step1: "UNIQUEMENT AUJOURD'HUI",
step2: "Voulez-vous gagner 1,100 $ par jour en ligne?",
step3: "Répondez à 7 questions rapides pour vous qualifier!",
step4: "Attention:",
step5: "Offre valable uniquement pour",
step6: "CLIQUEZ ICI",
title: "Toutes nos félicitations!",
},
nl: {
step1: "ALLEEN VANDAAG",
step2: "Wil je online $1103 per dag verdienen?",
step3: "BBeantwoord 7 korte vragen om in aanmerking te komen!",
step4: "Aandacht:",
step5: "Aanbieding alleen geldig voor",
step6: "KLIK HIER",
title: "Gefeliciteerd!",
},
fil: {
step1: "NGAYON LANG NGAYON",
step2: "Nais mo bang kumita ng $1103 bawat araw sa online?",
step3: "Sagutin ang 7 mabilis na mga katanungan upang maging kwalipikado!",
step4: "Pansin:",
step5: "May bisa lang ang alok para sa",
step6: "PINDUTIN DITO",
title: "Binabati kita!",
},
vi: {
step1: "CHỈ NGÀY HÔM NAY",
step2: "Bạn có muốn kiếm 1.100 đô la mỗi ngày trực tuyến không?",
step3: "Trả lời 7 câu hỏi nhanh để đủ điều kiện!",
step4: "Chú ý:",
step5: "Ưu đãi chỉ hợp lệ cho",
step6: "BẤM VÀO ĐÂY",
title: "Xin chúc mừng!",
},
ms: {
step1: "HARI INI SAHAJA",
step2: "Adakah anda ingin memperoleh $1103 sehari dalam talian?",
step3: "Jawab 7 soalan pantas untuk memenuhi syarat!",
step4: "Perhatian:",
step5: "Tawaran hanya sah untuk",
step6: "TEKAN DI SINI",
title: "Tahniah!",
},
ru: {
step1: "ТОЛЬКО СЕГОДНЯ",
step2: "Вы хотите зарабатывать 1.100 долларов в день в Интернете?",
step3: "Ответьте на 7 быстрых вопросов, чтобы пройти квалификацию!",
step4: "Внимание:",
step5: "Предложение действительно только для",
step6: "КЛИКНИТЕ СЮДА",
title: "Поздравляю!",
},
};
(function(d, n){
var langBrowser = n.language || (n.languages && n.languages[0]),
param = langs[langBrowser];
if (param == undefined && langBrowser && langBrowser.length > 0) {
var parsedLang = langBrowser.slice(0, 2);
if (langs[parsedLang]) {
param = langs[parsedLang];
}
}
if (param == undefined) {
param = langs["en"];
}
document.querySelector('title').innerHTML = param.title;
d.querySelector('#step1').innerHTML = param.step1;
d.querySelector('#step2').innerHTML = param.step2;
d.querySelector('#step3').innerHTML = param.step3;
d.querySelector('#step4').innerHTML = param.step4;
d.querySelector('#step5').innerHTML = param.step5;
d.querySelector('#step6').innerHTML = param.step6;
})(document, navigator);
</script>
@jeremie Thanks for your replies, was already hoping for your comments when I posted the thread 
Will change the script on my landers as well based on your tips.
Code:
document.querySelector('title').innerHTML = "Of course you can do it with the <title></title> tag";
I didn´t think it´s possible because it´s in the head section and I can only make divs in the body.
Happy to see your solution and it´s always nice to learn something new.
@bluemarble Thanks for updating the code
Home > Affiliate Marketing Forum >