Friday, 30 December 2016

How to Monetize Google Maps on your Website with AdSense Ads

You have been using Google AdSense ads to monetize the content of your website but did you know that you can also use the same AdSense program to also monetize any Google Maps that are embedded on your web pages. You can embed a Google Map and AdSense ads will be automatically served inside the map that will either be contextually relevant to the content of the page or targeted based on the location of the visitors.

The Google Maps block embedded below contains a rectangular AdSense ad unit placed near the top-center area of the map. Where Am I is another example of a website that embeds Google Maps with ads.



AdSense Ads for Embedded Google Maps

Google Maps offers you an easy option to embed maps onto your website but the default embed code does not allow monetization. You’ll have build the map on your own using the Google Maps API to enable advertising and this isn’t difficult either. Let me show you in few easy step.

To get started, go to the Google AdSense website and create a new ad unit. You can choose the default color scheme for the ad unit (white background) and pick responsive for the size. The latter doesn’t matter though as the ad unit will automatically fit inside the container map.

Next, copy-paste the following Google Maps embed code anywhere in your web template.

<div id="google-maps" style="width:500px; height:500px;"></div>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp">
 </script>
<script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
 </script>

<script>

  function showGoogleMaps() {

    var mapOptions = {
      center: new google.maps.LatLng(38.8977, -77.036),
      zoom: 5
    };

    var map = new google.maps.Map(
      document.getElementById('google-maps'), mapOptions);

    var ad = '<ins class="adsbygoogle" \
              style="display:inline-block;width:300px;height:100px" \
              data-ad-client="ca-pub-xxxx" \
              data-ad-slot="yyyy"></ins>';

    var adNode = document.createElement('div');
    adNode.innerHTML = ad;

    map.controls[google.maps.ControlPosition.TOP_CENTER].push(adNode);

    google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
      (adsbygoogle = window.adsbygoogle || []).push({});
    });

  }

  google.maps.event.addDomListener(window, 'load', showGoogleMaps);

</script>

You can replace the height and width of the Google Maps in line #1 to fit your website layout while the latitude and longitude of the place needs to be replaced in line #11. Finally, xxxx and yyyy in the embed code should be replaced with your AdSense Publisher ID and the Ad Slot ID respectively. You can find these values in the embed code generated by AdSense.

How to Hide AdSense Ads on your Website

Google AdSense supports Responsive Ads which means that the size of AdSense ads on your website will automatically change based on the visitor’s device. Thus, if they are viewing your pages on a desktop computer, they may be served the bigger 728×90 leaderboard while the same ad unit may serve a smaller 468×60 banner to visitors who are on a tablet.

There’s no need to change the code as the AdSense script smartly detects the browser’s width and serves the right size accordingly.

Now consider a slightly different scenario where, instead of showing a smaller sized ad, you would like to completely hide the AdSense ad if the screen width is less than ‘n’ pixels. For instance, you may have a 160×600 px Skyscraper unit in your website’s sidebar but it should be displayed only when the site is being viewed on a desktop computer and not on a mobile phone.

There are two ways to achieve this. You can either write a CSS media query that will completely hide the sidebar on a mobile phone and thus the included AdSense ad will also be hidden from the visitor. This will however be against AdSense program policies because the AdSense ad will still be rendered on the visitor’s screen though hidden from view.

How to Hide AdSense Ads with CSS Media Queries

What we therefore need is a mechanism where the the AdSense ad is itself ‘blocked’ from rendering on a small screen. This is also possible with CSS media queries but the big difference is that we need to apply the CSS rules to the ad element and not the parent container (which in our case is the sidebar). Let me explain:



What you see above is a standard AdSense code snippet that will render a 160×600 pixels ad unit. The size (height and width) of the ad is specified as an inline style.

If you copy-paste the above ad unit as is into your website, it will always download and render the ad irrespective of the visitor’s screen size. If you however need to prevent the AdSense ad from showing on small screens, we need to make a few “officially permitted” changes to the default code.

The modified code will look something like this:



If you carefully notice the two snippets, you’ll find that we’ve added a new class sidebar_ads (you can give it any name) to the default AdSense snippet. Next we’ve added a media query that will hide all elements of this class if the screen width is less than 480 pixels. That’t it.

With this approach, no ad requests is made to the Google server and thus no ad is shown to the visitor. The ad area will be hidden and the content below will get pushed up leaving no whitespace, just as you’d like it to be.

The Ultimate WordPress Guide For Beginners

where you will be learning how to create and setup your WordPress blog. This guide is exclusively for new bloggers who want to set up their blog on the WordPress platform.

For existing WordPress bloggers, I have also listed some pro tips that you should start implementing right now to make your WordPress blog more professional.
This WordPress guide will show you the following things:
  • How to buy web-hosting and a domain name for your WordPress blog.
  • Essential things to setup after installing WordPress.
  • Things that you need to do immediately after the initial WordPress configuration (Step by step tutorials with pictures).
  • WordPress plugins that you need to install and how to set them up.
  • Pro tips to make your WordPress blog grow faster.
  • Essential SEO of your WordPress blog.
