More than 3 years have passed since last update.

乱出するCTAリンクの更新にイライラしているLP更新者の方への提案

Last updated at 2020-05-20Posted at 2020-05-20

#LPあるある
１ページ中に同じお問い合わせエリア（CTAボタンやら電話番号やら）が複数回でてくる

例えばこんな感じ

LP/index.html：before

<body>
  <section id="sec1">
    <div><p>内容１</p></div>
  </section>
  <div class="cta">
    <div class="tel">
      <a href="tel:0123456789">0123-45-6789</a>
    </div>
    <div class="link">
      <a href="//google.com"><div class="button">お問い合わせはこちら</div></a>
    </div>
  </div>
  <section id="sec2">
    <div><p>内容２</p></div>
  </section>
  <div class="cta">
    <div class="tel">
      <a href="tel:0123456789">0123-45-6789</a>
    </div>
    <div class="link">
      <a href="//google.com"><div class="button">お問い合わせはこちら</div></a>
    </div>
  </div>
  <section id="sec3">
    <div><p>内容３</p></div>
  </section>
  <div class="cta">
    <div class="tel">
      <a href="tel:0123456789">0123-45-6789</a>
    </div>
    <div class="link">
      <a href="//google.com"><div class="button">お問い合わせはこちら</div></a>
    </div>
  </div>
</body>

「どんだけ、お問い合わせエリアで場所とってんねん」って気分になる
視認性も良くない

さらに「計測用のクリックイベントを追加して」「電話番号が変わりました」なんて修正依頼もあったり...

いちいち検索して手作業もたいへんだし
エディタで一括置換もできるけど、本当にちゃんと出来てるかも不安だし...

なんとか１箇所の変更で済むようにしたい（一括編集したい）

JSに頼ろう

こんな感じにして解決　（JavaScript で HTML を書き換え）

LP/index.html：after

<body>
  <section id="sec1">
    <div><p>内容１</p></div>
  </section>
  <div class="cta"></div> <!-- ← ココにお問い合わせ表示 -->
  <section id="sec2">
    <div><p>内容２</p></div>
  </section>
  <div class="cta"></div> <!-- ← ココにお問い合わせ表示 -->
  <section id="sec3">
    <div><p>内容３</p></div>
  </section>
  <div class="cta"></div> <!-- ← ココにお問い合わせ表示 -->
</body>

<!-- 表示させるお問い合わせのコード -->
<script id="cta_code" type="text/html">
  // ココから
  <div class="tel">
    <a href="tel:0123456789">0123-45-6789</a>
  </div>
  <div class="link">
    <a href="//google.com"><div class="button">お問い合わせはこちら</div></a>
  </div>
  // ココまで
</script>
<!-- END 表示させるお問い合わせのコード -->

<!-- .cta にコードを入れるスクリプト -->
<script type="text/javascript">
  var code = document.getElementById("cta_code").innerHTML; // 上記の「表示させるお問い合わせのコード」がつまった #cta_code を格納
  var cta = document.querySelectorAll(".cta"); // ソース中から .cta を見つけて格納
  var arr = Array.prototype.slice.call(cta); // forEach が使えるように配列に
  arr.forEach(function (e) {
    e.innerHTML = code; // 入れ替え実施
  });
</script>
<!-- END .cta にコードを入れるスクリプト -->