Closed4
STUDIOでカルーセルやアコーディオンをGTAG経由で実現するCSS&JS
miyaponGTM「カスタムHTML」でHTML,CSS,JSを入れられる。
STUDIOではidを指定できるので、そこを起点にJSやCSSを適用していく形。
ハマったのでメモ。
- そもそもSTUDIOのページを公開しないとGTMのタグが発火しない
- GTM不慣れだった。タグを「公開」せず「プレビュー」でデバッグできる
- GTMの権限がないと「効果」できずバージョン作成までしかできない
- カスタムHTMLに使えるJSは、ES6非対応。constやアロー関数などは使えない。
getElementByIdでDOM触るときは、window.onloadとsetTimeoutを組み合わせると良い感じだった。DOMContentLoadedだとダメだった。
miyaponCMSを組み込むと読み込み完了がさらに遅延するので、
setTimeoutよりもsetIntervalの方が確実だった。
実装したのは３つ。
- カルーセルの自動スライド
- アコーディオン
- 画像の無限スライダー ※CSSのみ
CSSは !important 使わないと上書きできないので必須。
(function () {
window.onload = function () {
// カルーセル自動スライド
setInterval(function () {
var slideRightButton = document.getElementById("slide-right-button");
slideRightButton.click();
}, 3000);
// アコーディオン
var set_interval_id = setInterval(findAccordion, 1000);
function findAccordion() {
var accordions = document.getElementById("accordions").children;
if (accordions.length > 0) {
Array.from(accordions).forEach(function (accordion) {
var header = accordion.firstElementChild;
var content = header.nextElementSibling;
header.addEventListener("click", function () {
accordion.classList.toggle("js-accordion-active");
content.classList.toggle("js-accordion-open");
});
});
clearInterval(set_interval_id);
}
}
};
})();
/* 画像の無限スライドショー */
@keyframes sliderAnimation {
100% {
transform: translateX(-50%);
}
}
#infinite-slide {
min-width: 100%;
width: min-content;
animation: 20s linear infinite sliderAnimation;
}
/* アコーディオン */
#accordions > div > div:first-child {
cursor: pointer;
user-select: none;
}
#accordions > div > div:last-child {
display: none !important;
}
.js-accordion-active {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
.js-accordion-active > div:first-child > i:last-child {
transform: rotate(180deg);
}
#accordions > div > div.js-accordion-open {
display: block !important;
}
GTMのトリガーがpageviewではダメで、onloadトリガーを選ぶ必要あり。
そのためJSからwindows.onloadを消す。
// カルーセル自動スライド
setInterval(function () {
var slideRightButton = document.getElementById("slide-right-button");
slideRightButton.click();
}, 3000);
// アコーディオン
var set_interval_id = setInterval(findAccordion, 1000);
function findAccordion() {
var accordions = document.getElementById("accordions").children;
if (accordions.length > 0) {
Array.from(accordions).forEach(function (accordion) {
var header = accordion.firstElementChild;
var content = header.nextElementSibling;
header.addEventListener("click", function () {
accordion.classList.toggle("js-accordion-active");
content.classList.toggle("js-accordion-open");
});
});
clearInterval(set_interval_id);
}
}
アコーディオンはJSではなく、チェックボックスとCSSで実現した方が挙動が安定しそう
このスクラップは1ヶ月前にクローズされました