1
00:00:00,570 --> 00:00:05,190
In the last video we were able to successfully test out our mail or object.

2
00:00:05,190 --> 00:00:10,230
So looks like the mailer is working correctly but there is one immediate glaring thing that's caught

3
00:00:10,230 --> 00:00:13,440
my eye and that is the actual body of the e-mail.

4
00:00:13,590 --> 00:00:18,600
Right now our e-mail template is just passing through the survey body which is definitely not what we

5
00:00:18,600 --> 00:00:19,020
want.

6
00:00:19,020 --> 00:00:24,540
Remember we want to kind of explain to users exactly what's going on here and tell them hey give us

7
00:00:24,540 --> 00:00:29,400
your input click on one of these buttons and then if there is a message that is provided by the person

8
00:00:29,400 --> 00:00:32,550
who authored the survey we of course do want to show it in there.

9
00:00:32,620 --> 00:00:36,520
We want to assume that we're going to kind of instruct the user what they need to do.

10
00:00:36,930 --> 00:00:42,680
So remember that the body of the e-mail is being produced currently by our survey template file.

11
00:00:43,020 --> 00:00:47,340
So let's edit that thing and make sure that the body of the e-mail makes a little more sense than it

12
00:00:47,340 --> 00:00:48,640
does right now.

13
00:00:48,680 --> 00:00:50,800
So I going to change back over to my code editor.

14
00:00:51,090 --> 00:00:56,790
I'm going to find my services directory inside of their email templates and then open up the survey

15
00:00:56,790 --> 00:00:58,430
template file.

16
00:00:58,590 --> 00:01:03,820
At present we are returning a simple div that contains the body text from the survey.

17
00:01:03,840 --> 00:01:05,580
Obviously not quite what we want.

18
00:01:05,580 --> 00:01:11,600
So I'm going to take all this and remove it for now rather than returning just a simple string we're

19
00:01:11,610 --> 00:01:15,510
going to return an entire small snippet here.

20
00:01:15,510 --> 00:01:17,770
This is going to be a multi-line string.

21
00:01:17,970 --> 00:01:22,260
So to handle multiline strings very well are very elegantly with javascript.

22
00:01:22,260 --> 00:01:27,440
We usually make use of tactic's strings or string templates.

23
00:01:28,080 --> 00:01:34,530
So I'm going to place an opening back Tich a closing back Tich a semi-colon afterwards and then side

24
00:01:34,530 --> 00:01:39,840
of here we can write as much H TMail as we want to without having to put any escape characters when

25
00:01:39,840 --> 00:01:41,610
we need a newline.

26
00:01:41,640 --> 00:01:42,810
OK so let's get to it.

27
00:01:42,810 --> 00:01:45,610
We're going to vastly improve the template here.

28
00:01:45,630 --> 00:01:49,540
We're going to add in a lot of markup which means we're going to do a pretty good amount of typing.

29
00:01:49,620 --> 00:01:51,320
So let's get to it.

30
00:01:51,330 --> 00:01:59,130
First off we're going to place our female tag who place our body tag and then inside of the body tag

31
00:01:59,210 --> 00:02:07,310
will place a div with a style of text dash a line center like so.

32
00:02:07,350 --> 00:02:13,230
So everything inside that email is going to be centered perfectly then immediately inside the div will

33
00:02:13,230 --> 00:02:18,420
place and H-3 that kind of tells the user what's going on here and why they receive this email will

34
00:02:18,420 --> 00:02:22,620
say I'd like your input like so.

35
00:02:23,070 --> 00:02:24,730
Well then place a p tag.

36
00:02:24,780 --> 00:02:29,430
So a paragraph tag and give the user a little bit more explanation of what's going on.

37
00:02:29,460 --> 00:02:32,620
Please answer the following question.

38
00:02:33,930 --> 00:02:36,400
We'll close out the tag place another one.

39
00:02:36,490 --> 00:02:43,840
And then inside the second tag is where we're going to place the survey body so whatever body was provided

40
00:02:43,840 --> 00:02:47,540
to the survey model that's where we're going to place it right in here.

41
00:02:47,620 --> 00:02:56,420
So we'll put our dollar sign or curly braces and reference survey body like so then underneath this

42
00:02:56,480 --> 00:03:01,500
will place the two links that a user can click on to either specify yes or no.

43
00:03:01,520 --> 00:03:05,060
So give a div inside the first one.

44
00:03:05,050 --> 00:03:08,420
I'm going to place an anchor tag with an H ref.

