How to combine gtm default macros and jquery?

@virginie 

To combine GTM default macros and jQuery, you can use the following steps:

1. In your GTM container, create a custom HTML tag and add your jQuery code to the tag.
2. Within the jQuery code, you can access GTM default macros using the built-in dataLayer object. For example, you can use the following code to access the current page URL:

1

var currentUrl = dataLayer[0].pageUrl;

1. You can then use the jQuery code to manipulate the page based on the values of the GTM default macros. For example, you can use the following code to add a class to a specific element based on the value of the page type macro:

1
2
3

if (dataLayer[0].pageType == 'homepage') {
  $('.element').addClass('homepage');
}

1. Save and publish your custom HTML tag in GTM to ensure that it runs on your website.

By combining GTM default macros and jQuery, you can create powerful tracking and customization solutions for your website.

@virginie 

Here is an example of how you can combine GTM default macros and jQuery to track button clicks on your website:

1. Create a click event listener using jQuery on a specific button element. For example, if you have a button with an ID of "myButton", you can use the following code:

1
2
3

$('#myButton').click(function() {
  // Custom code here
});

1. Within the click event listener, you can access GTM default macros using the dataLayer object. For example, you can use the following code to access the current page URL and the button's text:

1
2

var currentUrl = dataLayer[0].pageUrl;
var buttonText = $(this).text();

1. You can then send this information to GTM using the dataLayer's push() method. For example, you can use the following code to send an event to GTM with the current URL and the button's text as custom dimensions:

1
2
3
4
5

dataLayer.push({
  'event' : 'buttonClick',
  'pageUrl' : currentUrl,
  'buttonText' : buttonText
});

1. In your GTM container, create a custom trigger that listens for the 'buttonClick' event.
2. Create a custom tag that is triggered by the 'buttonClick' event. You can then set up any additional tracking or customization logic within this tag.
3. Save and publish your changes in GTM.

This example combines jQuery's ability to listen for events and manipulate the DOM with GTM's default macros and dataLayer object to track button clicks on your website. You can customize this example to fit your specific tracking needs by accessing other GTM default macros or by adding additional logic within the click event listener and the custom tag.

@virginie 

To combine GTM default macros and jQuery, you can follow the steps below:

1. In your GTM container, create a custom HTML tag.
2. Add your jQuery code to the tag. You can use the GTM dataLayer object to access GTM default macros.
3. Use the GTM default macros within your jQuery code. For example, you can access the current page URL using the macro {{Page URL}}.
4. Save and publish your custom HTML tag in GTM.

Here's an example of how you can combine GTM default macros and jQuery:

1. Create a custom HTML tag in GTM.
2. Add your jQuery code to the tag. For example, you can use the following code to track a button click event and send the event to GTM:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

$('button').click(function() {
  var pageUrl = {{Page URL}};
  var buttonText = $(this).text();
  
  dataLayer.push({
    'event': 'buttonClick',
    'pageUrl': pageUrl,
    'buttonText': buttonText
  });
});

1. Save and publish your custom HTML tag in GTM.
2. In GTM, create a custom trigger that listens for the 'buttonClick' event.
3. Create a custom tag that is triggered by the 'buttonClick' event. You can set up any additional tracking or customization logic within this tag.
4. Save and publish your changes in GTM.

By combining GTM default macros and jQuery, you can track button clicks or perform other actions based on the values of GTM default macros.