Getting Data from Page with JavaScript for Google Tag Manager

25 March 2022 Mert Kocakaya 0 Comment

Greetings everyone. Under this title, I will share the method of extracting data from the page with JavaScript, which will enable us to learn which product the Google Adwords users need most, those who are engaged in e-commerce business, the user who comes with Adwords after the product sale, and how many are sold. Especially by adding it to your Google Tag Manager panel, you can easily get the data you want from any page.

How Do I Pull Data From A Page?

First of all, as you know, there is a "thank you" page after product sales or reservation / appointment forms to ensure the healthiest data flow. On this page, some sites only say that your order has been received / your appointment has been made, while some companies contain a lot of information after the transaction. First of all, there must be a page that is redirected after the transaction. If this page does not exist and all transactions are performed with Ajax, at this point, the product and price information purchased with the "GET" method can be sent to the URL, but since it will be very difficult to process this data and display it in Tag Manager, the most reliable method; It is a result page after the process.

How to Get Data from Results Page?

Let's say you have an e-commerce company that you serve, or in your own e-commerce company, you want to calculate how many people return from the AdWords and Social Media ads you publish, which product they buy, and how much sales you make in total. For this, there are some elements that should be included in your post-process results page:

  • Information of the person who made the Purchase / Reservation process,
  • Purchased Product / Reserved Service information,
  • Purchased Product / Reserved Service price information

These three data are the data that will enable us to perform the most clear and healthy data analysis. This data must be included in your "Result / Thank You" page. Now let's go through a live example and better understand what we are trying to do.

JavaScript Data Code Practice for Tag Manager

Let's say we have an e-commerce company and we sell clothing products on our company's e-commerce site. We have recently started to publish ads with AdWords and I want to receive and evaluate the returns from the sales of our company with Google Tag Manager. After the product sale, if the sale / payment is successful, I direct the user to a thank you page like this:

tag manager thanks page

Now suppose we have such a thank you page. My page with product and user information after the user purchases the product. I want to pull both the product information, the purchaser and the price to Tag Manager from this page. For this, what we need to do first is right click on the page and say > inspect/inspect element. When we do this, we will see the id/class names of the parts we want to get in the page source codes as follows.

tag manager js data receive

When I review my page source, I see:

  • Id of Product Name: urunadi
  • Product Code Id: uruncode
  • Id of Product Price: product price
  • Id of Customer Information: purchased

It's time to get the information in these ids from the page with JavaScript. Let's start creating our js tracking code that we added to Google Tag Manager!

var urunadi = document.getElementById('urunadi').textContent; 

var urunkodu = document.getElementById('urunkodu').textContent;

var urunfiyati = document.getElementById('urunfiyati').textContent;

var satinalankisi = document.getElementById('satinalankisi').textContent;

console.log(urunadi, urunkodu, urunfiyati, satinalankisi);

Here, first of all, I opened 4 different objects named product name, product code, product price and purchase, and for each object I said: Bring the information written in the text field of the element with the "ID". For example: fetch the textContent of the urunadi id. Then I printed the data it brought for the test to the page source with the console.log() command. To learn how to use console.log(), you can read our article on how to use console.log() «. Now let's get our check:

tag manager product info pull

Wonderful! I have successfully received all the information I wanted to receive! Now I can successfully manage my Tag Manager and Adwords by getting the data I want from the page I want! You can ask anything you can think of under this heading. We wish you good work! :)