見出し画像

STUDIOでのリダイレクト

STUDIOでは実装されていないリダイレクトの設定方法をご案内します。
今後、実装されるのかもしれませんが…

STUDIOでのリダイレクトを実現する為にGTM(Google Tag Manager)を使います。STUDIOとの連携については「Googleタグマネージャーの連携方法 | STUIO U」をご覧下さい。

まず「トリガー」の設定です。その名の通り「引き金」です。
今回のリダイレクトの設定においてのトリガーは
「STUDIOのどのページでリダイレクトをかけたいか」を指定するものです。

画像1

1:トリガーの名前(画像左上)はなんでも良いのですが、ここでは「ページ判定TEST」という名前にしています。
2:トリガーのタイプは「ページビュー - ウィンドウの読み込み」です。
3:「すべてのウィンドウの読み込みイベント」にしてしまうと、すべてのページでリダイレクトをかけることになるので「一部のウィンドウの読み込みイベント」を選びます。
4:イベントの変数を指定します。Page URLでもリダイレクトは可能ですが、今回は「Page Path」※にてご案内します。
※Page Pathが一覧に無い場合は「組み込み変数を選択します…」をクリックし「Page Pathを見つけて有効にチェックを入れて下さい。」

画像2

5:条件としては「先頭が一致」を選び、STUDIOでリダイレクトをかけたいページのパスを入力します。(例では「/test」としてあります。)
条件を「等しい」にしてもリダイレクトは可能なんですが、以下の違いによりリダイレクトが効かないケースがあります。

www.example.com/test(リダイレクトされる)
www.example.com/test/(リダイレクトされない)

一見すると違いが分かりにくいかもしれませんが、末尾に「/」が付いています。
どちらも同じページにはアクセスできるのですが条件で「先頭が一致」ではなく「等しい」にしている以上「/test/」でアクセスされた場合はリダイレクトが実行されなくなります。

ただ、お気付きかと思いますが「先頭が一致」にすれば「/test1」でも「/test2」でもリダイレクトが効いてしまうのでリダイレクトをかけたいページのパス設定には今後も注意が必要となります。
ちなみにトップページをリダイレクトをかけたい場合は
「 Page Path 等しい  / 」で指定すれば良いかと思います。

続いて「タグ」を設定します。
トリガーを条件に発動する内容を設定するものです。

画像3

6:タグの名前も何でも良いのですが、ここでは「リダイレクト TEST」にしています。
7:タグの種類は「カスタムHTML」を選びます。
8:記述としてはJavaScriptで書いています。

<script type="text/javascript">
<!--
setTimeout("link()"1000);
function link(){
location.href='https://example.com/';
}
-->
</script>

適宜変更して頂きたい箇所が2つあります。
まず、setTimeoutの行はページが表示されてから何秒後にリダイレクトが実行されるかを設定しています。ミリ秒で指定しますので、
500なら0.5秒
1000なら1秒
10000なら10秒

という事になります。
次に、location.hrefの行では「https://example.com/」となっている部分を実際にリダイレクトしたいURLに変更して下さい。

画像4

9:一番下にあるトリガーは先ほど設定したトリガーを指定して終わりです。

設定としては以上ですが、最後に右上にある「公開」を押す事をお忘れなく。公開を押すと、どのようなタグを公開するのか記録するための「バージョン名」入力を求められますがスキップする事も可能です。

この記事が気に入ったらサポートをしてみませんか?