Home > Programming, Servers & Scripts >

1 second LP Translation in 50 languages (7)


06-12-2021 08:16 PM #1 twinaxe (Senior Moderator)
1 second LP Translation in 50 languages

Recently I posted a tutorial How to make Multilanguage Landing Pages

Today I have something even better for you.

The last weeks I tested hundreds of campaigns and created dozens of landing pages that I translated in 50 languages each of them.

This takes lots of time so I thought there should be a solution to automate the process.

Some time ago I wanted to learn a bit coding in Python but didn´t find time for it.

Now I thought it would be a great opportunity to check Python again for the LP translation automation.

I did some brainstorming how I want it to be done and how it could work, fired up PyCharm and started working on it.

I still have basically zero knowledge about Python but I absolutely wanted to get it done so I spent some time the last days on Google, W3Schools and Stackoverflow to search for the things I wanted to do and now I can proudly tell: I DID IT

Today I finished my script to auto translate landing pages in up to 50 languages in about 1 second.

Ok, that´s a bit exaggerated.

The script itself doesn´t translate the landing pages itself but it creates translation files that are ready for use and this really takes only a second or so but we need to do some preparations first.

It also doesn´t work 100% flawless in some situations but that´s not really an issue with the script but rather with the translations that we receive.
I will talk more about it later.

Let´s check now what needs to be done to get it working.

First I wanted to upload the script itself here so that everyone can run it on the own computer.

Of course you need to have Python installed on your computer to run Python scripts and you need to know how to run Python scripts.

To make it a little bit easier for all I decided to run it as a webapp so that everyone can just visit the website and use it without the need to have Python on the computer installed.

For the script to work properly your files have to be in a certain format.

First you need to prepare your landing pages for it.

The script works best for simple landing pages like THIS ONE
I will also use that LP as example for the script.

For this landing page there would be 5 things to translate, the title and 4 lines of text.



Keep the title tag empty and give each text part that you want to translate an own div ID.

The IDs always have to be stepX, beginning from 1 and then increasing for each part.

First text part would be id="step1", second would be id="step1", third would be id="step3" and so on.

Then add a script tag to call the translation file just before the closing body tag.

For the example LP the code would be

Code:
<!DOCTYPE html><html><head>
<base href="">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="robots" content="noindex, nofollow, noarchive">
<meta name="referrer" content="no-referrer">
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

<link id="favicon" rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEG0lEQVQ4EQEQBO/7AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/7+0IA5eWVAPX1HQDHxwYAAAAAADo6+gAKCuMAFxdpAQkJwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/yMhY/9HR8P9DQ///zs7///z8////////ICD//w4O///U1PH/w8NVAAAAAAT/pAD/AAAAAAAAAAAAAAAAABZBAAAG/QAALy8AAEVFAADMzAAAAQEAADAwAAAAAAAA8vIAACwsDgDU1Jz/9/fqAP+kAP//pAD//6QA//+kAP//173//wsL//8AAP//AAD//wAA//+oqP///////yAg//8AAP//AAD//w8P///f39YCAAAAAAAAAAAAAAAAABIzAAD8DwAA9fUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA8fEAAPj4HwIAAAAAAAAAAAAAAAAAEjMAAMnNAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAxsYFAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAO7MAAA4NAAAAAAAAAAAAAAfHwAAZGQAACIiAAAAAAAAV1cAAE5OAAAAAAAAAAAAADo6+wD/pAD//6QA//+kAP//pAD//9e9//8ODv//AAD//1BQ////////////////////////yMj//wAA//8REf//3t7WAf+kAP8AAAAAAAAAAAAAAAAAFT4AABiKAAAvOAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANbW8wAhIUoCAAAAAAAAAAAAAAAAAAAAAADrwgAA3XkAANHIAAAPDwAAAAAAAAAAAAAAAAAAAAAAABERAADTywAA6OhhAQkJxAH/pAD/AAAAAAAAAAAAAAAAAAAAAAAAAAAAFT0AABx+AAABFAAAx8sAAAAAAAA5NQAA/+sAAOOAAAFIxgEAAAAAAf+kAP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEwAAATNQAAAAAAAO3LAADv0AAAAAAAAVwAAQAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA79AAAO/QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABVtcrx7EHPYAAAAABJRU5ErkJggg==" type="image/png" sizes="16x16">
<title></title> 
<meta content="notranslate" name="google">

