Track important events using Google Tag Manager.

🚨

This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.

Step 1. Use Unbounce’s Script Manager to add Google Tag Manager’s script

Step 2. Use Unbounce’s Script Manager to add Google Analytics’ script

Step 3. Configure GTM:

3.1 Enable important variables

By enabling these variables we can then see a variables value once an event is triggered. It was not needed for this demonstration but it is good practice to do so in case a user would want to create another event using a variable’s value. A variable’s value can be seen in the preview and debug mode.

3.2 Create a conversion linker tag

Conversion linker tags are used to help tags measure click data so that conversions are measured effectively.

Step 4: Define a custom event called “click to purchase”

The point of the code was so that we can create an event when someone clicks on the “add to cart” button. The “add to cart” button is in an HTML element, which means GTM can’t identify it as a button. We edit the script so an event would trigger.

4.1 Copy paste the following script as a new Javascript Script:

<!-- jQuery -->

<script type="textjavascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Script -->

<script type="text/javascript">

  function fireEvent() {

    // Wait a second for button to initiate.

    setTimeout(function() {      

      // Get div id.

      var divId = "product-component-1568916154933-a"; // Replace this with your own shopify div id.

      

      // Get button iframe.

      var iframe = $("#" + divId).children().contents();



      // Find shopify button and bind click action.

      iframe.find(".shopify-buy__btn").click(function(){

        // Create analytics object.

        var dataObject = {

          'event': 'click to purchase', // Modify the event name here.

          'category': 'click',

          'label': 'label_click_to_purchase', // Modify the event label here.

        };

        

        // Check if analytics is enabled.

        if(typeof dataLayer != 'undefined'){

          dataLayer.push(dataObject);

        }

      });

    }, 3000);

  }

  

  fireEvent();

</script>

4.2 Replace the string on line 9 with your own div id that you saved when setting up each one of your buttons.

Step 5: Create the click to purchase trigger

Step 6: Create a facebook pixel tag (fires on all pages), facebook page view tag (fires on the landing page url), facebook click to purchase tag (fires when someone clicks to purchase)

Step 7: Create a custom google analytics event that fires when someone clicks to purchase. This event will push to google analytics so we can see when the event triggers. We can also create audiences with this data.

Step 8: Test and confirm events

8.1 Test that the facebook + google analytics tags are firing after clicking the add to cart button (Click to purchase).

8.2 Test to see if events are firing and send to google analytics after clicking the add to cart button (Click to purchase).

Want to take your Unbounce landing pages + Convertables to the next level?

Check out the Ultimate List of Unbounce Tips, Scripts & Hacks