45
00:03:08,420 --> 00:03:13,430
And right now we're going to use localhost we're going to send the user back to localhost or our current

46
00:03:13,670 --> 00:03:14,820
re-act application.

47
00:03:14,960 --> 00:03:19,580
But we will very shortly come back and do a little bit more exploration on exactly what this route should

48
00:03:19,580 --> 00:03:19,980
be.

49
00:03:20,150 --> 00:03:24,770
So right now we're just going to send the user to localhost but we will very shortly come back and resolve

50
00:03:24,770 --> 00:03:25,820
this.

51
00:03:25,820 --> 00:03:33,070
So we will say HTP colon slash slash localhost 3000.

52
00:03:33,620 --> 00:03:38,660
I'll close off the anchor tag and this will be our guest button and then we're going to do the exact

53
00:03:38,660 --> 00:03:41,350
same thing again for the no button.

54
00:03:41,390 --> 00:03:52,840
So a Tref TTP localhost 3000 closed off the anchor tag and say no.

55
00:03:53,410 --> 00:03:53,780
OK.

56
00:03:53,790 --> 00:03:54,750
So a lot of typing.

57
00:03:54,900 --> 00:03:56,930
But this is basically what we need for right now.

58
00:03:56,930 --> 00:04:00,300
So we've got the entire body of the email.

59
00:04:00,500 --> 00:04:05,300
Now of course if you wanted to you can add a tremendous amount of styling to this thing.

60
00:04:05,380 --> 00:04:09,140
Do we think that we're going to change in the future inside this template is to go back and change out

61
00:04:09,150 --> 00:04:11,240
this dreadful property a little bit more.

62
00:04:11,240 --> 00:04:16,850
So if you want to add in a lot of pretty styling a lot of stuff to make this email much more attractive

63
00:04:17,030 --> 00:04:18,700
certainly feel free to do so.

64
00:04:18,770 --> 00:04:22,750
There's a lot of tools online for making great looking emails.

65
00:04:22,790 --> 00:04:28,400
You can use those tools and copy all the markup directly into this file and just make sure that eventually

66
00:04:28,400 --> 00:04:33,740
somewhere you place the survey body property and the two anchor tags that we need to indicate either

67
00:04:33,920 --> 00:04:36,580
yes or no to this particular survey.

68
00:04:37,070 --> 00:04:37,360
OK.

69
00:04:37,370 --> 00:04:39,850
So I think that we should probably test this out again.

70
00:04:39,950 --> 00:04:46,280
Now I did just kill those Axel's helpers to assign Axel's to the window object so we can use X Files

71
00:04:46,280 --> 00:04:48,230
from the console we just remove that.

72
00:04:48,230 --> 00:04:50,830
But you know I'm kind of realizing maybe we should test this out again.

73
00:04:50,840 --> 00:04:56,960
So I'm going to go back to my client file client directory excuse me I'll find the index file in there

74
00:04:57,310 --> 00:04:59,480
and I can put the accedes helpers back in.

75
00:04:59,480 --> 00:05:07,960
So when you say import x Dio's from ASIO's and window x equals x Yes.

76
00:05:08,240 --> 00:05:11,110
And I'm probably just going to leave these in here for a while.

77
00:05:11,150 --> 00:05:18,900
I'll put a comment at the top right above it and just say development only X Deo's helpers like so.

78
00:05:19,400 --> 00:05:24,540
So we'll just leave these in for right now and maybe we later come back and take them out.

79
00:05:24,640 --> 00:05:26,410
OK so time to test this out.

80
00:05:26,420 --> 00:05:28,190
I will make sure that my servers running.

81
00:05:28,280 --> 00:05:30,380
Looks like it is no airs over here.

82
00:05:30,380 --> 00:05:38,110
I'm going to go back over to my re-act application or refresh the page now I don't have to type out

83
00:05:38,140 --> 00:05:40,770
the entire survey from scratch again.

84
00:05:41,140 --> 00:05:45,630
I can press the up arrow in the console and find the survey declaration again.

85
00:05:45,640 --> 00:05:46,930
So here's my survey.

86
00:05:46,930 --> 00:05:49,360
But this time I'm going to give it a much more reasonable body.

87
00:05:49,390 --> 00:06:01,180
I'm going to say we would love to hear if you enjoyed our services and then maybe for a subject will

88
00:06:01,180 --> 00:06:10,270
give us something realistic as well and we'll say something like give us feedback and so like that whatever

