STUDIOでカルーセルやアコーディオンをGTAG経由で実現するCSS&JS

miyapon

GTM「カスタムHTML」でHTML,CSS,JSを入れられる。

STUDIOではidを指定できるので、そこを起点にJSやCSSを適用していく形。

ハマったのでメモ。

そもそもSTUDIOのページを公開しないとGTMのタグが発火しない
GTM不慣れだった。タグを「公開」せず「プレビュー」でデバッグできる
GTMの権限がないと「効果」できずバージョン作成までしかできない
カスタムHTMLに使えるJSは、ES6非対応。constやアロー関数などは使えない。
~~getElementByIdでDOM触るときは、window.onloadとsetTimeoutを組み合わせると良い感じだった。 DOMContentLoaded だとダメだった。~~

miyapon

CMSを組み込むと読み込み完了がさらに遅延するので、
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;
}

miyapon

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);
      }
    }

miyapon

アコーディオンはJSではなく、チェックボックスとCSSで実現した方が挙動が安定しそう

このスクラップは2024/03/29にクローズされました