How to Setup Tracking Code in Duda

  • How to Setup Tracking Code in Duda
  • Duda Support > Responsive Website Builder > Advanced

Overview

Setting up tracking code allows for in-depth insight and analysis of visitor activity. There are many different analytics providers and tracking solutions on the web. This article will help explain how to add some of the more commonly used tracking solutions to your responsive Duda site. We will specifically be discussing Google Tag Manager, Google Analytics, Google Ad Words tracking, and Facebook tracking pixels. This is a very advanced setup, so you may want to seek help from developers to implement the code for you.

Important Information

For all of the following guides, you will need to already have the code snippets from these various services. These guides will explain how to implement the code, but will not not explain the purpose, best practices, or usability of the code. Duda recommends that you familiarize yourself with these services before implementing them by reviewing the extensive online discussions about these tracking solutions, which you can find on their websites or through web searches. 

Google Tag Manager

Adding Google Tag Manager

The Tag Manager code you receive from Google should look something like the below snippets. There are two parts to this code, a 'script' and a 'noscript' section. This difference will become important later in this guide. Note: The below code is just an example - do not copy this directly into your site. Please be sure to obtain the correct code from Google.

Script Section NoScript Section

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

1. You will first need to access the global header section. Click "Settings" in the left menu, and then select the "Header HTML" sub-section.

2. Place the 'script' part of the Tag Manager code in the "Header HTML" section and click Save. After saving the "Header HTML" should look like this:

Note: All of the above code is just an example - do not copy this directly into your site. Please be sure to obtain the correct code from Google Tag Manager.

3. Navigate to "Developer Mode" by clicking on the </> symbol in the top bar.

4. Expand the "Site HTML/CSS" section, and click on the "body-end.html" section. Place the 'noscript' part of the code in this section. Then, click Save. This section should now look like this:

   

Notes and Considerations for Google Tag Manager

  • Google recommends to place the "noscript" code in the beginning of the "body" section. This is a workaround Google suggests to get around limitations of very old web browsers which do not load header code.
  • Duda has completed extensive testing and the body-end.html section of developer mode works for adding the "noscript" code.
  • For information about setting up Tag Manager within your Google account, please seek help from Google.

Google AdWords Tracking

Adding Google AdWords Tracking

The Google AdWords Tracking code you receive from Google should look similar to the below image.


Note: All of the below code is just an example - do not copy this directly into your site. Please be sure to obtain the correct tracking code from Google AdWords.

<!-- Google Code for Add to Cart Conversion Page
	In your html page, add the snippet and call goog_report_conversion
	when someone clicks on the chosen link or button. -->
	<script type="text/javascript">
	 /* <![CDATA[ */
	goog_snippet_vars = function() {
	  var w = window;
      w.google_conversion_id = 12345678;
	  w.google_conversion_label = "abcDeFGHIJklmN0PQ";
	  w.google_conversion_value = 13.00;
	  w.google_conversion_currency = "USD";
	  w.google_remarketing_only = false;
	}
	// DO NOT CHANGE THE CODE BELOW.
	goog_report_conversion = function(url) {
	  goog_snippet_vars();
	  window.google_conversion_format = "3";
	  var opt = new Object();
	  opt.onload_callback = function() {
	  if (typeof(url) != 'undefined') {
	    window.location = url;
	  }
	}
	var conv_handler = window['google_trackConversion'];
	if (typeof(conv_handler) == 'function') {
	  conv_handler(opt);
	  }
        }
	/* ]]> */
	</script>
	<script type="text/javascript"
	src="//www.googleadservices.com/pagead/conversion_async.js">
	</script>

1. You will first need to access the global header section. Click "Settings" in the left menu, and then select the "Header HTML" sub-section.

2. Place the code provided by Google into this section, then click Save.

Once you have added the tracking code into the header section, you need to add code to the widget that you want to be considered the tracking event.
Please note that AdWords does not differentiate between click and load tracking.

3. Next you need to add Google's tracking on individual links. For example, if you wanted to add tracking to a button click, then you would go to the button within the editor and right-click to bring up the below menu, and then select HTML/CSS

4. Once you are looking at the HTML for the button widget find the <a> tag and add the following snipet to this section.

onclick=";return try{goog_report_conversion('http://example.com/your-link')}catch(e){}"

If you did this correctly the code would look something like the below screenshot.

Note: The above code is just an example - do not copy this directly into your site. Please be sure to obtain the correct code from Google.

Notes and Considerations for Google AdWords

Google recommends to use:

onclick="goog_report_conversion ('http://example.com/your-link')"

The one we use also enables us to track into Duda stats.

Google Analytics

Adding Google Analytics

Adding Google Analytics to individual widgets provides another way for you to track statistics on certain functions.

1. Make sure that Google Analytics is already set up on your website. To do this go to site settings and then click on the "Google Analytics" section. Paste your Google Analytics code in the field provided in the screen shot below.

2. After the code is added, you can set individual widgets to be tracked by modifying the HTML of the widget. To do this, right-click on the widget you want to be tracked and click 'Edit HTML/CSS'.

3. Enter your Google Analytics code. 

Note: The code you copy and paste from Google will not work. You need to modify the Google code, so that the tracking gets reported to the right analytics. If you do not specify the Google Analytics account to report to by adding the c., then the event will not be tracked at all.

Before modification: onClick="_gaq.push(['_trackEvent', 'whitepaper', 'download', 'SEO is great', 5, true]);"
 After modification: onClick="_gaq.push(['c._trackEvent', 'whitepaper', 'download', 'SEO is great', 5, true]);"

4. Click Update to save your changes.

Notes and Considerations for Google Analytics 

Once again, it is very important that you add the c. to the code. If you do not specify the Google Analytics account, the event will not be tracked.

Facebook Tracking Pixels

You can add Facebook Tracking Pixels to your responsive website to track events. Create your Facebook Tracking Pixel code in the Facebook Pixel tab.

Adding Facebook Tracking Pixel

Access the HTML Header section by clicking "Settings" in the left menu, and then select the "Header HTML" sub-section.

Place the code provided by Facebook into the header HTML section, then click Save. The code should look similar to the one below.

Notes and Considerations for Facebook Tracking Pixels

For more information about Facebook Pixel Implementation, check out this guide.

×

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!