導入スクリプトタグの埋め込み方
#概要
Autolingualでサイトの多言語化を行うためには、プロジェクトごとに発行される「導入スクリプト」を、翻訳対象となるすべてのページに埋め込んでいただく必要があります。
導入スクリプトは、Autolingualの管理画面にログイン後、対象プロジェクトのホーム画面から取得できます。
#埋め込みにあたっての注意点
- 導入スクリプトは、必ず
<head>タグ内 に埋め込んでください。<body>タグ内など他の場所に設置した場合、正しく動作しない、または表示が崩れる原因となります。 - 多言語化を行いたい全てのページ に導入スクリプトが埋め込まれている必要があります。一部のページのみに設置した場合、そのページ以外では翻訳機能が表示されません（トップページのみに設置し、下層ページに反映されていないケースが多く見られますのでご注意ください）。
- サイト内に複数のテンプレート（ヘッダー・フッター等が共通化されていないページ群）が存在する場合は、テンプレートごとに埋め込みが必要かどうかご確認ください。
- 導入スクリプトはプロジェクトごとに異なる固有のコードです。複数サイト・複数プロジェクトを運用されている場合は、対象サイトに対応したプロジェクトのスクリプトを埋め込んでいるかご確認ください。
#埋め込み方法
具体的な埋め込み方法については、サイトの構成技術によって異なります。下記のうち該当する項目をご参照ください。
#HTMLソースを直接編集する場合
- 対象ページのHTMLファイルを開きます。
<head>と</head>の間に、Autolingual導入スクリプトを挿入します。- ファイルを保存します。
- 編集したHTMLファイルをサーバーへアップロードします。
※サーバーへのHTMLファイルアップロード方法については、契約しているサーバー管理会社にご確認ください。自社でサイト開発を行っていない場合は、サイト制作会社に「導入スクリプトをHTMLファイルに埋め込みたい」旨をお伝えいただき、対応をご依頼ください。
#Google タグマネージャーを利用する場合
- Googleタグマネージャーにログインします。
- 「新しいタグ」を作成し、タグの種類としてカスタムHTMLを選択します。
- Autolingualの導入スクリプトをカスタムHTMLの内容として貼り付けます。
- トリガーを All Pages（すべてのページ） に設定します。翻訳対象を一部のページのみに限定したい場合は、対象ページのみに発火するトリガーを設定してください。
- 登録の際は、正しいAutolingualプロジェクトを参照しているか（プロジェクトIDやスクリプト内のコードが対象サイトのものと一致しているか）を必ずご確認ください。
- 公開前に、GTMのプレビューモードで正しくタグが発火することをご確認の上、公開してください。
#その他のCMS・サイトビルダーを利用する場合
WordPress、Shopify、Wix、STUDIO、ペライチ等、各種CMS・サイトビルダーをご利用の場合も、基本的な考え方は同じです。
- 各サービスが提供している「ヘッダーにコードを追加する」機能（例：WordPressの「テーマヘッダー・フッター編集」やプラグイン、Shopifyの
theme.liquid編集など）を利用し、<head>タグ内に導入スクリプトを挿入してください。 - 詳細な操作方法は、ご利用中のサービスの公式ドキュメントをご参照ください。
- CMSによっては、ページテンプレートが複数存在する場合があります（トップページ用テンプレート、下層ページ用テンプレート等）。翻訳対象とする全てのテンプレートに導入スクリプトが含まれているかご確認ください。
#埋め込み後の確認方法
- 対象ページをブラウザで開きます。
- ページのソースを表示し（右クリック→「ページのソースを表示」等）、
<head>タグ内に導入スクリプトが含まれているか確認します。 - 開発者ツール（Chromeの場合はF12キー）の「Console」タブを開き、エラーが出ていないか確認します。
- 言語切り替えUIが表示され、正しく翻訳が行われるか確認します。
キャッシュ系のプラグイン・CDNをご利用の場合、変更が反映されるまで時間がかかることがあります。設置直後に反映が確認できない場合は、キャッシュのクリアもあわせてお試しください。