Sending dynamic data to Google Tag manager dataLayer without event

Question

I set up some custom tags for Google Tag manager on a website to track some custom data, but it is not tracking. The dataLayer variable is collating multiple data like this in the head above the tag manager code.

The process is, user lands on page, and clicks, this gets the data from wordpress etc using localized data and logs this information via ajax call. We wanted to also log this data in Google Analytics using the tag manager before the ajax call.

Here is the Javascript.

// JavaScript Document
jQuery(document).ready(function($){

        console.log(gg_data_object);

        var MyObject = {

            load: function(){
            MyObject._do_ajax('landed', null, null);    
        },

        _readCookie: function (name) {
            var nameEQ = name + "=";
            var ca = document.cookie.split(';');
            for(var i=0;i < ca.length;i++) {
            var c = ca[i];
                while (c.charAt(0)==' ') c = c.substring(1,c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
            }
            return 0;
        },

        _click_trace: function(event){      
            MyObject._do_ajax('clicked', this.href, $(this).attr('class'));         
        },
        _submit_trace: function(event){
            gg_data_object.user_id = MyObject._readCookie('user_id');
            MyObject._do_ajax('submission', gg_data_object.post_type, $(this).attr('class'));           

        },
        _do_ajax: function(event_action, href, class_ref){

            var data = {
                'action'                : 'track_event',
                'security'              : gg_data_object.ajax_nonce,
                'event_action'          : event_action,             
                'current_url'           : gg_data_object.current_url,
                'date'                  : gg_data_object.date_today,
                'phpsessionid'          : gg_data_object.phpsessionid,
                'post_id'               : gg_data_object.post_id,
                'post_type'             : gg_data_object.post_type,
                'referrer'              : gg_data_object.referrer,
                'unique_id'             : gg_data_object.unique_id,
                'user_id'               : gg_data_object.user_id,
                'clickedon'             : href,
                'class_location_type'   : class_ref

            };



            /// Now ping event to google analytics - Nothing works
            dataLayer.push(data);
            dataLayer.push({'gg_event_action': event_action});

            // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
            jQuery.ajax({
                type : "post",
                dataType : "json",
                url : gg_data_object.ajaxurl,
                data : data,
                success: function(response) {
                    console.log(response);

                    return true;
                }
            });

        }, 

    }

    MyObject.load();
    $(document).on('click', 'a', MyObject._click_trace);
    $(document).on('click', 'input[type="submit"]', MyObject._submit_trace);

});

My issue is not this code above so much its actually the fact that even after spending a day or so reading the documentation, watching videos I cannot seem to set up even one push that works.

In Tag manager:

1. I created a new tag
2. Chose Google Universal Analytics
3. Chose custom event
4. Set up a new macro
5. Gave it a label name say gg_event_type
6. Chose dataLayer Variable

But its not sending the data to Google Analytics. Any help as to what I am missing would be really appreciated.

Answer 1

You can use the below optimized code. You need to define your action and label in a JSON format and loop through it. Easy to maintain.

var dataLayer = [];
var d = [
    {
        'gtmAction' : event_action, 
        'gtmLabel'  : 'gtmLabel'
    },
    {
        'gtmAction' : 'sessionid', 
        'gtmLabel'  : gg_data_object.phpsessionid
    },
    {
        'gtmAction' : 'post_id', 
        'gtmLabel'  : gg_data_object.post_id
    }
];

for(i = 0; i<d.length; i++) {
    dataLayer.push({
        'event': 'trackEvent', 
        'gtmCategory': 'track_event', 
        'gtmAction': d[i].gtmAction, 
        'gtmLabel': d[i].gtmLabel
    });
}

console.log(dataLayer)

Answer 2

OK here so far is what I have done,. I have used the answer button so I can format the answer.

I set up one event as seen, and used this multiple times to track the data using the same reference.

Following this tutorial.

so that is Create a TAG. Have a custom {{event}} Set up a macro for label and category Then created a rule which ties the event in with my custom event reference.

I then

/// Now ping event to google analytics      
        dataLayer = []; 
        dataLayer.push({
            'event'                 : 'trackEvent',
            'gtmCategory'           : 'track_event',
            'gtmAction'             : event_action,
            'gtmLabel'              : gg_data_object.current_url            
        });
        dataLayer.push({
            'event'                 : 'trackEvent',
            'gtmCategory'           : 'track_event',
            'gtmAction'             : 'sessionid',
            'gtmLabel'              : gg_data_object.phpsessionid           
        });
        dataLayer.push({
            'event'                 : 'trackEvent',
            'gtmCategory'           : 'track_event',
            'gtmAction'             : 'post_id',
            'gtmLabel'              : gg_data_object.post_id            
        });
        dataLayer.push({
            'event'                 : 'trackEvent',
            'gtmCategory'           : 'track_event',
            'gtmAction'             : 'post_type',
            'gtmLabel'              : gg_data_object.post_type          
        });
        dataLayer.push({
            'event'                 : 'trackEvent',
            'gtmCategory'           : 'track_event',
            'gtmAction'             : 'referrer',
            'gtmLabel'              : gg_data_object.referrer           
        });
        dataLayer.push({
            'event'                 : 'trackEvent',
            'gtmCategory'           : 'track_event',
            'gtmAction'             : 'unique_id',
            'gtmLabel'              : gg_data_object.unique_id              
        });
        dataLayer.push({
            'event'                 : 'trackEvent',
            'gtmCategory'           : 'track_event',
            'gtmAction'             : 'user_id',
            'gtmLabel'              : gg_data_object.user_id            
        });
        dataLayer.push({
            'event'                 : 'trackEvent',
            'gtmCategory'           : 'track_event',
            'gtmAction'             : 'clickedon',
            'gtmLabel'              : gg_data_object.href           
        });
        dataLayer.push({
            'event'                 : 'trackEvent',
            'gtmCategory'           : 'track_event',
            'gtmAction'             : 'class_ref',
            'gtmLabel'              : gg_data_object.class_ref,
            /*'event_action'            : event_action,             
            'current_url'           : gg_data_object.current_url,
            'phpsessionid'          : gg_data_object.phpsessionid,
            'post_id'               : gg_data_object.post_id,
            'post_type'                 : gg_data_object.post_type,
            'referrer'              : gg_data_object.referrer,
            'unique_id'                 : gg_data_object.unique_id,
            'user_id'               : gg_data_object.user_id,
            'clickedon'             : href,
            'class_location_type'   : class_ref*/               
        });
        console.log(dataLayer);

There is probably a more elegant way to do this and set up extra fields but for now this works. Thanks for all your help.

Andi