Overview
This article shows how to add custom event tracking to your DudaMobile site with Google Analytics.
Default Events
Duda already tracks multiple events. You can see the following events tracked in your Duda analytics dashboard:
- Click-to-Call
- Click-to-Email
- Click-to-SMS
- Mobile Map
- Coupon clicks
- OpenTable reservations
- Form submissions
After adding a Google Analytics id to a site, these events are automatically tracked in your Google Analytics account as well.
Adding Custom Events
Event Tracking function
Duda has a custom function that sends tracking data into your DudaMobile Analytics and Google Analytics, dm_gaq_push_event(). This function takes 4 parameters: event_name, event_type, null, site_name. Generically it will look like this:
dm_gaq_push_event('event_name', 'event_type', null,'site_name');
event_name | String to identify the even (e.g. our click-to-call event uses the event name ClickToCall) |
event_type | String that describes the event (e.g. Call or Email) |
null | Just set this to null. |
site_name | The name of your site in the DudaMobile system |
Example: Tracking different phone numbers
In order to track the times a certain number is clicked we need to add a custom event handler to our click-to-call button that sends this information to our Google Analytics account. As we saw previously, DudaMobile pushes this information using the dm_gaq_push_event() function.
First we need multiple click-to-call buttons with a different phone numbers (they can be on the same page or different pages). Here I've added a click to call for two different locations each with a different phone number.
Make a note of the format you're using when creating your click to call button, as you will need to use the number exactly as it appears when you enter the number in the editor.
Next, we'll need to add some JavaScript into the Head Section of my site.
Now let's create an event handler for my first location with phone number 714-529-2233. In order to do this I'm going to need to select the button based on telephone number then listen for clicks on that button.
$('[href="tel:714-529-2233"]').click(function(){
//Do something after the button is clicked
});
When our click-to-call button is pressed we want to tell Google Analytics to track the event. We do this with our dm_gaq_push_event() function. In this case we'll fill in this information to get:
dm_gaq_push_event('CallLocation1','Call',null,'havanamania17');
Adding this to our event handler we get this:
$('[href="tel:714-529-2233"]').click(function() {
dm_gaq_push_event('CallLocation1','Call',null,'havanamania17');
});
Similarly, for our second button we'll have this event handler (changing the telephone number and event_name):
$('[href="tel:650-222-2222"]').click(function() {
dm_gaq_push_event('CallLocation2','Call',null,'havanamania17');
});
Now we want to wrap these event handlers so they are added to each page, even when animated navigation is turned on. I usually wrap all my JavaScript for DudaMobile in this:
dmAPI.runOnReady("any-name",function() {
});
So we get this:
dmAPI.runOnReady("any-name",function() {
$('[href="tel:714-529-2233"]').click(function() {
dm_gaq_push_event('CallLocation1','Call',null,'havanamania17');
});
$('[href="tel:650-222-2222"]').click(function() {
dm_gaq_push_event('CallLocation2','Call',null,'havanamania17');
});
});
Finally, we put <script> tags around this and add it to our mobile sites Head Section:
Phone number template
Here's a template to make this as easy as possible to add to your site. Just copy the template, change the values to your phone numbers and paste it into your site (add more handlers if needed):
<script>
dmAPI.runOnReady("any-name",function() {
$('[href="tel:YOUR_NUMBER_HERE_1"]').click(function() {
dm_gaq_push_event('CallLocation1','Call',null,'YOUR_SITE_NAME');
});
$('[href="tel:YOUR_NUMBER_HERE_2"]').click(function() {
dm_gaq_push_event('CallLocation2','Call',null,'YOUR_SITE_NAME');
});
});
</script>
Example: Tracking button clicks
To track the times a specific button is clicked we need to add a custom event handler to our button. Like in the Click-to-Call example, we need a way to refer to our button. In this case we will get our button's id. First, click on the button you want to track and select edit. Then go to the more tab and under CSS you will see some code. All you need to pick out is your button's id:
Now that we have our button's id we can select it with our JavaScript and create an event handler for it (we select ids with a #):
$('#1779289034').click(function() {
//Do Something
});
Now we can add our dm_gaq_push_event() function to send tracking information to our Analytics account:
$('#1779289034').click(function() {
dm_gaq_push_event('MyButtonClick','Click',null,'havanamania17');
});
Finally, let's put this in a wrapper and place it into the Head Section of our mobile site.
<script>
dmAPI.runOnReady("any-name",function() {
$('#1779289034').click(function() {
dm_gaq_push_event('MyButtonClick','Click',null,'havanamania17');
});
});
</script>
Generic Button Template
Just copy this, enter your button ID and paste it into your site (add more handlers if needed):
<script>
dmAPI.runOnReady("any-name",function() {
$('#YOUR_BUTTON_ID_HERE').click(function() {
dm_gaq_push_event('MyButtonClick','Click',null,'YOUR_SITE_NAME_HERE');
});
});
</script>
