Scraping information from a script tag using Javascript

Question

I'm trying to scrape information that is within a script tag on a webpage. I've figured out how to get at the information, but I can't figure out how to manipulate it into a data object.

I'm able to get at the information using document.querySelector(x).innerHTML. Here is the innerHTML that appears (the first part doesn't seem to be formatting as code here).

" Y = YUI(YUI_CONFIG).use( 'squarespace-commerce-analytics',

function(Y) {
  Y.on('domready', function() {
    Y.Squarespace.CommerceAnalytics.checkoutConfirmed({'id':'12345676','orderNumber':'00065','websiteId':'12345678','purchasedCartId':'1234567','testMode':true,'grandTotal':{'currencyCode':'USD','value':3239,'decimalValue':'32.39','fractionalDigits':2},'grandTotalFormatted':'$32.39','subtotal':{'currencyCode':'USD','value':2300,'decimalValue':'23.00','fractionalDigits':2},'subtotalFormatted':'$23.00','taxTotal':{'currencyCode':'USD','value':204,'decimalValue':'2.04','fractionalDigits':2},'taxTotalFormatted':'$2.04','shippingTotal':{'currencyCode':'USD','value':735,'decimalValue':'7.35','fractionalDigits':2},'shippingTotalFormatted':'$7.35','billingDetails':{'customer':{'address':{'city':'New York','region':'NY','country':'United States'}}},'items':[{'sku':'123456','productName':'This is a Product','unitPrice':{'currencyCode':'USD','value':2300,'decimalValue':'23.00','fractionalDigits':2},'quantity':1}]});
  });
});

"

This code shows the innerHTML that I'm getting, and I want each of the data items (id, orderNumber, productName etc.) to be formatted into an object so that I can track ecommerce better using GTM. I'm not sure how to manipulate it in a way that I need

CertainPerformance · Accepted Answer · 2019-09-22 21:52:58Z

1

If you replace all the 's with "s, this will be JSON that you can parse, so if you use a regular expression to match checkoutConfirmed to the );, you can extract the almost-JSON, turn it into JSON, and then parse it:

const html = document.querySelector('script[type="dontexecute"]').innerHTML;
const singleQuotedJSON = html.match(/checkoutConfirmed\((.+?)\);/)[1];
const actualJSON = singleQuotedJSON.replace(/'/g, '"');
const obj = JSON.parse(actualJSON);
console.log(obj);

<script type="dontexecute">Y = YUI(YUI_CONFIG).use(
    'squarespace-commerce-analytics',

    function(Y) {
      Y.on('domready', function() {
        Y.Squarespace.CommerceAnalytics.checkoutConfirmed({'id':'12345676','orderNumber':'00065','websiteId':'12345678','purchasedCartId':'1234567','testMode':true,'grandTotal':{'currencyCode':'USD','value':3239,'decimalValue':'32.39','fractionalDigits':2},'grandTotalFormatted':'$32.39','subtotal':{'currencyCode':'USD','value':2300,'decimalValue':'23.00','fractionalDigits':2},'subtotalFormatted':'$23.00','taxTotal':{'currencyCode':'USD','value':204,'decimalValue':'2.04','fractionalDigits':2},'taxTotalFormatted':'$2.04','shippingTotal':{'currencyCode':'USD','value':735,'decimalValue':'7.35','fractionalDigits':2},'shippingTotalFormatted':'$7.35','billingDetails':{'customer':{'address':{'city':'New York','region':'NY','country':'United States'}}},'items':[{'sku':'123456','productName':'This is a Product','unitPrice':{'currencyCode':'USD','value':2300,'decimalValue':'23.00','fractionalDigits':2},'quantity':1}]});
      });
    });</script>

Now that you have a well-formed object, you can manipulate it however you want. Eg, to extract the orderNumber, reference obj.orderNumber:

const html = document.querySelector('script[type="dontexecute"]').innerHTML;
const singleQuotedJSON = html.match(/checkoutConfirmed\((.+?)\);/)[1];
const actualJSON = singleQuotedJSON.replace(/'/g, '"');
const obj = JSON.parse(actualJSON);
console.log(obj.orderNumber);

<script type="dontexecute">Y = YUI(YUI_CONFIG).use(
    'squarespace-commerce-analytics',

    function(Y) {
      Y.on('domready', function() {
        Y.Squarespace.CommerceAnalytics.checkoutConfirmed({'id':'12345676','orderNumber':'00065','websiteId':'12345678','purchasedCartId':'1234567','testMode':true,'grandTotal':{'currencyCode':'USD','value':3239,'decimalValue':'32.39','fractionalDigits':2},'grandTotalFormatted':'$32.39','subtotal':{'currencyCode':'USD','value':2300,'decimalValue':'23.00','fractionalDigits':2},'subtotalFormatted':'$23.00','taxTotal':{'currencyCode':'USD','value':204,'decimalValue':'2.04','fractionalDigits':2},'taxTotalFormatted':'$2.04','shippingTotal':{'currencyCode':'USD','value':735,'decimalValue':'7.35','fractionalDigits':2},'shippingTotalFormatted':'$7.35','billingDetails':{'customer':{'address':{'city':'New York','region':'NY','country':'United States'}}},'items':[{'sku':'123456','productName':'This is a Product','unitPrice':{'currencyCode':'USD','value':2300,'decimalValue':'23.00','fractionalDigits':2},'quantity':1}]});
      });
    });</script>

answered Sep 22, 2019 at 21:52

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

George Over a year ago

Hey thanks so much! This looks like its close, but there are a couple of things. First, when I console.log(actualJSON) I'm not seeing the double quotes in the console. Second, it looks like the Object might be formatted weird? I'm not sure. The customer information doesn't seem to be outputting, and when I try obj.sku, its undefined.

CertainPerformance Over a year ago

I copied the code to be scraped directly from your question - if the output you're getting is not the same as when you press "Run code snippet" in the answer above, then the code on the actual site must be different from what you've posted..?

George Over a year ago

I thought about that, but even when I copied your <script> tag as the HTML that I'm pulling, codePen still seems to format the Object differently than your answer above. I'll see if I can add the output to my question.

CertainPerformance Over a year ago

If you link me to the codepen I can take a look at it too, see what might be causing the discrepancy

CertainPerformance Over a year ago

Looks the same to me. Codepen's custom console is different from Stack Snippets' custom console, but the logged object is still fundamentally the same, they're just presented differently. Examine the logged objects in the browser console, and they should be identical

Mike Young · Accepted Answer · 2020-11-18 04:36:17Z

0

Hi developer arriving from a Google search! CertainPerformance's answer is the best answer for general scraping, but if all you care about is getting this particular Squarespace order detail information on a given Order Confirmation page, here's the fast track to the object you want:

Y.Squarespace.CommerceAnalytics._yuievt.events["commerceTrack:commerce-checkout-confirmed"].details[0]

Have fun! =)

answered Nov 18, 2020 at 4:36

Mike Young

11 bronze badge

Collectives™ on Stack Overflow

Scraping information from a script tag using Javascript

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related