Transcript

00:06 hey everybody Joe workman here and in
00:09 this video we're gonna be reviewing the
00:11 new call to action sack and how to use
00:14 it so not really really gonna dive into
00:17 all the features we're just gonna deep
00:19 dive straight into rapidweaver and see
00:21 exactly how easy it is to implement so
00:24 here we are inside the demo project that
00:26 shipped with call to action and this is
00:29 the project that is used to build the
00:31 demo website for call to action and what
00:34 you'll notice in the library is that
00:35 call to action ships with two stacks you
00:38 have the call to action sack and then
00:39 the scroll line stack the first one
00:42 we're gonna review is this call to
00:43 action stack and it's really simple you
00:47 add it to the page there's actually by
00:48 default no content to add alright it's
00:51 just a stack that you add to the page so
00:53 if we dive into the settings we'll see
00:55 that the settings are break basically
00:57 broken down into kind of four different
00:59 sections first we have the trigger okay
01:03 and this is going to be exactly what
01:06 action do we want to trigger our call to
01:08 action for right is it on scroll on
01:11 click on enter or exit intent okay
01:16 now an action you can actually have
01:18 multiple triggers for a single action so
01:21 if you wanted this to be able to be on
01:23 scroll click enter and exit you can do
01:27 that okay
01:28 and we'll you'll notice is as you start
01:30 ticking these triggers options will show
01:33 up for it okay so like for example on
01:37 scroll the scroll offset is the number
01:40 of pixels it's going to wait until that
01:42 element is on the screen to actually
01:44 trigger that action so when this setting
01:47 is set to 50 it's going to wait till
01:49 that particular point that you've added
01:51 it to the page is 50 pixels from the
01:53 bottom and then it will trigger the
01:55 action click doesn't have any particular
01:59 actions but you'll notice that the you
02:01 now have a drop down area okay we'll go
02:05 over that in just a little bit on how
02:08 you can potentially use that drop down
02:09 for clicks
02:13 or enter you'll notice that you have a
02:15 load delay this is the number of seconds
02:20 that after the page load that the action
02:24 will be triggered so by default can be
02:26 so it means that actions gonna get
02:28 triggered immediately after the page is
02:29 loaded you could say you know load it
52:32 seconds after the page is loaded so on
02:35 and so forth
02:36 next up is exit and we'll see that with
02:39 exit we have different exit intent logic
02:42 the default is gonna be focused out then
02:45 we have other things of leave mouse top
02:46 and leave Mouse top and focus out and
02:48 we'll show examples of that in a little
02:50 bit so that's how we define our trigger
02:53 ok our call to action ok this is the
02:57 actual action that you want to launch
03:00 now in this instance I'm launching my
03:04 reveal stack ok and but you'll notice so
03:07 if you want to select a different stack
03:09 to launch you just select that stack and
03:12 we'll notice is that there every single
03:14 one has a very unique identifier setting
03:16 to it ok the only one that kind of
03:20 doesn't right now is pop box and pop box
03:23 the way it works since the stack itself
03:26 doesn't have any sort of ID settings
03:28 what you do is you define the pop box
03:31 instance so if you have just one
03:34 instance of pop box on your page and you
03:36 want to launch it you would set that to
03:38 one if you were to have two instances on
03:40 your page and you wanted this action to
03:42 trigger the second instance you would
03:44 set this to two right so it's pretty
03:47 simple to use the rest of them all have
03:51 some sort of unique identifier that is
03:53 bring that has come in from the settings
03:55 of that particular stack after our our
04:02 actual call to action we have the
04:04 occurrence and this defines how often
04:08 you want that action to be triggered
04:11 so only once this is gonna say that
04:14 basically you only want to have this
04:16 action trigger once ever for a user ok
04:20 they can clear their cookies and whatnot
04:22 this will it still will not trigger ok
04:25 if they completely
04:26 all their their cash in their browser it
04:28 will refresh again right but this is
04:31 very persistent there is no Express
04:34 expiration date on it the user will only
04:36 see at one time you can say once per
04:41 time period so this is where it uses a
04:43 cookie that expires after a certain time
04:46 so you can say you know I only want to
04:48 show it once per 100 days or 50 days or
04:52 30 days right it will notice is whenever
04:54 you click an occurrence
04:56 you'll get various options here the
04:58 action ID okay this allows us to keep
05:02 track of this action and this action ID
05:05 actually allows you to keep track across
05:07 multiple pages as well right so if
05:10 you're saying once per time period and
05:12 you have the same exact call to action
05:14 on multiple pages it will only trigger
05:17 once on all the pages as long as it has
05:20 the same exact action ID so that's
05:23 that's really important this ID can be
05:24 used to tie your action and your
05:26 occurrences across your entire site you
05:32 can do once per session once per shchet
05:35 once per session means that if the user
05:38 closes their browser or opens a new tab
05:41 that is considered a new session and
05:43 they will see that call to action again
05:46 but once they've seen it within that
05:49 session they will never see it again
05:51 until they start a new one and then you
05:54 have once per page load which is
05:55 basically you're gonna see that action
05:57 once on the page and if they refresh the
06:00 page or come back to it at any point it
06:02 will happen again and then lastly we
06:07 have tracking and this allows us to do
06:10 custom event tracking into our analytics
06:13 software so if you want to choose Google
06:15 you can then choose the category action
06:18 and label for that action and that will
06:20 be logged inside Google Analytics and
06:23 same thing for all the other analytics
06:25 software now there is a custom option
06:28 here and with this what you need to do
06:30 is you need to put in the exact
06:32 JavaScript code that your analytic
06:35 software requires
06:37 now if this doesn't work you're gonna
06:40 have to work with your analytic software
06:42 company to figure out what it is right I
06:45 can't help with everybody's JavaScript
06:48 code I I added this Forex explicitly for
06:51 people that have analytics software that
06:54 is outside of these supported ones so
06:56 you can add your own analytics code and
06:59 it will launch this JavaScript so be
07:02 careful with your syntax make sure it's
07:04 perfect and it will get executed so I
07:08 said earlier that we're gonna review how
07:10 to you know configure a click action so
07:14 here I am on the actions page and I have
07:16 this call to action stack here and it's
07:19 set to click now what I can do is I can
07:22 enter in any button or paragraph with
07:26 links in it inside this call to action
07:29 stack and whenever any of these are
07:33 clicked it will trigger the action so if
07:38 I click on this button if I click on any
07:40 of the links inside of a text area this
07:44 action will be triggered now if we look
07:48 at these text links it's just a bear
07:50 link doesn't really have anything
07:52 special now however this second link
07:55 that we have in here this is set to
07:57 actually be a URL and it's set to be
07:59 open in new window now if you remember
08:03 from the overview video if you have a
08:06 link that triggers an action and it's
08:08 set to open in a new window
08:10 that link will actually open up in a new
08:14 window but then when the user comes back
08:16 to your web page they'll see that that
08:19 action has been triggered so you'll see
08:21 the lightbox or whatever stack that you
08:22 launched within your action so that's a
08:25 very nice feature now I wanted to review
08:30 the the actual exit intent logic here
08:33 the focus out exit intent which is the
08:37 default basically means if the window is
08:40 going to focus out so the way we can
08:42 trigger that is if we click on the
08:44 browser bar we'll see that that exit
08:47 intent is shown okay if we
08:51 click outside of the window at all so I
08:54 clicked on my desktop the browser window
08:55 is no longer active it launches the exit
08:58 intent so that is focused out the next
09:03 exit intent is called Mouse leave top
09:06 and what you'll notice is if my mouse
09:09 ever crosses above the document so it
09:13 leaves the document on the top it
09:16 triggers the exit intent so basically it
09:20 the logic here is that the user is gonna
09:22 switch tabs these are gonna click on a
09:24 button the user is gonna click on the
09:26 browser URL bar the users gonna leave
09:29 your web page potentially okay this
09:32 could trigger a lot of false positives
09:34 ok but this is probably the most popular
09:37 method that exit intent is used across
09:39 the web and will you'll notice is my
09:43 mouse can leave the browser at any other
09:45 point they can leave on the Left I can
09:47 leave on the right it can go on the
09:48 bottom and it doesn't get triggered it
09:49 only gets triggered if the mouse leaves
09:52 at the top of the window now the last
09:56 option here is leave mouse top and focus
10:00 out this is a combination of the two
10:04 I can now my mouse can now leave
10:07 anywhere I can make the window lose
10:09 focus by clicking on my desktop the
10:11 browser is no longer active I can click
10:13 back on it right my mouse can go above
10:16 and it's not gonna trigger anything the
10:19 only time it's going to get triggered is
10:22 if I click on the browser bar ok or I
10:25 add a new tab ok so the mouse has to
10:29 leave on top of the page and then the
10:33 window needs to be moved out of focus so
10:36 it's this is a combination of the the
10:39 previous two actions or exit intents
10:42 that we looked at now I just wanted to
10:44 really quickly
10:46 on the integrations since we're doing a
10:48 video on how to just to give you an
10:51 example so here is a example Glyder
10:54 stack that is getting launched via a
10:56 call to action and inside the glider
10:58 settings there is an external launch ID
11:00 which is set to be glider
11:03 if we scroll down and look at the
11:06 call-to-action that launches this glider
11:08 okay we'll see that the call-to-action
11:10 is been set to be glider and the glider
11:14 ID is set to surprise glider right which
11:17 is what the ID was inside the glider
11:19 stack okay the same thing happens for
11:23 everything top box um focus uses the
11:27 button label okay so whatever you set to
11:30 as the button label for focus okay the
11:34 rest are all the IDS inside the stacks
11:36 for example if we look at focus if I
11:39 scroll down and let's look at focus okay
11:42 we'll see that the label here is set to
11:44 be button label and then in my call to
11:48 action this is exactly what I would put
11:51 into the call-to-action setting for the
11:54 ID for focus now focus has another thing
12:00 with it focus has a button itself and
12:03 many times you forget to be using
12:05 call-to-action you might not want
12:07 focuses button on the page maybe you do
12:10 maybe you want the button there and then
12:12 have something externally call that
12:13 potentially as well okay so having an
12:16 option that the customer can click on it
12:17 else maybe it's an exit intent okay but
12:22 what if we don't want focuses button on
12:25 the page a nice workaround for this is
12:29 to simply use my free static height
12:31 stack and basically you would throw
12:33 focus inside static height and you're
12:36 gonna set the height to be zero pixels
12:38 so it's still on the page um and it's
12:42 not a hidden element so we can still
12:43 trigger actions off of it but it's just
12:46 set to be zero pixels tall so it will be
12:49 effectively invisible but it will still
12:52 reside on the page now the last thing
12:55 we're gonna look at is the scroll line
12:57 stack that comes with the call to action
12:59 as well and if you look at this you'll
13:01 see that basically in edit mode you see
13:03 that the color of the bar okay and the
13:06 settings are very you know
13:07 self-explanatory
13:08 the position of your bar is gonna be on
13:10 the top the bottom the left or the right
13:12 what are the two colors that you want it
13:15 to be
13:16 the opacity of the bar what's the size
13:19 and then z-index so based on the themes
13:22 that you're using you might need to
13:24 tweak the z-index in case things are
13:26 below it or sitting on top of it and
13:28 things of that nature
13:29 okay um they can also reverse direction
13:32 so basically it's kind of coward counter
13:35 intuitive and the scroll bar goes in the
13:37 opposite direction that you might expect
13:39 it to now the rest of the settings in
13:42 this stack are identical to the normal
13:44 call-to-action stack because when scroll
13:47 line reaches the bottom of the page it
13:49 can launch an action now if you don't
13:51 want to launch an action you can set the
13:52 call-to-action to none which is the
13:54 default okay
13:55 but if you want to call to action at the
13:57 end you do the same exact thing that we
13:59 just reviewed you set your action you
14:02 define your occurrence and then you
14:04 define your tracker if you want to send
14:05 that event information to your analytics
14:07 software and that's it that is called
14:10 action it's really simple to use you see
14:12 there's not too many settings but it's
14:14 powerful right especially it could be a
14:16 little bit tricky trying to get all
14:18 those integrations working just tying
14:19 the IDs and again it's just making sure
14:21 your day ID you set in the integration
14:23 stack is the same thing in the call to
14:25 action stack you know so it's pretty
14:28 simple to use I hope you understand kind
14:31 of those event triggers especially the
14:32 exit intent I want to make sure that you
14:34 understood under what conditions those
14:37 would get launched right so you can
14:39 strategically plan on how you're gonna
14:41 interact with your visitors and your
14:43 customers I hope you love call-to-action
14:46 um
14:47 don't overuse it right I know I really
14:51 explained the occurrence settings right
14:53 and how we can leverage those to not be
14:56 annoying to our users okay now a lot of
14:59 you are probably thinking I don't want
15:01 to use this at all because I this is the
15:04 most annoying thing on the web ever
15:06 but what that said is these things work
15:11 they they work to build your email list
15:14 they work to build customers and leads
15:18 while a lot of us may be potentially
15:21 more advanced users and people that are
15:24 on the web all the time and design web
15:26 right we might find them as an annoyance
15:29 but
15:30 the research shows that this works so
15:36 hopefully with the settings and the
15:38 occurrences and how we can customize the
15:40 triggers we can make it so that it's
15:43 good for us we don't and we're not gonna
15:46 be an annoyance to our users right I
15:49 think it's powerful
15:50 um I can't wait to use it I'm gonna
15:52 start you might start seeing it here and
15:54 there on my sites as well especially
15:56 when I redesign my site later this year
15:58 so without further ado thank you very
16:01 much for watching I hope you learned a
16:03 little bit and I hope you'll of call to
16:05 action so thanks very much everybody"}]