Custom code that's intended to be visible in the Site should be added using an HTML widget. Custom code that's not should usually be put in the header. In general, it's always best to first follow the directions provided by the code's writer before adding it to your Responsive Site.

Our editor is very flexible in that you can extend the functionality of your site by adding any custom script or code, though the custom code has a tendency to break or disable the editor or require other steps to be done to work. Because of that, we have some guidelines that you should follow whenever testing custom code.

If you're working with custom code, it's good to know that scripts and resources can only be loaded in the same HTTP or HTTPS.

The editor by default is always loaded in HTTPS. If you're using an HTTP script in the editor, it will not be visible in the editor since it's loaded over a secure connection but will be visible on the live site since it's loading in an unsecured connection.

To fix this, it's always better to load your resources over a secure connection.

Create a duplicate of the site, then test your code on the duplicate site. If it fails, you can simply delete the site.

Alternatively, you can test the header code on a separate, blank page on the same site. If the page crashes, simply delete the page or access the code via developer mode.

Create a duplicate of the page, then add in your custom code.

If it fails, you can actually navigate to the page's HTML/CSS by going to another page and accessing developer mode from there

You can also delete the page and start again by creating a duplicate.

If custom code is on your homepage, you can try accessing your editor by adding a /contact or some other URL to the end of your editor's link

Page speed optimization will affect how certain scripts are run

PageSpeed optimization is run on most pages, which can cause issues with your custom code. When troubleshooting code, you can see if it's a PageSpeed issue by:

Change the URL to "testing_scripts"

Publish and check the page on your live site

If your code works on that page, you must contact support to turn off PageSpeed optimization for your site.

If you're using a script, you can also try making sure your script runs asynchronously - it isn't guaranteed, but it sometimes can solve the issue with scripts not executing properly in the browser.

To enable async on scripts, you need to alter it like this:

Old code: <script src=”https://example.com/script.js”></script>

New async: <script src=”https://example.com/script.js” async defer></script>

The animated navigation feature often interferes with the way the custom code is loaded. You can disable animated navigation in responsive websites by going to right-clicking your navigation element in your editor > edit > turn off animated navigation.

Help! Custom coding broke my site!

A site is broken by coding normally loads a blank page in the editor (or breaks your editing features). If custom code broke your site, there are several options available to you.

If you have a backup, restore it from site settings > backup versions > restore to backup.

If you're unable to access that in your editor by loading it, you might be able to workaround it by loading a new page.

To fix this issue, try accessing your editor on a new page. You can do this by entering a different URL in your editor link.

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

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 explain the purpose, best practices, or usability of the code. We recommend 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.

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.

<!-- 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. 

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. 

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.

We have completed extensive testing and the body-end.html section of developer mode works for adding the "noscript" code.

Adding Google AdWords Tracking

The Google AdWords Tracking code you receive from Google should look similar to the below text:

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

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.

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){}"

Google recommends to use:

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

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

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 screenshot 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.

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.

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

<!-- Facebook Pixel Code --> <script>

!function(f,b,e,v,n,t,s)

{if(f.fbq)return;n=f.fbq=function(){n.callMethod?

n.callMethod.apply(n,arguments):n.queue.push(arguments)};

if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';

n.queue=[];t=b.createElement(e);t.async=!0;

t.src=v;s=b.getElementsByTagName(e)[0];

s.parentNode.insertBefore(t,s)}(window, document,'script',

'https://connect.facebook.net/en_US/fbevents.js');

fbq('init', 'XXXXXXXXXXXXXXX');

fbq('track', 'PageView');

</script>

<noscript>

<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=XXXXXXXXXXXXXXX&amp;ev=PageView&amp;noscript=1"/>

</noscript>

<!-- End Facebook Pixel Code -->