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
             });
          }

       });
   });
})();

Leave a Comment

Your email address will not be published. Required fields are marked *

Contact Us

Please contact us for expert guidance & personalized solutions to maximizing the potential of Google Analytics for your business.

Send Us A Message