网站添加谷歌翻译组件转化海外流量

xixi 2021-1-5 2258

茜茜今天给大家介绍如何给网站添加谷歌翻译组件转化海外流量

首先看下翻译组件的演示效果:

或许众多站长会遇到这样的问题:百度收录/排名上不去,但是谷歌,Yandex,雅虎和必应的爬虫却天天来访,带来可观的海外流量。但是国内很多广告/流量联盟是不承认海外流量的,所以造成一定程度的服务器资源浪费,没有添加收益,却白白吃服务器资源。于是很多站长的做法是禁用海外ip来缓解来自海外访客的资源消耗。

其实海外的广告联盟很多,转化起来也非常方便,例如;

1. Trafficjunky: https://www.trafficjunky.com


2. Juicyads: https://www.juicyads.com


3. Adnium: https://adnium.com


4. Propellerads: https://propellerads.com (口碑不是很好)


5. Google Adsense: https://www.google.com/adsense (适合普通电影网站)


以上推荐的联盟收益都是相对较高的,都是长期稳定的,不会出现拖延/跑路等情况

站长们可以通过js,php或者分区域解析的方法来区别嵌入海外广告代码。

虽然可能没有国内一些cpm,cps联盟单价高,但是在不允许国内访客的情况下转发海外流量的收益还是十分可观的。

下面回到正题,最近受到https://pornhubb.net站长的启发(贵站站长在网站添加了来自https://gtranslate.io的谷歌翻译组件来实现网站翻译),于是茜茜开始研究给网站也添加一个方便海外访客的浏览也可以提高pv和访客忠实度


在对页面做修改之前建议先备份网站文件,强烈建议在测试环境进行操作

首先我们访问GTranslate官网:


点击Go Global,在左边free plan点击download转到html可以看到代码演示



