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 にコードを入れるスクリプト -->

解説

１）お問い合わせエリアに

お問い合わせを入れたい部分に<div class="cta"></div>を入れる

２）表示させるお問い合わせのコード

// ココから // ココまで の間に書き換えたいHTMLを置く

ポイントは<script id="cta_code" type="text/html">の部分
type="text/html"で、表には表示させないように。

（<div id="cta_code" style="display:none">でも動くと思うけど、どちらでも）

３）.cta にコードを入れるスクリプト

Array.forEach()を使いたい
IE11でも動くようにしたい

ということからArray.prototype.slice.call()を使うことに

参考サイト：IEで NodeList を forEach するとエラーになる問題の対処方

解決　

これで、今後に更新があっても、１箇所だけの修正で対応できます

↑　レンダリングされたあとは冒頭のLP/index.html：beforeと同じソースになってる