概要
WOVN をスクリプト方式で導入している場合、WOVN スクリプトを Google タグマネージャーで管理できます。
インフォメーション
Google タグマネージャーのスクリーンショット、手順は最新の UI と異なる場合がございます。タグマネージャー側の操作については Google へお問い合わせください。
Google タグマネージャーは Adblock などの広告ブロック機能によってブロックされるケースがあります。
この場合、広告ブロック機能を利用しているユーザーの環境では WOVN スクリプトも挿入されず、言語切替機能が利用できません。独自言語切替ウィジェット機能と併用している場合、反応しない言語切替ウィジェットが表示されてしまうため、広告ブロック機能の動作を検知して対処するか、WOVNスクリプトをHTMLファイルに直接挿入する方法をご検討ください。
目次
タグテンプレートを利用して WOVN スクリプトを登録する
Google タグマネージャーに、 WOVN スクリプトのテンプレート（コミュニティテンプレート）が登録されています。テンプレートを利用すると、よりスムーズに WOVN を導入できます。※2020 年 2 月から、タグテンプレートが公開されました。
設定手順
-
WOVN 管理画面にログインします。
-
ログイン画面でユーザー情報を入力し、ログインします。
- 対象プロジェクトをクリックします。
-
「概要」>「ステータス」をクリックします。
- 画面上部にある「プロジェクトトークン」をコピーします。
- Google タグマネージャーにログインします。
- 「テンプレート」メニューから「WOVN.io Javascript Widget」を検索し追加します。
-
WOVN 管理画面から取得した「Project Token」を入力し「保存」をクリックします。
-
「トリガーの選択」をクリックし、トリガーを選択します。（例ではAll Pages）
-
画面右上の「保存」ボタンをクリックします。
-
画面右上の「公開」ボタンをクリックします。
インフォメーション
すでに Google タグマネージャーの「カスタム HTML タグ」で WOVN スクリプトを導入済みでも、 正常に WOVN が動作しない場合は「タグテンプレート」方式への移行を推奨します。 ブラウザや OS によっては、 「カスタム HTML タグ」方式だと WOVN が動作しない事象が確認されています。
カスタム HTML で WOVN スクリプトを登録する
タグテンプレートを利用せず、カスタム HTML として登録する従来の手順は以下となります。
設定手順
- Google タグマネージャーにログインします。
- 「タグ」→「新規」を選択します。
- 「タグの設定」をクリックし、タグタイプから「カスタム HTML」を選択します。
- WOVN 管理画面にログインします。ログインボタンをクリックしてください。
- ログイン画面でユーザー情報を入力し、ログインします。
- 対象プロジェクトの「…」をクリックします。
-
「コードスニペット」をクリックします。
-
「Javascript スニペット」を選択します。
-
コードをコピーします。
-
Googleタグマネージャーに戻り、「カスタムHTML」項目にコピーしたコードスニペットを貼り付けます。 その後、下記のように修正してください。
<script src="//j.wovn.io/1" data-wovnio="key=AbCDee” async></script>
↓
<script>
var script = document.createElement('script')
script.src = '//j.wovn.io/1'
script.setAttribute('data-wovnio', 'key=AbCDee')
script.async = true
document.head.appendChild(script)
</script>
11. 「トリガーの選択」をクリックし、トリガーを選択します。（例ではAll Pages）
12. 画面右上の「保存」ボタンをクリックします。
13. 画面右上の「公開」ボタンをクリックします。