Add a unique ID to a button in Wordpress - wordpress

I have a Wordpress one-pager (salient theme using visual composer) with four buttons.
Every one is linked to the same contact form, which is correct.
Now I want to add a specific ID to each button in order to track which one is most effective in Google Analytics.
I track my other events using Google Tag Manager.

1) You need to create a trigger in GTM:
This trigger will capture clicks on all buttons which is opening contact modal popup
2) You need to create a custom variable, which will take a heading of the section, where this button is located.
Code is: function() {
return jQuery({{Click Element}}).closest('.wpb_wrapper').find('.vc_custom_heading').text();
}
3) Create a tag which will send data to GTM
4) Check your events in GA.
Keep in mind that it might take a couple of hours to appear in Behaviour-> Events tab. Or you can check it immediately in Real Time -> Events tab

Related

Google Tag Manager - Help setting up tags to track play button clicks and timestamps

Was wondering if someone could help me out or provide some guidance with some things I'm looking to do with Google Tag Manager.
I'm fairly new to GTM but I've already got two basic tags set up:
Track All Page Views
Track all Link Clicks
I've got the above two working and sending data to my Google Analytics account.
What I'm having trouble with is the following:
My website has a bunch of single pages that each have an audio player on them. I would like to track when a user does the following:
Clicks the Play Button
Clicks the Download Button
On top of that, I would like to:
Track the timestamp of the song when a user clicks the Pause Button or exits the page.
Here's an example of one of the pages I would like to implement these tags on: https://www.jimmypressplay.com/mashup-last-friday-night-i-wanna
For #1 and #2, I've tried a bunch of things with no success. I've messed around with the "Click - All Elements" and "Custom Event" Trigger Types and I've set the trigger to fire when the click element matches the div/button class of the play button. I've also messed around with setting up a custom variable (by using either the "Auto-Event Variable" or "DOM element" options). But none of that seems to work (but obviously I am probably doing something wrong).
For #3, I haven't tried tackling that yet, but I've noticed in the code in the "slider slider_is-active" div class it has an element ("aria-valuenow") that keeps track of the current timestamp, so I'm guessing there should be some way to return that timestamp if I am able to set it up as a custom variable somehow.
If anyone has some free time and could take a look and point me in the right direction, that would be great! Or if I need to provide more info, let me know.
Thanks!

Track menu link clicks in Wordpress with Google Tag Manager?

I would like to track how many people click on a link in the menu bar and where did they come from. Is there a way to do it? I see that in Wordpress there is a class called menu-item, but I don't know how this would help me.
Thanks in advance.
Google Analytics will track where users come from by default. Because of this, you only need to create an event to fire on the click class: menu-item.
After setting up event tracking, navigate to Behaviour -> Events -> Top Events. Once at this page, search for the naming of the event you created, and then select a secondary dimension such as Default Channel Grouping, Source/Medium, or whatever is relevant to your needs.
1) You need to create universal event tag. In fields to set, choose variable refferer and as value select {{refferer}}.
2) Create "click classes" variable with value: gtm.elementClasses
3) Create trigger of "Click - All Elements" type. Select "some clicks" and fill it with: {{click classes}} equals menu-item.

Google Tag Manager On Click event on Drop Down

Trying to figure out the best way to track on click events using google tag manager on an element that doesn't seem to change. this site: http://www.sleepcocktails.com/pages/faq has FAQ's where the use can click on a question which then expeands to show the answer. The goal is to understand which are the most clicked on questions so we can surface those earlier in the site.I think the best way to do this would be through click events, but as nothing really changes on the page i cant figure out what to target with google tag manager.
Any help would be appreciated thanks!
You could create the following event tag
with the trigger to fire when the Click Class variable equals "text", like this:
Use the Click Listener and configure your tag to only fire when someone clicks on a question e.g Click Classes equals text
and the set-up for your Event could be something like this:
Category: FAQ
Action: clicks
Label: {{element text}}

Is it possible to view a specific event in Google Analytics?

We are using Google Analytics to track when a user presses the delete button on our site. The event looks like this:
/*
Category is "User_Images
Action is delete. e.g. they clicked the delete button
Label is "username:bob". So we know it was bob's fault
value is 7. bob deleted 7 images
*/
_gaq.push(["_trackEvent", "User_Images", "delete", "username:bob", 7]);
I can't figure out how to drill down to a specific event. The farthest I can go is to drill down to the summary for a specific user.
But I want to see a specific event. That is, I want to know how many images bob deleted per event. Is this possible?
You can set the secondary dimension (or even primary dimension) to be any of category, action, or label, and then find your specific event. Probably should create a custom report using the c, a, and l as dimensions, and total events as the metric.

Using Jquery to create a drag and drop select box or text box? (not lists)

I've worked thru the various jquery UI demos of drag and drop and sortable. These show how to get items from one list to another. One example even shows a shopping cart demo.
Am I missing something in that a item won't be part of a post to the server right? so what use is this other than reorganizing a display on a page?
Is it possible to adapt this to some sort of input field?
TIA
J
item won't be part of a post to the server right? so what use is this
other than reorganizing a display on a page?
Allowing users to reorganize the elements in the page is a nice feature, even if you aren't notified on the server. For example, by allowing users to drag and drop elements, you may store his current page layout in localStorage so that the next time the user visits your page, the layout is restored automatically. You don't need to be notified on the server side what the user preferences are.
All of these jQuery plugins (sortable, draggable, etc.) have functions that you can hook into and trigger some server side processing as well. For example, when a user drags and drops an element from one section of the screen to another, you can perfectly make an ajax request and do some processing on your end. This would provide a very nice user experience to the user.
For example:
$( ".selector" ).droppable({
drop: function( event, ui ) {
$.post('http://server/somection',data{...});//do something on the server-side
};
});
Absolutely! jsfiddle with demo here.

Resources