Skip to content

Commit 680eaa5

Browse files
ukutahtukutaht
authored
Initial UI mock for scriptv2 onboarding (#5383)
* Add flag for scriptv2 onboarding, render different installation screen * Manual installation screen mockup * Use phoenix form helpers * Format * Move manual tagging to advanced options
1 parent 6987ea8 commit 680eaa5

File tree

5 files changed

+292
-1
lines changed

5 files changed

+292
-1
lines changed

‎lib/plausible_web/components/generic.ex

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -793,4 +793,46 @@ defmodule PlausibleWeb.Components.Generic do
793793
</.h2>
794794
"""
795795
end
796+
797+
alias Phoenix.LiveView.JS
798+
799+
slot :inner_block, required: true
800+
801+
def disclosure(assigns) do
802+
~H"""
803+
<div>
804+
{render_slot(@inner_block)}
805+
</div>
806+
"""
807+
end
808+
809+
slot :inner_block, required: true
810+
attr :class, :any, default: nil
811+
812+
def disclosure_button(assigns) do
813+
~H"""
814+
<button
815+
type="button"
816+
id="disclosure-button"
817+
data-open="false"
818+
phx-click={
819+
JS.toggle(to: "#disclosure-panel")
820+
|> JS.toggle_attribute({"data-open", "true", "false"}, to: "#disclosure-button")
821+
}
822+
class={@class}
823+
>
824+
{render_slot(@inner_block)}
825+
</button>
826+
"""
827+
end
828+
829+
slot :inner_block, required: true
830+
831+
def disclosure_panel(assigns) do
832+
~H"""
833+
<div id="disclosure-panel" style="display: none;">
834+
{render_slot(@inner_block)}
835+
</div>
836+
"""
837+
end
796838
end

‎lib/plausible_web/live/components/form.ex

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,10 @@ defmodule PlausibleWeb.Live.Components.Form do
9999
<div class={[
100100
@mt? && "mt-2"
101101
]}>
102-
<.label for={@id} class="gap-x-2 flex flex-inline items-center sm:justify-start justify-center ">
102+
<.label
103+
for={@id}
104+
class="font-normal gap-x-2 flex flex-inline items-center sm:justify-start justify-center "
105+
>
103106
<input type="hidden" name={@name} value="false" disabled={@rest[:disabled]} />
104107
<input
105108
type="checkbox"

‎lib/plausible_web/live/installation.ex

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,13 @@ defmodule PlausibleWeb.Live.Installation do
4040
:viewer
4141
])
4242

43+
socket =
44+
if FunWithFlags.enabled?(:scriptv2, for: site) do
45+
redirect(socket, to: "/#{domain}/installationv2?flow=#{params["flow"]}")
46+
else
47+
socket
48+
end
49+
4350
flow = params["flow"]
4451
meta = site.installation_meta || %Plausible.Site.InstallationMeta{}
4552

‎lib/plausible_web/live/installationv2.ex

Lines changed: 233 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
defmodule PlausibleWeb.Live.InstallationV2 do
2+
@moduledoc """
3+
User assistance module around Plausible installation instructions/onboarding
4+
"""
5+
use PlausibleWeb, :live_view
6+
7+
def mount(
8+
%{"domain" => domain},
9+
_session,
10+
socket
11+
) do
12+
site =
13+
Plausible.Sites.get_for_user!(socket.assigns.current_user, domain, [
14+
:owner,
15+
:admin,
16+
:editor,
17+
:super_admin,
18+
:viewer
19+
])
20+
21+
{:ok,
22+
assign(socket,
23+
site: site,
24+
installation_form: to_form(site.installation_meta.script_config),
25+
flow: "provisioning",
26+
installation_type: "manual"
27+
)}
28+
end
29+
30+
def render(assigns) do
31+
~H"""
32+
<div>
33+
<PlausibleWeb.Components.FlowProgress.render flow={@flow} current_step="Install Plausible" />
34+
35+
<.focus_box>
36+
<:title>
37+
Manual installation
38+
</:title>
39+
40+
<:subtitle :if={@installation_type == "manual"}>
41+
Paste this snippet into the <code>&lt;head&gt;</code>
42+
section of your site. See our
43+
<.styled_link href="https://plausible.io/docs/integration-guides" new_tab={true}>
44+
installation guides.
45+
</.styled_link>
46+
Once done, click the button below to verify your installation.
47+
</:subtitle>
48+
49+
<div :if={@installation_type in ["manual", "GTM"]}>
50+
<.snippet_form
51+
installation_form={@installation_form}
52+
installation_type={@installation_type}
53+
flow={@flow}
54+
site={@site}
55+
/>
56+
</div>
57+
</.focus_box>
58+
</div>
59+
"""
60+
end
61+
62+
defp snippet_form(assigns) do
63+
~H"""
64+
<form id="snippet-form">
65+
<div class="relative">
66+
<textarea
67+
id="snippet"
68+
class="w-full border-1 border-gray-300 rounded-md p-4 text-sm text-gray-700 dark:border-gray-500 dark:bg-gray-900 dark:text-gray-300"
69+
rows="5"
70+
readonly
71+
><%= render_snippet(@installation_type, @site) %></textarea>
72+
73+
<a
74+
onclick="var input = document.getElementById('snippet'); input.focus(); input.select(); document.execCommand('copy'); event.stopPropagation();"
75+
href="javascript:void(0)"
76+
class="absolute flex items-center text-xs font-medium text-indigo-600 no-underline hover:underline bottom-2 right-4 p-2 bg-white dark:bg-gray-900"
77+
>
78+
<Heroicons.document_duplicate class="pr-1 text-indigo-600 dark:text-indigo-500 w-5 h-5" />
79+
<span>
80+
COPY
81+
</span>
82+
</a>
83+
</div>
84+
85+
<.h2 class="mt-8 text-sm font-medium">Optional measurements</.h2>
86+
<.script_config_control
87+
field={@installation_form["outbound-links"]}
88+
label="Outbound links"
89+
tooltip="Automatically track clicks on external links. These count towards your billable pageviews."
90+
learn_more="https://plausible.io/docs/outbound-link-click-tracking"
91+
/>
92+
<.script_config_control
93+
field={@installation_form["file-downloads"]}
94+
label="File downloads"
95+
tooltip="Automatically track file downloads. These count towards your billable pageviews."
96+
learn_more="https://plausible.io/docs/file-downloads-tracking"
97+
/>
98+
<.script_config_control
99+
field={@installation_form["form-submissions"]}
100+
label="Form submissions"
101+
tooltip="Automatically track form submissions. These count towards your billable pageviews."
102+
learn_more="https://plausible.io/docs/form-submissions-tracking"
103+
/>
104+
105+
<.disclosure>
106+
<.disclosure_button class="mt-8 flex items-center group">
107+
<.h2 class="text-sm font-medium">Advanced options</.h2>
108+
<Heroicons.chevron_down mini class="size-4 ml-1 mt-0.5 group-data-[open=true]:rotate-180" />
109+
</.disclosure_button>
110+
<.disclosure_panel>
111+
<ul class="list-disc list-inside mt-2 space-y-2">
112+
<.advanced_option
113+
config={@site.installation_meta.script_config}
114+
variant="tagged-events"
115+
label="Manual tagging"
116+
tooltip="Tag site elements like buttons, links and forms to track user activity. These count towards your billable pageviews. Additional action required."
117+
learn_more="https://plausible.io/docs/custom-event-goals"
118+
/>
119+
<.advanced_option
120+
config={@site.installation_meta.script_config}
121+
variant="404"
122+
label="404 error pages"
123+
tooltip="Find 404 error pages on your site. These count towards your billable pageviews. Additional action required."
124+
learn_more="https://plausible.io/docs/error-pages-tracking-404"
125+
/>
126+
<.advanced_option
127+
config={@site.installation_meta.script_config}
128+
variant="hash"
129+
label="Hashed page paths"
130+
tooltip="Automatically track page paths that use a # in the URL."
131+
learn_more="https://plausible.io/docs/hash-based-routing"
132+
/>
133+
<.advanced_option
134+
config={@site.installation_meta.script_config}
135+
variant="pageview-props"
136+
label="Custom properties"
137+
tooltip="Attach custom properties (also known as custom dimensions) to pageviews or custom events to create custom metrics. Additional action required."
138+
learn_more="https://plausible.io/docs/custom-props/introduction"
139+
/>
140+
<.advanced_option
141+
config={@site.installation_meta.script_config}
142+
variant="revenue"
143+
label="Ecommerce revenue"
144+
tooltip="Assign monetary values to purchases and track revenue attribution. Additional action required."
145+
learn_more="https://plausible.io/docs/ecommerce-revenue-tracking"
146+
/>
147+
</ul>
148+
</.disclosure_panel>
149+
</.disclosure>
150+
151+
<.button_link
152+
:if={not is_nil(@installation_type)}
153+
href={"/#{URI.encode_www_form(@site.domain)}/verification"}
154+
type="submit"
155+
class="w-full mt-8"
156+
>
157+
<%= if @flow == PlausibleWeb.Flows.domain_change() do %>
158+
I understand, I'll update my website
159+
<% else %>
160+
<%= if @flow == PlausibleWeb.Flows.review() do %>
161+
Verify your installation
162+
<% else %>
163+
Start collecting data
164+
<% end %>
165+
<% end %>
166+
</.button_link>
167+
</form>
168+
"""
169+
end
170+
171+
defp script_config_control(assigns) do
172+
~H"""
173+
<div class="mt-2 p-1 text-sm">
174+
<div class="flex items-center">
175+
<.input mt?={false} field={@field} label={@label} type="checkbox" />
176+
<div class="ml-2 collapse md:visible">
177+
<.tooltip sticky?={false}>
178+
<:tooltip_content>
179+
{@tooltip}
180+
<br /><br />Click to learn more.
181+
</:tooltip_content>
182+
<a href={@learn_more} target="_blank" rel="noopener noreferrer">
183+
<Heroicons.information_circle class="text-indigo-700 dark:text-gray-500 w-5 h-5 hover:stroke-2" />
184+
</a>
185+
</.tooltip>
186+
</div>
187+
<div class="ml-2 visible md:invisible">
188+
<a href={@learn_more} target="_blank" rel="noopener noreferrer">
189+
<Heroicons.information_circle class="text-indigo-700 dark:text-gray-500 w-5 h-5 hover:stroke-2" />
190+
</a>
191+
</div>
192+
</div>
193+
</div>
194+
"""
195+
end
196+
197+
defp advanced_option(assigns) do
198+
~H"""
199+
<li class="p-1 text-sm">
200+
<div class="inline-flex items-center">
201+
<div>{@label}</div>
202+
<div class="ml-2 collapse md:visible">
203+
<.tooltip sticky?={false}>
204+
<:tooltip_content>
205+
{@tooltip}
206+
<br /><br />Click to learn more.
207+
</:tooltip_content>
208+
<a href={@learn_more} target="_blank" rel="noopener noreferrer">
209+
<Heroicons.information_circle class="text-indigo-700 dark:text-gray-500 w-5 h-5 hover:stroke-2" />
210+
</a>
211+
</.tooltip>
212+
</div>
213+
<div class="ml-2 visible md:invisible">
214+
<a href={@learn_more} target="_blank" rel="noopener noreferrer">
215+
<Heroicons.information_circle class="text-indigo-700 dark:text-gray-500 w-5 h-5 hover:stroke-2" />
216+
</a>
217+
</div>
218+
</div>
219+
</li>
220+
"""
221+
end
222+
223+
defp render_snippet("manual", site) do
224+
"""
225+
<script defer src="#{tracker_url(site)}"></script>
226+
<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
227+
"""
228+
end
229+
230+
defp tracker_url(site) do
231+
"https://plausible.io/js/script-#{site.domain}.js"
232+
end
233+
end

‎lib/plausible_web/router.ex

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -555,6 +555,12 @@ defmodule PlausibleWeb.Router do
555555
live "/:domain/installation", Installation, :installation, as: :site
556556
end
557557

558+
scope assigns: %{
559+
dogfood_page_path: "/:website/installationv2"
560+
} do
561+
live "/:domain/installationv2", InstallationV2, :installation_v2, as: :site
562+
end
563+
558564
scope assigns: %{
559565
dogfood_page_path: "/:website/verification"
560566
} do

0 commit comments

Comments
 (0)