こんにちは、アンドレです。
先日ある案件で、スクリプト方式でWOVN※1を実装する機会があったのですが、その際4点ほど気づいたりハマったりしたので、ご紹介します。
※1 Webサイト・アプリを全自動で多言語化してくれるサービス。詳しくは下記を参照ください。
https://wovn.io/ja/
WOVNに翻訳されてほしくない箇所（言語切り替えメニューの文言など）にはdata-wovn-ignore属性を付与する
例えば英語に切り替える際のボタンの文言が、「English」ではなく「英語」だったら、Englishを求めている人には伝わらないかもしれません。
そういう事態を避けるため、翻訳されてほしくない箇所にはdata-wovn-ignore属性を付与しましょう。
【公式の説明】
https://support.wovn.io/hc/ja/articles/360007899791
日本語に戻す（＝wovnパラメータを削除する）処理はページ遷移前に行う
英語に切り替えた場合、URLに ?wovn=en のパラメータが付くのと同時にCookieが設定され、その後はサイト内の別のページへ遷移しても、そのCookieを元にして英語表示に切り替わります。
そこで、ページ読み込み時に「wovnパラメータがなければ日本語に戻す」ようにしようと思ったのですが、処理の流れが
ページ読み込み
↓
日本語に戻す処理
↓
ページ読み込み時のCookieを元に、英語への切替処理（遅れて実行される、wovnApiReadyのタイミング？ キャンセル不可、Cookieも再セット）
となってしまうため、このやり方では戻すことができませんでした。
最終的に、ページ遷移「前」に日本語に戻す処理を挟むことで解決しました。
【wovnApiReady（Widget API のドキュメント）】
https://support.wovn.io/hc/ja/articles/360007718372#wovnapiready
翻訳後の文章に空白（ゼロ幅スペース）が入り、意図しない余白が生まれることがある
下記の公式ヘルプセンターにも書いてあるのですが、翻訳後の文章にゼロ幅スペースが自動で挿入されることで、意図しない余白が生まれたりします。
当初、JSでゼロ幅スペースを削除する処理を入れてみたのですが、先述のAPIドキュメントのWOVN.io.triggerAudit() の説明にある通り、時間経過等で処理前のテキストに戻ってしまうため、意味がありませんでした。
解決方法としては、公式ヘルプセンターの通り手動で内容の調整をするか、HTMLおよびCSSを調整してゼロ幅スペースが挿入されても問題ないようにするか、のいずれかになると思います（私は後者で対応しました）。
【公式ヘルプセンターの記事】
https://support.wovn.io/hc/ja/articles/360045271371
【WOVN.io.triggerAudit()】
https://support.wovn.io/hc/ja/articles/360007718372#wovniotriggeraudit
独自言語切替ウィジェットを設置する場合、WOVN.io.manualStart()で確実に機能するようにする
WOVNが発行するscriptにはasync属性が付いており、そのまま貼り付けるとそのscriptの読み込みが完了するタイミングは不定です。
そして、独自言語切替ウィジェットのHTMLが読まれる前にWOVNのscriptの読み込みが完了してしまうと、ウィジェットが機能しません（公式の推奨通りhead内にscriptを設置すると、そうなることがあります）。
そこで、wovnApiReadyのタイミングでWOVN.io.manualStart()を実行する記述を追加することで、読み込みが前後した場合も確実にウィジェットを機能させるようにしました。
【HTML ソースへの WOVN スクリプト挿入】
https://support.wovn.io/hc/ja/articles/360007707672
【独自言語切替ウィジェットについて】
https://support.wovn.io/hc/ja/articles/17472484591385
【WOVN.io.manualStart()】
https://support.wovn.io/hc/ja/articles/360007718372#wovniomanualstart
以上です。
WOVNを導入される際は、参考にしていただければ幸いです。
