STUDIOのカルーセル・スライドショー自動再生の実装方法と注意点

STUDIOのカイゼンにより、純正機能でスライドショーの自動再生に対応🎉

（2023/04/30追記）

以前まではGTMを連携させて、GTMによる動作で再生ボタンを強制的にクリックさせることによって擬似的な自動再生スライドショーを実現することしかできませんでしたが、2023/1/30でのSTUDIOのアップデートにより、純正機能でスライドショーの自動再生機能が可能になりました！

詳細は下記の公式記事をご確認ください。

待望の機能アップデート。STUDIOカルーセルで自動再生が設定可能に！ | STUDIO Blog

自動再生機能の追加に加え、アクセシビリティを考慮した新カルーセルをご紹介します！

blog.studio.design

待望の機能アップデート。STUDIOカルーセルで自動再生が設定可能に！ | STUDIO Blog

カルーセルの自動再生はどのように設定できますか？ | STUDIO U

help.studio.design

本記事は旧来の方法、GTMを利用した強制クリックによる方法を解説していますが、上記のようにSTUDIOスライドショー自動再生のためにGTM連携は不要です。

ワンクリックで新カルーセルブロックへ自動変換する際の注意（CMSを利用しない場合）

また、以前にGTM + Studio CMSでスライドショーを実現させていた方は、ワンクリックで新しい形式のカルーセルブロックへ変換させることが可能です。

ただし、この方式の場合はStudio CMSを利用する形となり、STUDIO新プランであるStarterプラン（有料の最安プラン）においてはCMSを利用することができなくなりました。

そのため、STUDIOのStarterプランで自動カルーセルを使い続けたい場合には、ワンクリックによる自動変換ではなく、新しくカルーセルブロックを設置して、カルーセル設定の「カルーセルリスト」から自動スライドショーの画像を設置していきましょう。

参考: カルーセル（リスト） | STUDIO U

GTM連携による強制クリックによるスライドショー実装について

しかし、「GTMを連携させればこのような強制クリックのようなイベントを発生させることができる」一例として本記事を残しておきます！GTMを知ることで出来ることが増えるはず。

GTMを利用してクリックイベントを発生させる際に、よくある詰まるポイントのご確認としてもご活用いただけます。

ご興味のある方はぜひ続く内容をチェックしてみてください。

STUDIOのカイゼンにより、純正機能でスライドショーの自動再生に対応🎉
ワンクリックで新カルーセルブロックへ自動変換する際の注意（CMSを利用しない場合）
GTM連携による強制クリックによるスライドショー実装について
STUDIOで自動カルーセル・スライドショーを実装する仕組み
Google Tag Managerが正しく設置され、発火しているか
ScriptタグとしてカスタムHTMLに記述する
タグを正しく発火させるために、トリガーの種類を変更する
トリガーの新規作成: DOM Ready
タグに作成したトリガーを紐付け、タグ詳細設定も変更
STUDIOデザインエディタ上の注意点
文字は固定、カルーセル写真のみスライドさせるには「絶対位置」でボックス位置を指定
成果をだすWebサイト制作、企画・戦略から伴走するWeb制作を実施しています

ノーコードのWeb制作ツールであるSTUDIOでは、多彩なアニメーションをかんたんに実装することができます。スライドショーブロックを利用すればスライドショー・カルーセルも実装可能なのですが、そのスライドショーを「自動再生」させるには標準では不可で、実装するにはGTM(Google Tag Manager)を利用した工夫が必要です。

STUDIOのアニメーションについて参考: STUDIOで基本となる2種類のアニメーション。実装・設定方法を公式動画から解説 | 魔法使いのWebマーケティング

そこで、STUDIO専門の制作プランを立ち上げている有名なWebデザインファームのgaz様の記事「STUDIOのCMSカルーセルで自動再生させる方法」を参考に、STUDIOにおけるカルーセル（スライドショー）mの自動再生を試みました。

STUDIOのCMSカルーセルで自動再生させる方法

今回は3.0で新しく実装されたCMS機能の中のカルーセル（記事スライダー）の自動アニメーションの方法をまとめたいと思います。

studio-gaz.design

おおよその設定自体は上記gaz様の記事に沿って実施すると完了しますが、実際の挙動をみると上手くカルーセルが自動で動いてくれません。

そこで、上記記事を補足する形で「STUDIOのカルーセル・スライドショー自動再生における注意点」をお伝えいたします。

基本的な設置方法・カルーセル設置方法については上記gaz様の記事をご参照ください。

STUDIOで自動カルーセル・スライドショーを実装する仕組み

まず、紹介されている方法の流れについておさらい。

Google Tag Manager（GTM）を設置し、GTMでJavaScriptタグを設置。 JavaScriptによるブラウザ挙動でカルーセルの送りボタンを一定間隔でクリックさせる。

このJavaScriptで送りボタンを自動クリックさせることにより、あたかも自動的にカルーセルがスライドしているような挙動を実装します。

GTMについて参考: STUDIO上でGoogle広告からのコンバージョンを計測。Googleタグマネージャー(GTM)活用 | 魔法使いのWebマーケティング

上記が上手くいくかどうかは以下の点がポイントとなります。

GTMタグが正しく設置され、発火しているか
JavaScriptによる挙動でクリック可能なデザイン状態となっているか

以下よりそれぞれ詳細を述べていきます。

Google Tag Managerが正しく設置され、発火しているか

ScriptタグとしてカスタムHTMLに記述する

STUDIOのCMSカルーセルで自動再生させる方法 | 株式会社gaz の記事では、クリックさせるスクリプトが紹介されています。下記コードをGTMにおけるカスタムHTMLとして記述。

window.onload = function(){
  //秒毎に関数「ClickSlide()」を呼び出す
  setInterval("ClickSlide()", 1000);
}

//クリックする関数
function ClickSlide(){
var element = document.getElementById( "right-btn" ) ;
element.click() ;
}

カスタムHTMLは、bodyタグ内の最下部(</body>の直前)に記載したHTMLを埋め込むGTMの機能です。

したがって、当然ではありますがHTMLとして記載されるため、上記コードをJavaScriptとして認識させるには<script>タグを最初と最後に記載する必要があります。

<script> // script開始タグを追加
window.onload = function(){
  setInterval("ClickSlide()", 1000);
}

function ClickSlide(){
var element = document.getElementById( "right-btn" ) ;
element.click() ;
}
// script閉じタグを追加
</script>