海外营销

图解Shutto翻訳导入全流程!从JavaScript标签安装到上线的完整步骤

阅读时间:约 16.146分钟

Leap 编辑团队
Leap 编辑团队
全球业务专家团队
图解Shutto翻訳导入全流程!从JavaScript标签安装到上线的完整步骤

【1分钟速览】Shutto翻訳导入全流程与本文使用方法

想让网站支持多语言,但从零开始制作翻译页面成本高、耗时长——面对这一痛点,"Shutto翻訳"深受众多负责人青睐。e-365株式会社(前身为e-Agency)提供的这款SaaS型多语言化工具,只需在<head>标签中插入一行JavaScript,即可在最短3分钟内实现全站多语言化。

本文面向工程师及网站负责人,汇聚了实际推进导入工作所需的全部信息,作为一份完整的实施指南。具体内容包括:①从账号注册到仪表盘URL登录、安装标签的基本3步骤;②静态网站、WordPress、Shopify、ColorMeShop、futureshop等各环境的安装步骤;③通过Google Tag Manager安装的方法及注意事项;④保护个人信息与机密信息的翻译排除设置;⑤正式上线前的操作验证要点——共五大部分,按序解说。

无论您正在评估是否导入Shutto翻訳,还是已完成签约但在标签安装环节遇到困难,本文均按照"照着操作即可顺利上线"的结构编写,欢迎通读至结尾。

Shutto翻訳是什么——导入前必须掌握的基础知识

Shutto翻訳是一款只需在网站HTML的<head>标签内插入一行JavaScript标签(导入标签),即可通过AI自动翻译实现全站多语言化的工具。支持语言超过100种,涵盖英语、中文(简体及繁体)、韩语、泰语、越南语、印度尼西亚语等,几乎覆盖东南亚、东亚及美洲市场所需的全部语言。

其核心机制在于"标签方式"。对现有网站源代码的改动极少,因此不受CMS类型或网站静态/动态性质的限制,适用范围极广。博客、电商网站、企业官网、会员网站、表单等,所有输出HTML的页面均可作为翻译对象。

除自动翻译外,管理后台还提供翻译文本自助编辑、防止专有名词误译的词典登录、语言切换栏设计自定义等丰富功能。利用海外搜索引擎对应功能,还可自动生成静态页面,将翻译后的页面收录至海外Google等搜索引擎。

定价方面(2026年3月调整后),入门套餐起价为8,800日元(含税)/月(100页,50万字符/月)。无需初始费用,提供30天免费试用。

导入实例:NTT DATA Intramart株式会社

为企业提供IT平台的NTT DATA Intramart,借助Shutto翻訳实现了超过100万字符的大规模页面多语言化,将传统翻译成本压缩至约十分之一。该公司在决定导入时所看重的要点包括:"翻译精度高""管理界面直观""即使IT素养较低的负责人也能自主完成翻译操作""性价比优异"。该方案已被认定为大规模网站运营中多语言化的现实可行解。

导入基本3步骤——从账号注册到标签安装与上线

Shutto翻訳的导入流程可归纳为3大步骤。按序操作可有效避免不必要的返工。

STEP 1:创建账号并在仪表盘注册URL