<!-- GTranslate: https://gtranslate.io/ -->
<a href="#" onclick="doGTranslate('en|en');return false;" title="English" class="gflag nturl" style="background-position:-0px -0px;"><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="English" /></a><a href="#" onclick="doGTranslate('en|fr');return false;" title="French" class="gflag nturl" style="background-position:-200px -100px;"><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="French" /></a><a href="#" onclick="doGTranslate('en|de');return false;" title="German" class="gflag nturl" style="background-position:-300px -100px;"><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="German" /></a><a href="#" onclick="doGTranslate('en|it');return false;" title="Italian" class="gflag nturl" style="background-position:-600px -100px;"><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="Italian" /></a><a href="#" onclick="doGTranslate('en|pt');return false;" title="Portuguese" class="gflag nturl" style="background-position:-300px -200px;"><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="Portuguese" /></a><a href="#" onclick="doGTranslate('en|ru');return false;" title="Russian" class="gflag nturl" style="background-position:-500px -200px;"><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="Russian" /></a><a href="#" onclick="doGTranslate('en|es');return false;" title="Spanish" class="gflag nturl" style="background-position:-600px -200px;"><img src="//gtranslate.net/flags/blank.png" height="16" width="16" alt="Spanish" /></a>
<style type="text/css">
<!--
a.gflag {vertical-align:middle;font-size:16px;padding:1px 0;background-repeat:no-repeat;background-image:url(//gtranslate.net/flags/16.png);}
a.gflag img {border:0;}
a.gflag:hover {background-image:url(//gtranslate.net/flags/16a.png);}
#goog-gt-tt {display:none !important;}
.goog-te-banner-frame {display:none !important;}
.goog-te-menu-value:hover {text-decoration:none !important;}
body {top:0 !important;}
#google_translate_element2 {display:none!important;}
-->
</style>
<br /><select onchange="doGTranslate(this);"><option value="">Select Language</option><option value="en|af">Afrikaans</option><option value="en|sq">Albanian</option><option value="en|ar">Arabic</option><option value="en|hy">Armenian</option><option value="en|az">Azerbaijani</option><option value="en|eu">Basque</option><option value="en|be">Belarusian</option><option value="en|bg">Bulgarian</option><option value="en|ca">Catalan</option><option value="en|zh-CN">Chinese (Simplified)</option><option value="en|zh-TW">Chinese (Traditional)</option><option value="en|hr">Croatian</option><option value="en|cs">Czech</option><option value="en|da">Danish</option><option value="en|nl">Dutch</option><option value="en|en">English</option><option value="en|et">Estonian</option><option value="en|tl">Filipino</option><option value="en|fi">Finnish</option><option value="en|fr">French</option><option value="en|gl">Galician</option><option value="en|ka">Georgian</option><option value="en|de">German</option><option value="en|el">Greek</option><option value="en|ht">Haitian Creole</option><option value="en|iw">Hebrew</option><option value="en|hi">Hindi</option><option value="en|hu">Hungarian</option><option value="en|is">Icelandic</option><option value="en|id">Indonesian</option><option value="en|ga">Irish</option><option value="en|it">Italian</option><option value="en|ja">Japanese</option><option value="en|ko">Korean</option><option value="en|lv">Latvian</option><option value="en|lt">Lithuanian</option><option value="en|mk">Macedonian</option><option value="en|ms">Malay</option><option value="en|mt">Maltese</option><option value="en|no">Norwegian</option><option value="en|fa">Persian</option><option value="en|pl">Polish</option><option value="en|pt">Portuguese</option><option value="en|ro">Romanian</option><option value="en|ru">Russian</option><option value="en|sr">Serbian</option><option value="en|sk">Slovak</option><option value="en|sl">Slovenian</option><option value="en|es">Spanish</option><option value="en|sw">Swahili</option><option value="en|sv">Swedish</option><option value="en|th">Thai</option><option value="en|tr">Turkish</option><option value="en|uk">Ukrainian</option><option value="en|ur">Urdu</option><option value="en|vi">Vietnamese</option><option value="en|cy">Welsh</option><option value="en|yi">Yiddish</option></select><div id="google_translate_element2"></div>
<script type="text/javascript">
function googleTranslateElementInit2() {new google.translate.TranslateElement({pageLanguage: 'en',autoDisplay: false}, 'google_translate_element2');}
</script><script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit2"></script>
<script type="text/javascript">
/* <![CDATA[ */
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 7(a,b){n{4(2.9){3 c=2.9("o");c.p(b,f,f);a.q(c)}g{3 c=2.r();a.s(\'t\'+b,c)}}u(e){}}6 h(a){4(a.8)a=a.8;4(a==\'\')v;3 b=a.w(\'|\')[1];3 c;3 d=2.x(\'y\');z(3 i=0;i<d.5;i++)4(d[i].A==\'B-C-D\')c=d[i];4(2.j(\'k\')==E||2.j(\'k\').l.5==0||c.5==0||c.l.5==0){F(6(){h(a)},G)}g{c.8=b;7(c,\'m\');7(c,\'m\')}}',43,43,'||document|var|if|length|function|GTranslateFireEvent|value|createEvent||||||true|else|doGTranslate||getElementById|google_translate_element2|innerHTML|change|try|HTMLEvents|initEvent|dispatchEvent|createEventObject|fireEvent|on|catch|return|split|getElementsByTagName|select|for|className|goog|te|combo|null|setTimeout|500'.split('|'),0,{}))
/* ]]> */
</script>

这几行代码插入到页面大概是这个样子


但是茜茜感觉自己添加排版有点乱,于是做了小小的调整

以下是对默认模板的调整步骤

首先打开PC版的模板目录/Template/9CCMSPC/html

修改footer.html,在末尾添加js来调用谷歌翻译api

<script type="text/javascript">
function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'zh-CN', layout: google.translate.TranslateElement.InlineLayout.SIMPLE,autoDisplay: false, includedLanguages: ''}, 'google_translate_element');}var googleTranslateScript = document.createElement('script');googleTranslateScript.type = 'text/javascript';googleTranslateScript.async = true;googleTranslateScript.src = 'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild(googleTranslateScript);
</script>

这段代码茜茜已经优化过了,使用异步加载,不会因为谷歌的国内访问状况而拖慢页面加载

原代码是这样的:

<script type="text/javascript">
function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE,autoDisplay: false, includedLanguages: ''}, 'google_translate_element');}
</script><script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

然后转到/Template/9CCMSPC/css

在common.min.css末尾添加

