Elementor Pricing Table Tracking with Google Tag Manager

The price table widget in Elementor’s page builder is great. But, tracking the right package names and prices can be tough because all the buttons in the pricing table share the same CSS class and selector. That’s why I created this tutorial. If you follow it, you’ll learn how to track not just Elementor’s pricing table but any pricing table using Google Tag Manager.

Elementor Pricing Table Tracking GTM DataLayer Code

/**
* Author: Md Hasanuzzamna
* Linkedin: https://linkedin.com/in/md-h
* Youtube: https://youtube.com/@leomeasure
* Email: info@leomeasure.com
*/

(function() {
   var buttons = document.querySelectorAll('.elementor-price-table .elementor-price-table__button');
   buttons.forEach(function(button) {
       button.addEventListener('click', function() {
          var table = this.closest('.elementor-price-table');

          if(table) {
             var packageName = table.querySelector('.elementor-price-table__heading').innerText;
             var price = +(table.querySelector('.elementor-price-table__integer-part').innerText);

             window.dataLayer = window.dataLayer || [];
             dataLayer.push({
               event: 'select_package',
               package: packageName,
               price: price
             });
          }

       });
   });
})();