Dynamic Call-To-Actions To Boost Conversions

Reading time: 20mins

Required knowledge: SharpSpring, PHP, JavaScript

As marketers, we’re always looking for ways to personalize our websites as much as possible for the exact customer group we’re targeting.

Dynamic calls-to-action are an awesome way to do this, and statistics prove it – dynamic CTAs convert 40% more than generic, static CTAs.

So what is a dynamic CTA?

When someone visits your site and you’ve successfully segmented him/her based on some factor (industry, buying stage, job position, region, etc) via a form completion or an existing record in your lead database, a dynamic CTA is created and targeted specifically for that person.

For example, let’s say you are an accounting software company. Your gated content forms capture the lead’s industry and your sales team actively tracks buying stages in SharpSpring’s CRM.

With dynamic CTAs (and marketing automation in general) the key to success is providing your prospects with the right content at the right time.

As marketers, we want visitors to become leads by filling out a gated content form, and we want leads to become trial users by filling out a trial form, and finally we want to keep those trial users engaged and using our product so they become paying customers. Simple enough, right?

Using the accounting software example, you could come up with the following CTAs to use throughout your website:

	Anonymous Visitor	Lead	Trial Period
Professional Services	Free Guide: How To Reduce Your Admin Costs By 18% With Accounting Software *	Stop wasting time in Excel – Start your free trial today!	Webinar: [SOFTWARE NAME] – 5 Best Practices for Professionals
Manufacturing		Lower costs by automating inventory management – Free Trial	Webinar: How to use [SOFTWARE NAME] to Lower Production Cycle Time by 20%
Healthcare		…	…
…

* Because we don’t know the Anonymous Visitor’s industry (this person has not filled out a form), we have to show a generic CTA.

Demo

See the dynamic CTA in action here: https://www.accelweb.ca/demo/dynamic-cta/

When you first visit the page, you’re shown a generic CTA:

Then if you fill out the form on the right, you become a lead and are shown an industry-specific (professional services) CTA for leads:

Switching your industry to manufacturing in the form on the left shows you a different CTA:

And once you are placed in the “Free Trial” pipeline stage in SharpSpring, you see a different CTA (again, specific to your industry):

You won’t be able to see this last CTA using the demo page because it would require someone in our SharpSpring instance to manually go in and update your deal stage.

Look good so far? Let’s look at how to do it in SharpSpring.

Here’s how we have things set up in SharpSpring:

We have a lead custom field called “IndustrySelect.” We use a custom lead field because we want the lead to only be able to select an industry from a predefined list. If we used the default “industry” field which is a text input, we would not be able to determine the exact industry based on our set of choices.

Our sales pipeline has the following stages: Initial Contact, Lead, Free Trial

Here’s how we segment visitors into visitor, lead and trial period segments for our dynamic CTA:

Anonymous Visitor – Someone who is not a contact in SharpSpring

Lead – Someone who is a contact in SharpSpring but is NOT in the trial period stage of the deal pipeline

Trial Period – Someone who is a contact and is in the trial period stage of the deal pipeline

Ok, now that we’ve defined each segment, let’s look at the code.

The code

There are two files used in the demo:

index.php – Contains the HTML and JavaScript to display the page and load data from SharpSpring
getOppStage.php – Uses the SharpSpring API to determine if a lead inside a pipeline is in the “Free Trial” stage or not. Accepts an HTTP GET parameter (leadID) and returns 1 (in free trial stage) or 0 (not in free trial stage)

Just because the demo is organized in this way doesn’t mean your project has to be this way. It could be simpler or way more complicated. Customize this to your needs.

If you’re not already up to speed with dynamic content in SharpSpring and the SharpSpring API, I would recommend taking a look at SharpSpring’s Dynamic Content Example and API Reference.

Let’s go through the creation of the two files.

index.php

We’ll start off by adding the HTML for the page and the CTA buttons.

Create one hidden HTML button for each stage/industry combination, and name them according to the IndustrySelect custom field values you entered when you created it, following this format: <a href=”#” id=”cta-lead-INDUSTRYSELECTVALUE” style=”display:none”>…</a>

The HTML for index.php: https://gist.github.com/raujohn/6e4e931cada3c7a495f4

Next, Add the JavaScript logic to the head.

First you are going to add a custom function called ssCallBack which is triggered when the SharpSpring tracking code is loaded. It receives any lead data that is available for that visitor.

Our ssCallBack follows this process:

Check if a contact exists in SharpSpring for this visitor
- If YES, get the Industry and store it in a variable
- If NO, show the anonymous visitor CTA
Check if the contact has an opportunity attached to it, and call getOppStage.php to determine if the deal stage is “Free Trial”
- If YES, show the free trial user/industry combo CTA based on the industry javascript variable
- If NO, show the lead/industry combo CTA based on the industry javascript variable

And then to make sure the ssCallBack function is called, simply include this line inside your SharpSpring tracking code: _ss.push([‘_setResponseCallback’, ssCallBack ]);

The JavaScript to add to the <head> of index.php: https://gist.github.com/raujohn/813a05cc5f9f29fa4d75

Full index.php page: https://gist.github.com/raujohn/62fe38a46ed23bd1a525

Awesome! That’s our page that contains the dynamic CTA. Next up, the code that checks the deal stage…

getOppStage.php

View the code here – https://gist.github.com/raujohn/1c3c0fb47bbb242e4940

getOppStage.php runs two API requests to SharpSpring which does the following (see comments in the code):

Find out the opportunity ID for the lead based on the lead ID provided by index.php (GET parameter)
- If there is no opportunity ID, exit and return 0
- If there is an opportunity ID, continue
Get the opportunity deal stage ID based on the opportunity ID
Compare the opportunity deal stage ID with our “Free Trial” deal stage id (12519427)
- If it is the same, return 1
- If not, return 0

How do you find out a deal’s Stage ID so you can compare it to what the API spits out? There are probably a few ways to do it, but this is how I did it:

Go to the deal pipeline in SharpSpring and right click on the stage label, hit inspect element.

Get the deal stage ID value from the parent element’s “data-dealstageid” attribute

And that’s it!

If you have any questions or comments please don’t hesitate to email me at john@accelweb.ca

Happy automating!

– John

Did this blog post help you? Would you like to see more, or be our next guest blogger? Check out our guest blogger guidelines for more information.