Same variables in different '<script>' tags without them clashing?

Question 1

If you can change you script body, just wrap your code to an anonymous function and call it immediately. Also, you need to use var keyword to limit variable scope.

<script>
  (function() {

      var ad = document.getElementById('article-footer-ad');

      // your code here ...

  })(); // <-- this is an immediate call
</script>

Also, if code in every block is the same, consider refactoring it to a single function and use in other code blocks

<script>
    // Common function

    function renderAd(adId) {

        var ad = document.getElementById(adId);

    }
</script>
...
<script>
    renderAd('sidebar1-ad');
</script>
...
<script>
    renderAd('article-footer-ad');
</script>

Question 2

<html>
<head>
<script type="text/javascript">
(function()
{
    var ad = document.getElementById('sidebar1-ad');

    if (ad.getBoundingClientRect().width) {
        var adWidth = ad.getBoundingClientRect().width;
    } else {
        var adWidth = ad.offsetWidth;
    }

    ...
})();
</script>

<script type="text/javascript">
(function()
{
    var ad = document.getElementById('article-footer-ad');

    if (ad.getBoundingClientRect().width) {
        var adWidth = ad.getBoundingClientRect().width;
    } else {
        var adWidth = ad.offsetWidth;
    }

    ...
})();
</script>

...