Click to Call functionality for viewers of landing pages on mobile device

[Anonymous]

If you're clicking through a marketo email that takes you to a form fill, it would be good to have, instead of a form fill, the option to click to call (sales) for those that are viewing on a mobile phone.  disclaimer, i saw this idea on Marketing Sherpa today. Very good idea.

[Anonymous]

Sam:

I like the idea! You can actually already implement this with Marketo as-is.

One of the ways you could do this would be with media queries in CSS. You can make a responsive landing page, and then at a certain width hide a normal Marketo form and instead display a button and "click to call" link.

Here would be an example of some CSS you can put on a page to achieve this effect. Place this in your landing page custom head. The media query widths are somewhat arbitrary, just depending on where you want to determine what width should be "phone" as opposed to "not phone." Because there are so many different devices with different widths, there isn't one universal media query width that perfectly disguishes phones from non-phones.
 

<style>

@media only screen and (max-width : 320px) {

form { display: none!important; }
.CLICKTOCALL { display: block }

}

@media only screen and (min-width : 321px) {

.CLICKTOCALL { display: none }

}

</style>

The above code would work if you were to name an HTML element (or rich text element) "CLICKTOCALL." In this HTML element or rich text element, you can create an image with a phone number link. 

Example: 

<a href="tel:2065551789"><img src="CNAME/call-button.png"></a>

If you're looking to track how many people click on the button, you can track it in Google Analytics as an event. 

An example of a phone button with Event Tracking:

<a href="tel:2065551789" onClick="_gaq.push(['_trackEvent', 'Call Button', 'LANDING PAGE NAME']);"><img src="CNAME/call-button.png"></a>

This depends how you have your landing pages set up (i.e., separate mobile and desktop, what emails, etc.). We're starting to use responsive landing pages more ourselves, and putting in this kind of fuctionality in the landing pages and templates. If you want to see how the media queries can work, you can check out http://resources.yesler.com/responsive-marketo-landing-page-template.html. Those are two responsive templates we've created, and they heavily utilized media queries (along with some more advanced Marketo web development).


Thanks, Sam!

Best,
Edward Unthank
SEO/Web Specialist
Yesler

[Anonymous]

I was going to suggest the exact same solution Edward already has, but he beat me to the punch & saved me from lots of typing. Complete answer!

[Anonymous]

Thanks Edward. I'll try that out.  Do you know how to make a mobile specific landing page show up when the user is using a mobile browser, and a normal landing page when using a web browser?  That way i could put this functionality only on the mobile version.

[Anonymous]

Do you want to maintain two versions of every landing page just for this button? His media query method works the same effectively as having a 2nd mobile version. If a user has skype or google talk installed it works the same on their desktop browser.

[Anonymous]

This conversation triggered me while reading the following article. http://www.noupe.com/design/now-is-the-time-why-the-web-is-ready-for-responsive-web-design-77377.html