89
00:06:10,550 --> 00:06:12,800
you need to just catch the user's eye.

90
00:06:13,390 --> 00:06:20,620
So now we've got our survey again we're going to send this up to our API using X-post post give our

91
00:06:20,620 --> 00:06:23,190
route and then specify the survey.

92
00:06:23,200 --> 00:06:28,540
Now again we are not really resolving their request at this point so their request will hang but we

93
00:06:28,540 --> 00:06:31,570
should see that email pop up in our inbox.

94
00:06:31,600 --> 00:06:36,990
So if I flip back over to Gmail Now here's my new e-mail says inbox 1.

95
00:06:37,520 --> 00:06:39,490
Here's give us feedback.

96
00:06:39,490 --> 00:06:39,890
All right.

97
00:06:39,970 --> 00:06:40,530
Check it out.

98
00:06:40,570 --> 00:06:43,210
So it says I'd like your input please answer the following question.

99
00:06:43,210 --> 00:06:47,360
We would love to hear if you enjoyed our services and then you click yes or no.

100
00:06:47,710 --> 00:06:56,860
Now very important at this point I'm going to open up my chrome dev tools over here inside of Gmail

101
00:06:57,220 --> 00:07:01,010
and I'm going to inspect these two anchor tags.

102
00:07:01,330 --> 00:07:07,340
So while we've got some deeply nested H.T. mail if I gave it just a little bit of space here let's kind

103
00:07:07,350 --> 00:07:10,430
to shrink this thing down.

104
00:07:10,810 --> 00:07:11,870
OK there we go.

105
00:07:12,120 --> 00:07:12,390
OK.

106
00:07:12,400 --> 00:07:14,060
So here's our link.

107
00:07:14,200 --> 00:07:20,330
You can see that it very plainly has a crazy generated anchor tag in here.

108
00:07:20,470 --> 00:07:25,290
So you and I we just defined this link right here this anchor tag we had just said oh yeah.

109
00:07:25,300 --> 00:07:27,470
Take us to local home 3000.

110
00:07:27,520 --> 00:07:34,660
But clearly without a doubt centigrade is absolutely positively rewriting that you are l that we specified

111
00:07:34,660 --> 00:07:38,810
in there with its own custom klick tracking you are l instead.

112
00:07:38,920 --> 00:07:43,830
And so this is what we're talking about earlier where we are going to rely upon said grid to track user's

113
00:07:43,840 --> 00:07:49,990
clicks rather than trying to do it ourselves because the email that we provide to send grid is always

114
00:07:49,990 --> 00:07:51,270
the same for everyone.

115
00:07:51,460 --> 00:07:57,310
But since Great has the ability to customize these links on a per user basis so Sigurd can identify

116
00:07:57,310 --> 00:08:00,400
our users we cannot.

117
00:08:00,640 --> 00:08:02,060
So the link is really crazy.

118
00:08:02,200 --> 00:08:07,020
But when we click on it it still ends up redirecting us back over to localhost 3000.

119
00:08:07,210 --> 00:08:09,780
So send grid intercepts the link.

120
00:08:09,790 --> 00:08:15,040
They say OK we're going to record some metric sphere and then they force the user onto eventually the

121
00:08:15,040 --> 00:08:18,430
route that we actually specified which is localhost 3000.

122
00:08:18,830 --> 00:08:19,230
OK.

123
00:08:19,270 --> 00:08:24,190
So it looks like our e-mail the body of it looks a little bit better than it did before.

124
00:08:24,190 --> 00:08:28,540
Again if you want to put a little bit of time into customizing this thing make it look a little bit

125
00:08:28,540 --> 00:08:30,740
better certainly feel free to do so.

126
00:08:30,850 --> 00:08:35,790
The only thing that we're going to do again is to customize the two anchor tags.

127
00:08:35,800 --> 00:08:36,110
All right.

128
00:08:36,130 --> 00:08:37,500
So let's take a quick break.

129
00:08:37,510 --> 00:08:42,760
When we come back in the next section we're going to start to work on our survey route's handler a little

130
00:08:42,760 --> 00:08:47,550
bit more just to make sure that this thing actually eventually resolves the request.

131
00:08:47,560 --> 00:08:52,660
We're also going to inspect send grid and make sure that our Click Track team is set up properly and

132
00:08:52,660 --> 00:08:55,090
then we'll continue working on our application.

133
00:08:55,120 --> 00:08:57,650
So let's keep going in the next section.