Add Event Tracking for Google Analytics

  • Knowledge Base
  • Mobile Website Builder
  • Add Event Tracking for Google Analytics
  • Duda Support > Mobile Website Builder > Editing a Site

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>
 
×

Priority Phone Support

English phone support is available 18 hours a day,
Monday through Friday, 3am to 9pm (EST).

United States +1 866-776-1550 3am to 9pm (Eastern)
United Kingdom +44 (0)800-011-9071 8am to 2am (London)
France +33 (0)9-75-18-84-74 9am to 3am (Paris)
Israel +972 (0)3-720-8922 10am to 4am (Jerusalem)
Australia +61 (0)2-8880-9166 7pm to 1pm (Sydney)
To schedule a call in French, Portuguese, Hebrew or Russian, please email us at prioritysupport@dudamobile.com
×

Please Log in as a DudaPro

Priority Phone Support is available exclusively to DudaPros. Log in to your DudaPro account now to see our international support numbers.

Log In
Not a DudaPro? Start a free trial now!