Adding Google Analytics & Other SEO Goodness

So you've completed your site and are ready to share it with the world? Well, one vital piece that you shouldn’t forget about is utilizing the power of the Page Settings pane within Responsive Site Designer (Foundation Framer & Bootstrap Builder too).

Under this section of the app, you can easily add SEO data to your project. Apply a page title, insert a snappy description about your site, and plug in the vital keywords Google will read when indexing your website. You can also add other page scripts for plug-ins or analytics which require placement in the head or footer sections of the page markup. In this tutorial we’ll show you how to add Google Analytics as well as a fun Favicon to your project.

Settings Pane

Google Analytics

This is a popular service offered by Google that tracks and reports on your website traffic. In just a few short steps you can register with Google for an account and get the special codes to plug into Responsive Site Designer.

  1. First, sign up for a free account at Google Analytics
  2. Get an Account
  3. Next, fill out your website information.
  4. Website Info
  5. Select the optional shared settings
  6. Shared Data Settings
  7. After you fill out your configurations, hit Get Tracking ID and then Agree to the Terms of Service.
  8. Easy-peasy! You now have a Google Analytics account! Copy the Tracking Script.
  9. Script Tracking
  10. Add this bit of markup into RSD under the head or footer sections under the Settings pane.
  11. Script Tracking


SEO like a Pro with Website Insight

Improve site visibility and usability using this app’s SEO x-ray vision. View reports on any site’s content structure, and keyword usage, potential issues such as broken links or missing meta data and more. Using this helpful app is virtually like printing money. Learn more...

Adding a Favicon

Add a fun favicon, short for favorite icon, which is a tiny graphic that appears in the web browser tab when your site is opened. These icons are also used by mobile phones when saving a webpage to your favorites or bookmarks. In the latest versions of the CoffeeCup responsive design apps you can effortlessly create these graphics.


  1. Open your responsive design app and select the Page Settings pane.
  2. Click the Favicon icon drop down and choose how you want to import your image: locally or online.
  3. favicon selector
  4. Select your preferred image file.
  5. Hit the Publish icon in the top menu.

That’s it! Your favicon may not appear immediately after you’ve completed the above steps. It can take a few minutes or hours depending on your browser and server.

Build Epic Sites with Responsive Site Designer

Craft beautiful website visually using two outstanding front-end frameworks: Bootstrap or Foundation. Simply drag, drop & click to build the perfect digital environment for your message and content. Get started today and save a nice $40 on this popular design app (available for Windows or macOS).