Transcript

00:00 yummy cookies mmm good hey everybody
00:14 Joe workman here and you know I've been
00:16 working hard on a lot of cool stuff
00:19 coming down the pipe but I took a little
00:21 respite yesterday and I shipped a really
00:24 cool update to cookie jar
00:26 I completely rented the entire thing
00:28 from scratch and I wanted to do a quick
00:31 video just kind of show you the new
00:34 features and how the new version works
00:36 and stuff like that right now if he
00:39 knows I don't have my big nights mic set
00:42 up so apologize if the audio is a little
00:44 wonky and I don't have a cool office
00:46 backdrop today but I just wanted to
00:48 knock out a really cool a quick video
00:51 for you guys to show you this awesome
00:53 new update so I hope you enjoy it okay
00:55 so here is the demo file that ships with
00:58 cookie jar um this is a updated new demo
01:00 file so if you want to check it out go
01:02 ahead to go to our doc portal go to the
01:05 cookie jar page and download the sample
01:06 project from there and it's this project
01:09 that we're looking at right now okay now
01:12 cookie jar 2 is completely different as
01:14 I said I redid everything from scratch
01:16 so if you have existing cookie jars on
01:18 your page it'll say cookie jar legacy b
11:21 if you want to use all these new
01:23 features you're gonna have to delete
01:24 that and add the new cookie jar stack to
01:27 the page well before you do it make sure
01:29 you you know copy over any sort of
01:31 content or text that you have and
01:32 something like that right okay so what
01:35 is new with cookie jar 2 as I said I
01:37 completely redid it
01:39 you know cookie jar the first version it
01:41 was kind of tricky because you had to do
01:43 like snippets and various places and
01:45 wrap it around your Google Analytics
01:46 code and stuff like that and I want it
01:49 to completely stream like that so that
01:51 you didn't have to worry about snippets
01:53 and everything was encapsulated inside
01:55 the stack really cool stuff so if we
01:58 look I added a cookie jar to the page
02:00 here and let's just go over the settings
02:03 so style settings simple you have either
02:06 position on the top and bottom padding
02:08 the background color of cookie jar okay
02:11 advanced layout we'll be going over that
02:12 in
02:13 it show a sample statement that's just a
02:15 little sample statement if you want to
02:16 copy and paste that you can use that it
02:19 doesn't actually show it's just a way of
02:20 copying and pasting some sample
02:22 statement okay really quick thing you
02:24 probably want to link to a privacy
02:26 policy in your official text here I you
02:29 know check your laws it might be
02:31 required it might not be but you
02:33 probably want to do that next up is
02:35 behavior important here it uses implied
02:40 consent by default this means that all
02:43 JavaScript code is ran by default okay
02:46 and it is only it only stops running if
02:49 the user explicitly rejects cookies so
02:53 even though cookie jar can be shown the
02:56 JavaScript will still run okay until the
02:59 user clicks reject
03:05 so that's an important thing if you now
03:07 if you uncheck implied consent this
03:10 means that you want explicit consent
03:12 this means that JavaScript will not run
03:15 okay the JavaScript that you can pick
03:17 you're inside the stack will not run
03:19 until the user explicitly clicks the
03:22 accept button okay so a very important
03:26 distinction between those two things
03:28 we have a limit by buttons here which I
03:30 pass over you can limit by occurrences
03:32 so you can only show it X number of
03:33 times okay if you turn this off its
03:36 unlimited same thing for duration if you
03:39 want to only show the cookie charge
03:40 statement on your page for a certain
03:42 amount of time and then it'll auto hide
03:43 itself you can do that with this by
03:46 default it'll show indefinitely with
03:49 that turned on okay
03:50 the test mode basically is I know it's a
03:53 lot of times it's tricky if you
03:54 accidentally click accept' inside
03:56 rapidweaver this testimony can always
03:59 preview cookie jar inside rapidweaver
04:02 okay so if you want to make sure that
04:04 you can always test it just go ahead and
04:06 click on this test mode and you'll
04:07 always be able to preview cookie jar
04:09 whether or not you click accept or
04:10 reject or whatever
04:12 next up we have the JavaScript code
04:14 areas okay this first box here this is
04:17 where he gonna paste in your Analytics
04:20 code so whether or not that's from
04:21 Google or you know P wick or you know
04:24 clicky whatever analytic service you
04:27 used o squared there's another one right
04:28 just go ahead and paste that JavaScript
04:30 code in here now an important thing is
04:32 you have to make sure that you do not
04:34 contain the script tags there's a little
04:36 note down here you do not want the
04:38 little script tags you want just the
04:40 content that's inside the script tags
04:41 okay
04:42 so that's very important now if Fe you
04:45 have any other code that you want from
04:46 an old from some other widget or
04:48 something like that you can go and paste
04:50 that here in this other code area and
04:53 again same rules apply no script tags
04:55 just straight-up JavaScript goes inside
04:58 these boxes okay and the code that's
05:01 inserted here is totally controlled by
05:03 whether or not you know the person
05:05 accepts or rejects cookies okay if you
05:08 look inside this demo I have like a
05:10 little alert box this doesn't work
05:12 inside Raptor Bieber but if you preview
05:14 in a browser you'll see that you'll get
05:15 the alert pop-up box inside you know
05:19 your default browser so that's a nice
05:21 way of testing just putting this little
05:23 alert code that you know it'll it'll pop
05:26 up a JavaScript alert or you have to
05:28 click OK and then you know that way you
05:31 can test whether or not this script
05:32 actually runs or not so that's that's a
05:35 handy little tool next up is external
05:38 scripts now if you have a URL to a
05:41 warehouse you know javascript file that
05:43 you want to load externally when a user
05:46 accepts a cookie ok you can do that here
05:48 so instead of paste in the JavaScript
05:50 inside these boxes you can load up to
05:52 four separate JavaScript files just by
05:55 putting in the URLs to those JavaScript
05:57 files ok so really easy simple stuff
06:01 there just so you can see what a new
06:04 cookie jar stack looks like when you add
06:07 cookie jar to the page you can add
06:08 whatever you know tech stack that you
06:10 want you know up here in the statement
06:12 area and then you add any button you
06:14 want into accept and any button you want
06:17 into reject and it should work so
06:18 whether or not you're using foundation
06:20 buttons or sweet button or you know the
06:22 default Stax button or
06:24 whatever button you want okay you can
06:27 use those inside these drop areas now
06:29 you can put whatever text stack you want
06:30 in here inside here as well and if you
06:32 notice cookie jar has zero like text
06:34 styling options that's because all of
06:36 those text island options will be done
06:38 by whatever your favorite text stack
06:40 that you want to add into the statement
06:42 area contains right so that way you know
06:45 it'll leverage either the framework or
06:47 the theme that you're using and it'll
06:49 just inherit so you can make everything
06:51 look identical to your theme
06:54 now if you choose the advanced layout
06:56 area you'll notice that there is you
06:59 know no drop zone here okay so what you
07:02 can do is you can add whatever stacks
07:06 that you want in here so if I want to go
07:08 ahead and add in
07:13 so if I want to go in and add like just
07:15 like a tech stack okay or I can add
07:17 let's say a two column stack with text
07:19 inside there okay
07:21 now if I want to add my buttons I can go
07:23 ahead and say there's child sacs here
07:25 for accept button wrapper and when you
07:27 do that basically this is the drop zone
07:29 where you add an accept cookie okay and
07:32 if you click on it the other one
07:33 obviously in the reject this is where
07:35 you add a reject button okay
07:38 so let's look at the layout that I
07:39 already created here
07:42 and in this stack you'll notice that I
07:45 had a two column stack
07:46 I added some text okay and then over
07:48 here in the second column I added a
07:51 sweet button stack that will be my
07:53 accept and a sweet button stack that
07:56 will be my reject button so if we
07:59 preview the page you'll see down at the
08:00 bottom I have my cookie statement with
08:01 my acceptant declined buttons that I
08:03 created inside coupon
08:05 now inside cookie jar on the advanced
08:07 layout page you'll notice that I have an
08:10 example of using an external script here
08:12 so here I'm loading in an external
08:14 script from my server so this is just
08:16 sandbox our children at net slash alert
08:18 j/s okay and that code will only run
08:22 right when cookies have been accepted
08:25 now to show you that in action here is
08:27 the advanced layout page now this is
08:29 currently it's set to be explicit
08:31 consent so no Java Script is run until I
08:34 click on this accept button okay so if
08:37 you notice once I click this accept
08:39 button that remote javascript file that
08:41 I loaded is executed okay and because
08:44 that would that alert pop j/s file that
08:46 we just saw earlier that I added to the
08:48 stack actually you know loads a pop-up
08:50 window so if I close that and notice
08:52 that the JavaScript ran the consenting
08:55 hid and if i refresh the page that
09:00 remote script is always gonna load now
09:02 because I accepted that cookie request
09:06 so that's cookie jar - but I hope you
09:08 enjoy it I hope you like it as you saw
09:10 that you know I really tried to
09:11 streamline what it does right it doesn't
09:14 do any styling right you add whatever
09:16 styled components you want to the stack
09:18 and it does what it does best right
09:21 displaying the modal accepting clicks on
09:24 accept and reject and manages those
09:27 cookies for you and executing the
09:29 JavaScript or not right so it does all
09:31 of those things well it does some really
09:34 well and it's simple because it's all
09:36 encapsulated in the stack you don't need
09:38 to worry about snippets and you know
09:40 adding some weird syntax into your
09:42 global config somewhere it's just all
09:44 encapsulated inside the stack and I hope
09:48 you enjoyed this free update it's really
09:49 cool and if you liked it let me know
09:52 over on weber space we'll talk to you
09:54 soon
09:54 bye
10:03 you"}]