如何使用JS刮取页面并将变量推入GTM数据层

$("#theList li").each(function() {
  
  var $this=$(this);
  scrapeProductName=$this.find('.name').text();
  scrapeProductPrice=$this.find('.price').text();
  scrapeProductQuantity=$this.find('.quantity').text();
  
  console.log('product: ' +  scrapeProductName + '; price: ' + scrapeProductPrice + '; quantity: ' + scrapeProductQuantity);
  
});

dataLayer = [];

dataLayer.push( {
  'ecommerce': {
    'purchase': {
      'actionField': {
        'id': '11111111', 'revenue': '999.99'
      },
      'products': [
      
      // start product list
      
      {
        'name': scrapeProductName,
        'price': scrapeProductPrice,
        'quantity': scrapeProductQuantity
      }
      
      // end product list
      
      ]
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul id="theList">
  <li>
    <div class="name">banana</div>
    <div class="price">1.00</div>
    <div class="quantity">3</div>
  </li>
  <li>
    <div class="name">apple</div>
    <div class="price">2.00</div>
    <div class="quantity">5</div>
  </li>
  <li>
    <div class="name">pear</div>
    <div class="price">3.50</div>
    <div class="quantity">1</div>
  </li>
</ul>