You can have your WordPress blog up and running in the next 10 minutes.
Do remember, this WordPress for beginner’s guide is crafted with the utmost care and is regularly updated (Last updated – July 2016). You should bookmark this page for future reference. You are encouraged to browse our WordPress catalog where you can find more articles apart from what I have listed here.

Creating your WordPress blog (First step)

The first thing that you need to do in order to create a WordPress blog is to buy web-hosting and a domain name.
  • Web-hosting is where your files are stored.
  • The domain is the name of your blog.
You can buy hosting from Bluehost, which comes with a free domain and costs only $5.95/month for unlimited hosting space and bandwidth (with the discount link below).
This process will take 5 minutes and here is a video guide to help you along the way. Click on the below link and get a hosting package now.
  • Sign up for Bluehost (Exclusive discount + free domain name)
The next thing you need to do is install the WordPress blog onto your domain name. This process will take another 5 minutes. Below is the step by step tutorial:
  • How to install WordPress blog on Bluehost in 5 minutes
Now you have your WordPress blog ready. You just need to make a few changes such as setting up permalinks, updating the ping list, setting up discussion settings, etc. Don’t worry, it’s not technical and you can quickly do it with the help of the guide below:
  • Essential settings after installing WordPress blog
Good job on getting this far! Your blog is now up and running.
But before you play with more stuff, let’s quickly watch a few videos that will make you understand WordPress better.
  • Free WordPress videos for beginners
A few things to learn before moving to the next level:
Here are a few more things that you need to learn before moving to the next level. This will help you to move through everything quicker and without getting stuck anywhere in between.

How to Receive Notifications for Google Forms on your Mobile Phone

The Email Notifications add-on for Google Forms will send you the form data in an email message each time a respondent submits your form. You can use the same add-on to also send automated emails to the form respondents immediately after they complete your Google Form.

The popular Google Forms add-on has been updated and it can now send push notifications to your mobile devices as well. That means when respondents complete and submit your online form, you’ll get an instant real-time notification (sample) on your iPhone or Android phone. The notification text can also include answers from the Google Form.

A fast response time is a key to success, especially in areas like customer service and closing sales leads, and mobile notifications will ensure that your important form entries are never lost in the daily deluge of emails.

Setup Mobile Notifications for Google Forms

It takes a few easy steps (video tutorial) to get up and running.

Install Email Notifications for Google Forms from the Google Add-on store.
Install the IFTTT mobile app on your Android or iOS device.
Next, we need to create a connection between our Google Form and the IFTTT app so that mobile notifications are triggered on the mobile phone immediately after the form is submitted.

1. Configure IFTTT

Open ifttt.com on your desktop and create a new applet. Choose the Maker service for if-this condition and set the Event name as the name of your Google Form. For if-this-then-that action, choose Notifications as the service and set the text as {{Value 1}}. Click Finish to make your IFTTT applet live.

2. Configure Google Forms

Open any Google Form, go to the Addons menu, choose Email Notifications and then select Mobile Notifications. Enter the Event name, the IFTTT key and the notification text. You can put any {{form field name}} in the text and these will be replaced with actual values filled by the user.

That’s it. Click the Test button to test the connection between the form and your mobile phone. If it works, click Save to enable mobile notifications.



If you have multiple Google Forms, you need to create separate IFTTT applets for each form and the event name should be unique for each applet.

Internally, when someone submits your form, the Google Addon triggers and sends a web request to the IFTTT service which in turn pushes the notification to your mobile device.

How to Add a Picture Password to your Google Forms

Google Forms have this “all-or-none” problem. The forms are either public (anyone can fill your form) or, if you are on Google Apps, you can create forms that are visible to everyone in your organization. It is however not possible to restrict access to forms to specific people.

Another shortcoming is that Google Forms do not allow passwords or CAPTCHAs to prevent spam bots from filling your forms with random data. Google itself maintains the reCAPTCHA project but it is not known if integration with Google Forms is in the works. There is a workaround, though.

Google Forms with Picture Passwords

Google Forms do not support CAPTCHA but they do offer an option to attach images with questions. These can be used as picture passwords.



The idea is simple.

We add a multiple-choice question where the user is asked to pick an image from a selection of multiple images. If they select the correct image, the main form is displayed else an error message is shown. Also, these images are shuffled so the answer’s position is random for each respondent.

How to Make Google Forms with Picture Passwords

Take this sample Google Form for a spin and you’ll get the idea.

Open a new Google Form and create 3 sections. The first section will have the picture password, the second section will contain the error message and the last one will have the actual questions that you want to ask users who have passed the anti-spam test.

In the first section, create a multiple choice question and attach a different image with every choice. Make this a required question and turn on the shuffle order for the question. Also turn on the option “Go to section based on answer” for the section so that only valid answers are taken to the main form.



For each choice that is not valid, choose “Go to section 2” (see screenshot) and choose “Go to section 3” for the right choice. In section 2, do not add any questions but for the error message in the section description. Also set “Go to section 1” after section 2 so that the user cannot go to the main section 3 without passing the picture test.

Make the Google Form live and respondents will only see the main questionnaire if they have solved the problem in section 1.