<style>
        select:-moz-focusring {color:transparent;text-shadow:0 0 0 #000;}
        a:focus,a:active,button::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,select::-moz-focus-inner,input[type="file"]>input[type="button"]::-moz-focus-inner {border:0;outline:0;}
        input[type="submit"],input[type="button"],input[type="image"] {outline:0;}
        button {-webkit-appearance:none;outline:none;border: none;}
        a {text-decoration:none;}
        .wrapper {margin:0 auto;text-align:center;}
        .show {display:block;}
        .hide {display:none;}
        .clear {clear:both;}
        .ltr {direction:ltr;display:inline-block;}
        .rtl {direction:rtl;display:inline-block;}
</style>

<style type="text/css"> 
body{margin:0;padding:0;width:100%;font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#333333;background-color:#ffffff}a{text-decoration:none;color:#333333}.clear{clear:both}.title{padding:20px 5px;color:#0080c8;font-size:25px;line-height:28px;font-weight:bold}.loadbar{padding:0 2px 5px}.imgloadbar{max-width:300px;width:100%}.txt{padding:0 0 20px;font-size:15px;line-height:19px}.desript{padding:20px 0 5px;max-width:450px}.s1,.s2{padding:0 5px 10px;font-size:18px;line-height:20px;text-align:left}.btnwrap{margin:10px 0}.bluebtn{max-width:100px;width:100%;padding:8px 0;color:#fff;font-size:20px;font-weight:bold;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,0.20);-moz-text-shadow:0 1px 0 rgba(0,0,0,0.20);-o-text-shadow:0 1px 0 rgba(0,0,0,0.20);-ms-text-shadow:0 1px 0 rgba(0,0,0,0.20);-khtml-text-shadow:0 1px 0 rgba(0,0,0,0.20);border:1px solid #296283;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;background:#3f83b7;background:-moz-linear-gradient(top, #3f83b7 0%, #4b97d1 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#3f83b7), color-stop(100%,#4b97d1));background:-webkit-linear-gradient(top, #3f83b7 0%,#4b97d1 100%);background:-o-linear-gradient(top, #3f83b7 0%,#4b97d1 100%);background:-ms-linear-gradient(top, #3f83b7 0%,#4b97d1 100%);background:linear-gradient(to bottom, #3f83b7 0%,#4b97d1 100%)}.bluebtn:hover{background:#4991c8;background:-moz-linear-gradient(top, #4b97d1 0%, #3f83b7 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#4b97d1), color-stop(100%,#3f83b7));background:-webkit-linear-gradient(top, #4b97d1 0%,#3f83b7 100%);background:-o-linear-gradient(top, #4b97d1 0%,#3f83b7 100%);background:-ms-linear-gradient(top, #4b97d1 0%,#3f83b7 100%);background:linear-gradient(to bottom, #4b97d1 0%,#3f83b7 100%)}.bluebtn:active{position:relative;top:1px}
</style>
</head>

<body class="">
    <div id="app">
        <center>
        <div class="container">
            <div class="title" id="step1"></div>

            <div class="loadbar">
                <img class="imgloadbar" src="loadbar.gif">
            </div>

            <div class="txt" id="step2"></div>

            <div class="desript">
                <div class="s1" id="step3"></div>
                <div class="s2" id="step4"></div>
            </div>

            <div class="btnwrap">
                <a href="clickurl">
                    <div class="bluebtn">OK</div>
                </a>
            </div>
        </div>
    </center>
    </div>
<script type="text/javascript" src="translation.js"></script>
</body>
</html>
The text for the example landing page that needs to be translated would be

Download is ready
Preparing the download ...
If your download doesn't start automatically ...
Step 1: Click OK to go to the download page
Step 2: Verify the CAPTCHA to start the download
To get the text translated go to THIS WEBSITE and paste your text there, then select the languages you want to get it translated to.

Without an account you can choose up to 9 languages, with account you can choose up to 50 languages.

When the text is translated copy all content (including the brackets) from the JSON box.



Then go to the WEBSITE WITH THE SCRIPT.

In the first field paste your English text.

Important is that there are no blank lines before or after the text.

In the second field you paste the translated data that you received from Smodin.

Now click "submit" and that´s all, in less than 1 second the script will format the translation properly, dynamically create all the parameters for the steps depending on the amount of lines and add all necessary additional scripts so that it´s ready to use.

Just copy the formated data and paste it in your translation JS file, in this example translation.js

You can also make translations with JS alert.

If you want an alert just prepare the English text exactly as before but this time add an empty line after the text and then add the text for the alert.

The alert itself can have empty lines as well, it´s only important to have one empty line between the normal text and the alert text.

Then the English text would look like this

Download is ready
Preparing the download ...
If your download doesn't start automatically ...
Step 1: Click OK to go to the download page
Step 2: Verify the CAPTCHA to start the download

This is a JS alert

It can also have free lines

Click OK to close the alert
The rest is same as before, paste the english text in smodin.net, copy the result from the JSON box and paste the English text and the translated data in the website.

The script will automatically recognize if there is text for an alert or not.

If there is text for an alert it will create an additional formated text that you can also just copy from the website.

I tested the script with several LPs and usually it´s working fine but there are some exceptions.

For example it won´t work with chinese translations, I guess it has to do with the country code.

You can also use scripts there to call out URL parameters or other stuff, you just need to add them in the right format.

What I like to do is to add dummies like ### for dynamic parameters in the English text and when the translation file is ready I just search/replace them with the scripts.
Don´t use normal letters for the dummies because some languages will change them so that search/replace won´t work.
That´s why I use special characters for it.

Some languages will mess it up nonetheless, it´s a bit annoying but then we need to change it manually.

Maybe I´ll try to solve it in a newer version of the script.

It can also happen that you need to escape some characters although it´s usually done during the translation already.

And some languages like Nepali or Serbian also change some characters sometimes.

You see, it´s not 100% perfect but for me it´s a huge timesaver so hopefully others can use it as well.

The code is probably a huge mess for a real coder but it does its job and that´s most important for me.

As I already said, I have no knowledge about Python so probably I can´t help much when you face any issues with the script but when you have any questions about it just ask and I do my best to answer them.

Let me know what you think about it and if you can use it


06-13-2021 12:22 AM #2 jaybot (Veteran Member)

Quote Originally Posted by twinaxe View Post
The code is probably a huge mess...

As I already said, I have no knowledge about Python...
Liar

After the past few years staring at mostly c/js stuff, my brain wants to see more {};() Dammit!

Your code looks good.

I mean, Python was created to always look clean, but I see nothing, 'ah-hah! he sux0rz!!!11' in here.

Aside from the fact you you used spaces instead of tabs (this is actually the correct way in Python, but old habits die hard).

Awesome script, btw.

I'm stealing it


06-13-2021 10:44 AM #3 twinaxe (Senior Moderator)

Aside from the fact you you used spaces instead of tabs (this is actually the correct way in Python, but old habits die hard).
Should be tabs for the most part, PyCharm is doing it automatically.

Probably the spotst where I did something manually are with spaces

Awesome script, btw.
Thanks, glad when you can use it.

I'm stealing it
You´re welcome


06-18-2021 03:12 PM #4 twinaxe (Senior Moderator)

Script works, but it hurt my eyes so much
Sure, I can imagine that it´s like eye-cancer for a good coder

I guess when I do more with Python then the code will become cleaner and better structured anyway.

In my Binom project I also added lots of comments for better overview.

I also changed few things for the translation script.

Probably not all users have Python installed or want to install it so I decided to run it as a webapp.

It was also a good exercise for me to learn a bit more.

To create the app with Flask was no problem but setting up the server properly was a huge headache.

Now it´s running, opening post is edited.


06-18-2021 04:30 PM #5 affpayinggao (Veteran Member)

Nice, it worked perectly.
Thank you @twinaxe


10-25-2021 02:34 PM #6 moe877 (Member)

@twinaxe you are a saint! Works great!


10-25-2021 03:57 PM #7 twinaxe (Senior Moderator)

Quote Originally Posted by moe877 View Post
@twinaxe you are a saint! Works great!
Thanks man, great to see that someone uses the site

It´s a huge timesaver for sure


Home > Programming, Servers & Scripts >