Add data-track to links in menu

Question

Can anybody tell me how I can add a "data-track" tag to the links in my menu. When I go to the dashboard -> menus, I can add any custom HTML.

I would like it to go from this:

<a href="http://www.detailingwiki.org/articles/">Article index</a>

to this:

<a data-track="navigation|click|article-index" href="http://www.detailingwiki.org/articles/">Article index</a>

The first part of the code can always be the same (i.e. "data-track="navigation|click") the part at the end should copy the text from the link. In the example above that is "article-index", but it should just take whatever the text for the link is. (not sure if spaces are allowed....)

I haven't been able to do it myself, and I don't want to edit the core wordpress files.

Answer 1

So there's actually a filter for this, provided your theme doesn't use its own menu walker class:

function add_data_track_attribute( $atts, $item, $args ) {
    $title = apply_filters( 'the_title', $item->title, $item->ID );
    // $title = sanitize_title($title); // if you need a slug-like title
    $atts['data-track'] = 'navigation|click|'.$title;
    return $atts;
}
add_filter('nav_menu_link_attributes', 'add_data_track_attribute', 10, 3);

Note the commented-out line: I'm not sure what the data-track attribute does and, as you say, it might not allow spaces. If it doesn't, that line will transform the title into a slug, which should be acceptable for this.

Hope this helps!

Answer 2

If anybody is looking for this same solution, but with the correct Google Analytics Event Tracking code, see below:

function add_data_track_attribute( $atts, $item, $args ) {
    $title = apply_filters( 'the_title', $item->title, $item->ID );
    $title = sanitize_title($title); // if you need a slug-like title
    $atts['onClick'] = 'ga(\'send\', \'event\', \'navlink\', \'click\', \''.$title.'\');';
    return $atts;
}
add_filter('nav_menu_link_attributes', 'add_data_track_attribute', 10, 3);

The part you want to change is in the end: navlink - change this to the category your event falls into. In my case it mean "link inside the navigation"