/*Google Translate Begin*/
#google_translate_element{
    padding-left:5px;
    float:right;
}
.goog-te-gadget-simple{
    height:27px;
    line-height:27px;
    border:none!important;
    color:#fff;
    background-color:#f4777f!important;
    border-radius:3px;
}
.goog-te-gadget-simple span:nth-last-child(3){
    border:none!important;
}
.goog-te-gadget-simple span:last-child{
    color:#000!important;
}
.goog-te-gadget-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M3.064 7.51A9.996 9.996 0 0 1 12 2c2.695 0 4.959.99 6.69 2.605l-2.867 2.868C14.786 6.482 13.468 5.977 12 5.977c-2.605 0-4.81 1.76-5.595 4.123-.2.6-.314 1.24-.314 1.9 0 .66.114 1.3.314 1.9.786 2.364 2.99 4.123 5.595 4.123 1.345 0 2.49-.355 3.386-.955a4.6 4.6 0 0 0 1.996-3.018H12v-3.868h9.418c.118.654.182 1.336.182 2.045 0 3.046-1.09 5.61-2.982 7.35C16.964 21.105 14.7 22 12 22A9.996 9.996 0 0 1 2 12c0-1.614.386-3.14 1.064-4.49z' fill='rgba(0,0,0,1)'/%3E%3C/svg%3E")!important;
    background-position:0 0 !important;
}
/*Google Translate End*/

这个修改了谷歌翻译的图标和调制了下拉按钮的大小(颜色可以自己修改)

