278 lines
10 KiB
Elixir
278 lines
10 KiB
Elixir
defmodule PlausibleWeb.Live.Installation.Instructions do
|
|
@moduledoc """
|
|
Instruction forms and components for the Installation module
|
|
"""
|
|
use PlausibleWeb, :component
|
|
|
|
attr :tracker_script_configuration_form, :map, required: true
|
|
|
|
def manual_instructions(assigns) do
|
|
~H"""
|
|
<.title class="mt-4">
|
|
Script installation
|
|
</.title>
|
|
|
|
<div class="text-sm my-4 leading-6">
|
|
Paste this snippet into the <code><head></code>
|
|
section of your site. See our
|
|
<.styled_link href="https://plausible.io/docs/integration-guides" new_tab={true}>
|
|
installation guides.
|
|
</.styled_link>
|
|
Once done, click the button below to verify your installation.
|
|
</div>
|
|
|
|
<.snippet_form
|
|
text={render_snippet(@tracker_script_configuration_form.data)}
|
|
rows={6}
|
|
resizable={true}
|
|
/>
|
|
<.h2 class="mt-8 text-sm font-medium">Optional measurements</.h2>
|
|
<.script_config_control
|
|
field={@tracker_script_configuration_form[:outbound_links]}
|
|
label="Outbound links"
|
|
tooltip="Automatically track clicks on external links. These count towards your billable pageviews."
|
|
learn_more="https://plausible.io/docs/outbound-link-click-tracking"
|
|
/>
|
|
<.script_config_control
|
|
field={@tracker_script_configuration_form[:file_downloads]}
|
|
label="File downloads"
|
|
tooltip="Automatically track file downloads. These count towards your billable pageviews."
|
|
learn_more="https://plausible.io/docs/file-downloads-tracking"
|
|
/>
|
|
<.script_config_control
|
|
field={@tracker_script_configuration_form[:form_submissions]}
|
|
label="Form submissions"
|
|
tooltip="Automatically track form submissions. These count towards your billable pageviews."
|
|
learn_more="https://plausible.io/docs/form-submissions-tracking"
|
|
/>
|
|
|
|
<.disclosure>
|
|
<.disclosure_button class="mt-4 flex items-center group">
|
|
<.h2 class="text-sm font-medium">Advanced options</.h2>
|
|
<Heroicons.chevron_down mini class="size-4 ml-1 mt-0.5 group-data-[open=true]:rotate-180" />
|
|
</.disclosure_button>
|
|
<.disclosure_panel>
|
|
<ul class="list-disc list-inside mt-2 space-y-2">
|
|
<.advanced_option
|
|
variant="tagged-events"
|
|
label="Manual tagging"
|
|
tooltip="Tag site elements like buttons, links and forms to track user activity. These count towards your billable pageviews. Additional action required."
|
|
learn_more="https://plausible.io/docs/custom-event-goals"
|
|
/>
|
|
<.advanced_option
|
|
variant="404"
|
|
label="404 error pages"
|
|
tooltip="Find 404 error pages on your site. These count towards your billable pageviews. Additional action required."
|
|
learn_more="https://plausible.io/docs/error-pages-tracking-404"
|
|
/>
|
|
<.advanced_option
|
|
variant="hash"
|
|
label="Hashed page paths"
|
|
tooltip="Automatically track page paths that use a # in the URL."
|
|
learn_more="https://plausible.io/docs/hash-based-routing"
|
|
/>
|
|
<.advanced_option
|
|
variant="pageview-props"
|
|
label="Custom properties"
|
|
tooltip="Attach custom properties (also known as custom dimensions) to pageviews or custom events to create custom metrics. Additional action required."
|
|
learn_more="https://plausible.io/docs/custom-props/introduction"
|
|
/>
|
|
<.advanced_option
|
|
variant="revenue"
|
|
label="Ecommerce revenue"
|
|
tooltip="Assign monetary values to purchases and track revenue attribution. Additional action required."
|
|
learn_more="https://plausible.io/docs/ecommerce-revenue-tracking"
|
|
/>
|
|
</ul>
|
|
</.disclosure_panel>
|
|
</.disclosure>
|
|
"""
|
|
end
|
|
|
|
attr :flow, :string, required: true
|
|
attr :recommended_installation_type, :string, required: true
|
|
|
|
def wordpress_instructions(assigns) do
|
|
~H"""
|
|
<.title class="mt-4">
|
|
WordPress installation
|
|
</.title>
|
|
<div class="text-sm mt-4 leading-6">
|
|
<div class="mb-4">
|
|
<span :if={@recommended_installation_type == "wordpress"}>
|
|
We've detected your website is using WordPress. Here's how to integrate Plausible:
|
|
</span>
|
|
<span :if={@recommended_installation_type != "wordpress"}>
|
|
Using Wordpress? Here's how to integrate Plausible:
|
|
</span>
|
|
</div>
|
|
<.focus_list>
|
|
<:item>
|
|
<.styled_link href="https://plausible.io/wordpress-analytics-plugin" new_tab={true}>
|
|
Install our WordPress plugin
|
|
</.styled_link>
|
|
</:item>
|
|
<:item>
|
|
After activating our plugin, click the button below to verify your installation.
|
|
</:item>
|
|
</.focus_list>
|
|
</div>
|
|
"""
|
|
end
|
|
|
|
attr :recommended_installation_type, :string, required: true
|
|
attr :tracker_script_configuration_form, :map, required: true
|
|
|
|
def gtm_instructions(assigns) do
|
|
~H"""
|
|
<.title class="mt-4">
|
|
Tag Manager installation
|
|
</.title>
|
|
<div class="text-sm mt-4 leading-6">
|
|
<span :if={@recommended_installation_type == "gtm"}>
|
|
We've detected your website is using Google Tag Manager. Here's how to integrate Plausible:
|
|
</span>
|
|
<span :if={@recommended_installation_type != "gtm"}>
|
|
Using Google Tag Manager? Here's how to integrate Plausible:
|
|
</span>
|
|
<div class="mt-4">
|
|
<.focus_list>
|
|
<:item>
|
|
Copy your site's Script ID:
|
|
<.snippet_form
|
|
text={@tracker_script_configuration_form.data.id}
|
|
rows={1}
|
|
resizable={false}
|
|
/>
|
|
</:item>
|
|
|
|
<:item>
|
|
<.styled_link href="https://plausible.io/gtm-template" new_tab={true}>
|
|
Install the Plausible template in GTM
|
|
</.styled_link>
|
|
</:item>
|
|
|
|
<:item>
|
|
Paste your Script ID into the template and click the button below to verify your installation.
|
|
</:item>
|
|
</.focus_list>
|
|
</div>
|
|
</div>
|
|
"""
|
|
end
|
|
|
|
def npm_instructions(assigns) do
|
|
~H"""
|
|
<.title class="my-4">
|
|
NPM installation
|
|
</.title>
|
|
<.focus_list>
|
|
<:item>
|
|
<.styled_link href="https://www.npmjs.com/package/@plausible-analytics/tracker" new_tab={true}>
|
|
Install @plausible-analytics/tracker NPM package
|
|
</.styled_link>
|
|
</:item>
|
|
<:item>
|
|
Once done, click the button below to verify your installation.
|
|
</:item>
|
|
</.focus_list>
|
|
"""
|
|
end
|
|
|
|
attr :field, :any, required: true
|
|
attr :label, :string, required: true
|
|
attr :tooltip, :string, required: true
|
|
attr :learn_more, :string, required: true
|
|
|
|
defp script_config_control(assigns) do
|
|
~H"""
|
|
<div class="mt-2 p-1 text-sm">
|
|
<div class="flex items-center">
|
|
<.input mt?={false} field={@field} label={@label} type="checkbox" />
|
|
<div class="ml-2 collapse md:visible">
|
|
<.tooltip sticky?={false}>
|
|
<:tooltip_content>
|
|
{@tooltip}
|
|
<br />Click to learn more.
|
|
</:tooltip_content>
|
|
<a href={@learn_more} target="_blank" rel="noopener noreferrer">
|
|
<Heroicons.information_circle class="inline-block text-indigo-700 dark:text-gray-500 size-5 hover:stroke-2" />
|
|
</a>
|
|
</.tooltip>
|
|
</div>
|
|
<div class="ml-2 visible md:invisible">
|
|
<a href={@learn_more} target="_blank" rel="noopener noreferrer">
|
|
<Heroicons.information_circle class="inline-block text-indigo-700 dark:text-gray-500 size-5 hover:stroke-2" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
"""
|
|
end
|
|
|
|
defp advanced_option(assigns) do
|
|
~H"""
|
|
<li class="p-1 text-sm">
|
|
<div class="inline-flex items-center">
|
|
<div>{@label}</div>
|
|
<div class="ml-2 collapse md:visible">
|
|
<.tooltip sticky?={false}>
|
|
<:tooltip_content>
|
|
{@tooltip}
|
|
<br />Click to learn more.
|
|
</:tooltip_content>
|
|
<a href={@learn_more} target="_blank" rel="noopener noreferrer">
|
|
<Heroicons.information_circle class="inline-block text-indigo-700 dark:text-gray-500 size-5 hover:stroke-2" />
|
|
</a>
|
|
</.tooltip>
|
|
</div>
|
|
<div class="ml-2 visible md:invisible">
|
|
<a href={@learn_more} target="_blank" rel="noopener noreferrer">
|
|
<Heroicons.information_circle class="inline-block text-indigo-700 dark:text-gray-500 size-5 hover:stroke-2" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
"""
|
|
end
|
|
|
|
defp snippet_form(assigns) do
|
|
~H"""
|
|
<div class="relative">
|
|
<textarea
|
|
id="snippet"
|
|
class={"w-full border-1 border-gray-300 rounded-md p-4 text-sm text-gray-700 dark:border-gray-750 dark:bg-gray-750 dark:text-gray-300 #{if !@resizable, do: "resize-none"}"}
|
|
rows={@rows}
|
|
readonly
|
|
><%= @text %></textarea>
|
|
|
|
<a
|
|
onclick="var input = document.getElementById('snippet'); input.focus(); input.select(); document.execCommand('copy'); event.stopPropagation();"
|
|
href="javascript:void(0)"
|
|
class="absolute flex items-center text-xs font-medium text-indigo-600 no-underline bottom-2 right-4 p-2 bg-white transition-colors duration-150 hover:text-indigo-700 dark:text-indigo-500 dark:hover:text-indigo-400 dark:bg-gray-750"
|
|
>
|
|
<Heroicons.document_duplicate class="pr-1 text-current size-5" />
|
|
<span>
|
|
COPY
|
|
</span>
|
|
</a>
|
|
</div>
|
|
"""
|
|
end
|
|
|
|
defp render_snippet(tracker_script_configuration) do
|
|
"""
|
|
<!-- Privacy-friendly analytics by Plausible -->
|
|
<script async src="#{tracker_url(tracker_script_configuration)}"></script>
|
|
<script>
|
|
window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};
|
|
plausible.init()
|
|
</script>
|
|
"""
|
|
end
|
|
|
|
defp tracker_url(tracker_script_configuration) do
|
|
"#{PlausibleWeb.Endpoint.url()}/js/#{tracker_script_configuration.id}.js"
|
|
end
|
|
end
|