STUDIOのカルーセルにインジケーターをつける

環境

• STUDIO(Starter以上)
• GoogleTagManager

経緯

STUDIOでLPを作っていてインジケーター付きのカルーセルを実装する必要があったのですが、
2023/1/25時点でまだインジケーターが未実装だったため、GoogleTagManager（以下タグマネ）でつけました。

実装

流れとしては以下になります。
※タグマネの導入は省きます

1. STUDIOのカルーセルを設置
2. インジケーターをボックスなどで設置
   1. インジケーターは地道に自作します
3. 1のulとインジケーターにJS用のidを付与
   1. STUDIOの右側の設定にあるIDから付与します
4. タグマネのカスタムHTMLにJavaScriptを記述
   1. STUDIOの方が公開されていればプレビューできる
5. カスタムHTMLを公開

JSの方はこちらを参考にさせていただきました
scrollIntoViewを使ったカルーセル：
https://zenn.dev/phi/articles/modern-javascript-css-carousel
インジケーターとの連動：
https://blog.ver001.com/javascript-slider-thumbs/

注意点

今回STUDIOやタグマネ使うのが初めてだったため色々ハマりました。

• STUDIOが公開されていないとタグマネのプレビューで確認できない
• カルーセル（リスト）のアイテムには個別でidをつけられない（アイテム全部に同じidがついてしまう）
• タグマネではJSのconst、let、アロー関数などは非対応