(图标来自https://remixicon.com)

PC版的最后一步就很简单了,在/Template/9CCMSPC/html/header.html的

<div class="search">

标签的</div>闭标签后面添加

<div id="google_translate_element"></div>

然后访问后台刷新缓存就可以看到效果





选择语言的按钮是异步加载出来的,所以页面未加载完时不会显示

然后我们接着给手机版也添加谷歌翻译组件

首先修改/Template/9CCMSWAP/html/footer.html

在末尾添加

<script>function googleTranslateElementInit2(){new google.translate.TranslateElement({pageLanguage:'zh-CN',autoDisplay:false},'google_translate_element2')}var googleTranslateScript=document.createElement('script');googleTranslateScript.type='text/javascript';googleTranslateScript.async=true;googleTranslateScript.src='https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit2';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(googleTranslateScript);function googleTranslateFireEvent(a,b){try{if(document.createEvent){var c=document.createEvent("HTMLEvents");c.initEvent(b,true,true);a.dispatchEvent(c)}else{var c=document.createEventObject();a.fireEvent('on'+b,c)}}catch(e){}}function googleTranslate(a){if(a.value)a=a.value;if(a=='')return;var b=a.split('|')[1];var c;var d=document.getElementsByTagName('select');for(var i=0;i<d.length;i++)if(d[i].className=='goog-te-combo')c=d[i];if(document.getElementById('google_translate_element2')==null||document.getElementById('google_translate_element2').innerHTML.length==0||c.length==0||c.innerHTML.length==0){setTimeout(function(){googleTranslate(a)},500)}else{c.value=b;googleTranslateFireEvent(c,'change');googleTranslateFireEvent(c,'change')}}</script>

这个用到的一个按钮调用谷歌翻译的function引用https://gtranslate.io的,原代码是这样的,作者做了简单的加密

<script type="text/javascript">
/* <![CDATA[ */
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 7(a,b){n{4(2.9){3 c=2.9("o");c.p(b,f,f);a.q(c)}g{3 c=2.r();a.s(\'t\'+b,c)}}u(e){}}6 h(a){4(a.8)a=a.8;4(a==\'\')v;3 b=a.w(\'|\')[1];3 c;3 d=2.x(\'y\');z(3 i=0;i<d.5;i++)4(d[i].A==\'B-C-D\')c=d[i];4(2.j(\'k\')==E||2.j(\'k\').l.5==0||c.5==0||c.l.5==0){F(6(){h(a)},G)}g{c.8=b;7(c,\'m\');7(c,\'m\')}}',43,43,'||document|var|if|length|function|GTranslateFireEvent|value|createEvent||||||true|else|doGTranslate||getElementById|google_translate_element2|innerHTML|change|try|HTMLEvents|initEvent|dispatchEvent|createEventObject|fireEvent|on|catch|return|split|getElementsByTagName|select|for|className|goog|te|combo|null|setTimeout|500'.split('|'),0,{}))
/* ]]> */
</script>

然后修改/Template/9CCMSWAP/css/m.style.css

在末尾添加

summary {
	direction: rtl;
	padding: 10px;
    background-color: #e3e7e8;
	border-radius: 5px;
}
[open] > summary {
    background-color: #2e3638;
    color: #e9eced;
}
#google_translate_element2 {
	text-align: center;
}
/*Freak Flags, Copyright ©2021 Michael P. Cohen. Freak flags is licenced under the MIT licence. */
.flag {
    background-image:url(/assets/flagSprite.png);
    background-repeat:no-repeat;
    background-size: 100% 49494%;
    display: inline-block;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
    box-sizing: content-box;
	width: 18px;
	height: 11px
}
.flag-US {background-position:center 0.2287%}
.flag-JP {background-position:center 0.4524%}
.flag-KR {background-position:center 0.6721%}
.flag-TW {background-position:left 0.8958%}
.flag-RU {background-position:center 1.1162%}
.flag-ES {background-position:left 1.3379%}
.more_lang {padding-left:2em;}
@media (min-width: 48em) {
	summary {
		direction: initial;
	}
	.flag {
		width: 27px;
		height: 17px
	}
	.more_lang {
		float: right;
	}
}

这个有用到https://www.freakflagsprite.com的国旗生成

小伙伴可以下载https://xixi.page/assets/flagSprite.png到对于的网站目录里,如果需要更多语言的国旗可以去https://www.freakflagsprite.com生成下载,另外还有一个生成svg国旗的也非常不错:

https://freesvg.org/countries-flags

最后转到/Template/9CCMSWAP/html/header.html

在最后添加:

		<details>
	        <summary>
		        <span class="more_lang">Choose from More Languages</span>
		        <span class="flag flag-ES" onclick="googleTranslate('zh-CN|es');"></span>
		        <span class="flag flag-RU" onclick="googleTranslate('zh-CN|ru');"></span>
		        <span class="flag flag-TW" onclick="googleTranslate('zh-CN|zh-TW');"></span>
		        <span class="flag flag-KR" onclick="googleTranslate('zh-CN|ko');"></span>
		        <span class="flag flag-JP" onclick="googleTranslate('zh-CN|ja');"></span>
		        <span class="flag flag-US" onclick="googleTranslate('zh-CN|en');"></span>
	        </summary>
	            <div id="google_translate_element2"></div>
        </details>

这个用到details和summary的无js折叠,如果要了解更多可以访问https://css-tricks.com/how-to-animate-the-details-element-using-waapi/

然后这样就大功告成了,刷新下缓存,可以看到效果


*---更新---*

在css中添加以下代码可以隐藏谷歌翻译的顶部语言框

.goog-te-banner-frame {
    display: none;
}
body {
    top: 0!important;
}


今天的教程就到这里,如果小伙伴有好用的海外广告联盟推荐,欢迎在评论区留言o((◕∀ ◕✿))o

本文由茜茜发布于久草CMS论坛,转发请注明出处

---------咱是分割线--------------------------------------------------------------------------------

上一篇:[转]宝塔面板自编译brotli提高网站速度

啊,好水好水,大佬轻拍

最后于 2021-1-6 被xixi编辑 ,原因:
最新回复 (8)
  • qaz0537 2021-1-5
    0 2
    效果不是很好,用嘉文模板只能翻译个别文字 其他还是中文 不知是不是模板问题
  • sssguo 2021-1-5
    0 3
    感谢分享!
  • zssshk 2021-1-5
    0 4
    大佬,我wap端添加后,也看不到翻译效果呢?还有可否有时间讲解下首页视频的那个点击特效。
  • 十字路口 2021-1-7
    0 5
    感谢分享!
  • yefan1188 2021-1-7
    0 6
    减少语言种类要在哪里修改,删除不常用的,留下几个比较有用的
  • jjyy128 2022-11-10
    0 7
    支持
  • xinxiao812 2022-12-14
    0 8
    感谢分享 辛苦了
  • xinxiao812 2022-12-14
    0 9
    测试了  手机端的谷歌翻译的顶部语言框不能隐藏
返回
发新帖