首先,在Shutto翻訳官网(https://www.submit.ne.jp/shutto-translation)申请免费试用。输入邮箱地址及基本信息完成账号创建后,即可访问仪表盘。

登录仪表盘后,注册需要翻译的页面URL。URL支持通过CSV批量导入,即使是商品页面众多的电商网站也能高效完成设置。URL注册完成后,系统将自动加载页面并提取待翻译文本。此阶段还需选择翻译语言,并配置"自动翻译发布"的启用/禁用状态。

STEP 2:获取导入标签(JavaScript标签)并插入<head>

在仪表盘的"站点设置"菜单中复制"导入标签"。该标签为各账号专属代码,格式如下: <script src="https://xxxxxxxx.shutto-translation.com/st.js"></script>

将此标签插入网站所有页面的<head>标签内。安装时请注意以下事项:

  • 标签需置于<title>标签和canonical标签之后(下方)
  • 即使持有多个账号,每个站点也只能使用一个导入标签(重复安装多个标签会导致意外故障)
  • 如无法在<head>内安装,可将其放置在<body>开始标签的紧后方(最上部)
  • 对于PC版与手机版HTML分开的网站,需在所有设备的源代码中均进行安装

如果您不自行管理网站,请将上述代码和注意事项告知制作公司或开发商,委托其完成操作。

STEP 3:发布翻译并确认语言切换栏

若已设置"自动翻译发布:禁用",则需在仪表盘手动执行发布操作。在仪表盘的页面列表中选择目标页面,点击"发布翻译"即可批量发布。

发布后,确认语言切换栏的设置。若显示为"不显示",请勾选"显示语言切换栏",并配置显示位置和显示语言。同时务必确认"首次显示语言"设置——此设置控制访客首次访问时看到的语言版本。

最后,访问实际网站,确认语言切换栏正常显示、翻译后的页面呈现无误,即完成上线。

各环境安装步骤——WordPress、Shopify、ColorMeShop、futureshop

导入标签的安装方式因所使用的CMS或电商平台而异,请参考以下各主要环境的安装步骤。

静态网站/HTML网站

可直接编辑HTML的环境中,在所有页面的<head>标签内添加导入标签。若存在公共头部文件,只需编辑该文件一处,即可应用至所有页面。

WordPress网站

在WordPress中,标准做法是编辑主题的header.php文件,在</head>标签前插入导入标签。若直接编辑主题,主题更新时设置有被覆盖的风险,建议使用子主题。使用"Insert Headers and Footers"等插件,无需编辑代码即可向<head>添加脚本。

ColorMeShop

自2026年2月起,ColorMeShop已支持直接从应用商店添加Shutto翻訳应用完成导入。在应用商店搜索"shutto翻訳"并添加后,系统将引导您完成Shutto翻訳账号注册,无需直接编辑HTML,多语言化更加简便。30天免费试用结束后,如需正式合同,请在Shutto翻訳管理后台办理手续。

如需通过ColorMeShop管理后台直接编辑HTML安装,可进入管理后台的"设计"→"模板编辑",打开公共HTML,在<head>标签内插入导入标签。

futureshop

futureshop与Shutto翻訳建立了官方合作关系,通过专用申请表提交申请后,将在3个工作日内发放免费试用账号。在futureshop管理后台编辑HTML模板,在<head>标签内插入导入标签。"Commerce Creator"版与标准futureshop的安装位置有所不同,建议参考官方手册(https://www.submit.ne.jp/shutto-translation/hc/manual/futureshop)进行确认。

Shopify

在Shopify中,通过主题编辑器打开theme.liquid文件,在</head>标签前添加导入标签。由于theme.liquid是Shopify主题结构中所有页面的公共模板,只需编辑一处即可应用至整个站点。

通过Google Tag Manager(GTM)安装及注意事项

也可通过Google Tag Manager管理Shutto翻訳的导入标签。已使用GTM的情况下,负责人无需开发资源即可自主配置和变更标签,具有较高的灵活性。

GTM安装步骤如下:

  1. 进入GTM容器,选择"代码"→"新建"
  2. 代码类型选择"自定义HTML",粘贴Shutto翻訳的导入标签代码
  3. 触发器设置为"All Pages(所有页面)"
  4. 保存代码,在预览模式下确认运行正常后发布

但GTM安装方式有一个重要注意事项:部分用户使用的Adblock(广告拦截器)可能会屏蔽GTM本身。若仅通过GTM安装标签,启用了Adblock的用户将无法使用Shutto翻訳功能。如需将Adblock的影响降至最低,可考虑GTM与直接<head>安装并用,或优先采用直接安装方式。此外,GTM触发器配置有误可能导致标签仅在特定页面触发——若希望应用于全站,请务必确认触发器已设置为"All Pages"。官方手册(https://www.submit.ne.jp/shutto-translation/hc/manual/googletagmanager)提供了详细的设置说明。

翻译排除设置——保护个人信息与机密信息的必要操作

导入Shutto翻訳时容易被忽略、但优先级极高的设置是"翻译排除设置"。网站上可能存在不应通过翻译工具处理的信息。

需要进行翻译排除设置的典型场景包括:

  • 显示姓名、地址、电话号码、邮箱等个人信息的页面或区域
  • 用户填写个人信息的表单,如账号注册表单、订单表单等
  • 合同书、报价单、发票等高保密性商业文件
  • 商品型号、价格、库存数量等数值信息(语言转换可能引入误译风险)

排除设置有两种方法。第一种是在需要排除的HTML元素上添加专用属性:为目标HTML元素添加translate="no"属性或Shutto翻訳专用class名,该元素内的文本将不再被翻译。第二种是通过仪表盘更改翻译对象页面的设置,将特定页面整体从翻译对象中排除。

Shutto翻訳官方手册明确指出,含有个人信息的区域"建议进行翻译排除设置或将其从翻译对象页面中移除"。从GDPR及各国个人信息保护法的角度出发,工程师和网站负责人务必不可忽视这一步骤。

详细设置方法请参考官方手册页面(https://www.submit.ne.jp/shutto-translation/hc/manual/exclusion_setting)。

正式上线前的操作验证清单

完成标签安装和翻译设置后,正式上线前请务必逐项确认以下内容。若跳过此步骤直接上线,用户可能会在翻译后的页面上看到错误信息。

显示确认

  • 语言切换栏是否在所有页面正确显示?
  • 切换至目标全部语言(英语、中文、韩语等)是否正常运作?
  • 在PC、平板、手机各设备上,翻译显示是否未出现排版错乱?(善用设备预览功能)

翻译质量确认

  • 自动翻译结果中是否存在明显错译的文本?(重点检查商品说明、CTA按钮、导航)
  • 公司名、商品名、地名等专有名词是否正确显示?(确认词典登录已生效)
  • 是否存在因翻译导致页面排版错乱的情况?(通过内容编辑功能调整CSS)

排除设置确认

  • 个人信息表单是否已从翻译对象中排除?
  • 已进行排除设置的区域是否实际未被翻译?

功能确认

  • 自动翻译发布设置的状态(启用/禁用)是否符合预期?
  • 首次显示语言的设置是否为预期语言?
  • 通过Google Tag Manager安装的情况下,标签是否在所有页面触发?(通过GTM预览模式确认)

如在清单检查中发现问题,请使用仪表盘的自助翻译功能修正文本后重新发布。功能的详细说明,请从官方手册首页(https://www.submit.ne.jp/shutto-translation/hc/manual)按分类查阅。

常见问题(FAQ)

Q1. 不确定能否将标签放入<head>,放在<body>中也能正常工作吗? 建议将标签放置在<head>内,但如因某些原因无法实现,将其置于<body>开始标签紧后方(最上部)同样可以正常运行。条件是在页面加载时能读取到标签,因此请避免将其放在<body>标签的末尾。若放置在<head>内,需置于<title>标签和canonical标签之后。

Q2. 在WordPress上安装后,主题更新导致标签消失了,该怎么办? 若直接编辑了主题文件,主题更新时会将其覆盖,导致设置丢失。为防止此情况,请创建子主题并在子主题中安装标签,或使用"Insert Headers and Footers"等插件。通过插件安装则不受主题更新的影响。通过Google Tag Manager统一管理也是一种有效方案,但请综合考虑Adblock的影响后再做选择。

Q3. 电商网站有数千个商品页面,是否需要在仪表盘逐一登录? Shutto翻訳提供"自动页面登录"功能。在网站上安装导入标签并开启自动页面登录后,访客访问的页面将自动登录至仪表盘。此外,CSV批量导入功能也已就绪——准备好商品页面URL的CSV文件,即可一次性批量导入。即使是拥有数千个页面的电商网站,也无需手动逐一登录。

总结——借助Shutto翻訳,为出海之路打开大门

导入Shutto翻訳,从插入一行JavaScript标签开始。遵循账号注册→URL登录→标签安装→发布的基本3步骤,根据使用环境选择合适的安装方式,完成翻译排除设置并进行上线前验证,即可以最短时间将现有网站升级为多语言网站。

NTT DATA Intramart以十分之一的成本实现了超过百万字符规模的多语言化;群马县みどり市役所则通过自动化翻译业务大幅削减了市政旅游网站的工作量。多语言化带来的价值,不受行业和规模的限制。

然而,将网站送达全球用户只是第一步。下一个课题,是网站到达目标用户后,内容是否真正能够赢得"信任"。即便页面已完成翻译,若与当地用户的关注点和价值观不相符,也难以转化为咨询或购买行为。

Leap在协助客户利用Shutto翻訳等翻译工具的同时,还提供针对当地市场深度优化的多语言页面原创制作与本地化支持服务。如果您对"不仅仅是翻译,而是为当地用户重新构建内容"的方案感兴趣,欢迎参阅Leap的博客与案例研究

参考资料

Leap持续面向正在考虑出海的企业负责人及经营者,发布多语言网络营销相关资讯,涵盖各国市场动态、多语言电商运营经验及跨境销售实务,欢迎浏览其他文章,获取可在实际工作中直接应用的信息。

分享此文章

Leap website builder

チャットだけで、グローバル水準のサイトを。

AIがサイトを作って、最適化して、グローバルに届ける

ECサイト・ウェブサイト・LPの作成から多言語展開・AI自動最適化まで、すべてAIチャットだけで完結。あなたは話しかけるだけ。

链接已复制
Leap

网站生成
AI代理

Leap アプリ画面
免费开始 →
Leap 免费开始