Add new analytics events in the new plans page and update analytics event in the current plans page (#7639)

GitOrigin-RevId: 71a4e7b0b041bbe7ea6df11cad28857978c77e4e
This commit is contained in:
M Fahru
2022-05-19 05:13:25 -04:00
committed by Copybot
parent e64becc00d
commit d0352a9492
9 changed files with 125 additions and 23 deletions
@@ -95,6 +95,7 @@ async function plansPage(req, res) {
groupPlans: GroupPlansData,
groupPlanModalOptions,
groupPlanModalDefaults,
newPlansPageVariantV2,
useNewPlanName,
initialLocalizedGroupPrice:
SubscriptionHelper.generateInitialLocalizedGroupPrice(
@@ -58,7 +58,14 @@ div.modal.fade(tabindex="-1" role="dialog" data-ol-group-plan-modal)
.form-group
label(for='size')
| Number of users
select.form-control(id="size")
select.form-control(
id="size"
event-tracking="groups-modal-group-size"
event-tracking-mb="true"
event-tracking-trigger="click"
event-tracking-element="select"
event-segmentation='{"plans-page-layout-v2": "' + (newPlansPageVariantV2 ? 'new-plans-page' : 'default') + '"}'
)
for size in groupPlanModalOptions.sizes
option(
value=size
@@ -81,6 +88,11 @@ div.modal.fade(tabindex="-1" role="dialog" data-ol-group-plan-modal)
id="usage"
type="checkbox"
autocomplete="off"
event-tracking="groups-modal-edu-discount"
event-tracking-mb="true"
event-tracking-trigger="click"
event-tracking-element="checkbox"
event-segmentation='{"plans-page-layout-v2": "' + (newPlansPageVariantV2 ? 'new-plans-page' : 'default') + '"}'
)
span This license is for educational purposes (applies to students or faculty using Overleaf for teaching)
@@ -3,17 +3,35 @@ include ./_mixins
.row.plans-v2-top-switch
.col-xs-12
ul.nav.plans-v2-nav
li.active.plans-v2-top-switch-individual(data-ol-plans-v2-view-tab='individual')
li.active.plans-v2-top-switch-individual(
data-ol-plans-v2-view-tab='individual'
event-tracking="plans-page-toggle-plan"
event-tracking-mb="true"
event-tracking-trigger="click"
event-segmentation='{"button": "individual", "plans-page-layout-v2": "new-plans-page"}'
)
a.btn.btn-default-outline(
href="#"
) #{translate("indvidual_plans")}
li.plans-v2-top-switch-group(data-ol-plans-v2-view-tab='group')
li.plans-v2-top-switch-group(
data-ol-plans-v2-view-tab='group'
event-tracking="plans-page-toggle-plan"
event-tracking-mb="true"
event-tracking-trigger="click"
event-segmentation='{"button": "group", "plans-page-layout-v2": "new-plans-page"}'
)
a.btn.btn-default-outline(
href="#"
)
span #{translate("group_plans")}
span (save 30% or more)
li.plans-v2-top-switch-student(data-ol-plans-v2-view-tab='student')
li.plans-v2-top-switch-student(
data-ol-plans-v2-view-tab='student'
event-tracking="plans-page-toggle-plan"
event-tracking-mb="true"
event-tracking-trigger="click"
event-segmentation='{"button": "student", "plans-page-layout-v2": "new-plans-page"}'
)
a.btn.btn-default-outline(
href="#"
) #{translate("student_plans")}
@@ -26,6 +44,11 @@ include ./_mixins
type="checkbox"
role="switch"
autocomplete="off"
event-tracking="plans-page-toggle-period"
event-tracking-mb="true"
event-tracking-trigger="click"
event-tracking-element="checkbox"
event-segmentation='{"plans-page-layout-v2": "new-plans-page"}'
)
span
.plans-v2-m-a-switch-annual-text-container
@@ -41,7 +41,7 @@ mixin table_individual(period)
p.plans-v2-table-th-content-title #{translate("professional")}
+table_head_price('professional', period)
.plans-v2-table-btn-buy-container-mobile
+btn_buy_individual_professional()
+btn_buy_individual_professional(period)
ul.plans-v2-table-th-content-benefit
li !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})}
li #{translate("all_premium_features")}
@@ -119,7 +119,7 @@ mixin table_group
| per user / year
.plans-v2-table-btn-buy-container-mobile
+btn_buy_group_collaborator()
small.plans-v2-table-th-content-additional-link !{translate("or_contact_us", {}, [{name: 'a', attrs: {href: '/for/enterprises/sales-contact', target: '_blank'}}])}
+additional_link_group('group_collaborator')
ul.plans-v2-table-th-content-benefit
li #{translate("up_to")} !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})}
li
@@ -127,7 +127,7 @@ mixin table_group
span  #{translate("total_per_year_lowercase")}
.plans-v2-table-btn-buy-container-desktop
+btn_buy_group_collaborator()
small.plans-v2-table-th-content-additional-link !{translate("or_contact_us", {}, [{name: 'a', attrs: {href: '/for/enterprises/sales-contact', target: '_blank'}}])}
+additional_link_group('group_collaborator')
th.plans-v2-table-green-highlighted
div.plans-v2-table-th-content
@@ -142,7 +142,7 @@ mixin table_group
| per user / year
.plans-v2-table-btn-buy-container-mobile
+btn_buy_group_professional()
small.plans-v2-table-th-content-additional-link !{translate("or_contact_us", {}, [{name: 'a', attrs: {href: '/for/enterprises/sales-contact', target: '_blank'}}])}
+additional_link_group('group_professional')
ul.plans-v2-table-th-content-benefit
li #{translate("unlimited_collaborators_in_each_project")}
li
@@ -150,7 +150,7 @@ mixin table_group
span  #{translate("total_per_year_lowercase")}
.plans-v2-table-btn-buy-container-desktop
+btn_buy_group_professional()
small.plans-v2-table-th-content-additional-link !{translate("or_contact_us", {}, [{name: 'a', attrs: {href: '/for/enterprises/sales-contact', target: '_blank'}}])}
+additional_link_group('group_professional')
th
div.plans-v2-table-th-content
@@ -164,7 +164,14 @@ mixin table_group
li #{translate("best_choices_companies_universities_non_profits")}
li #{translate("for_groups_or_site_wide")}
li
a(href="/for/enterprises/sales-contact") #{translate("also_available_as_on_premises")}
a(
target="_blank"
href="/for/enterprises/sales-contact"
event-tracking="plans-page-click"
event-tracking-mb="true"
event-tracking-trigger="click"
event-segmentation='{"button": "group_organization-link", "location": "table-header-list", "period": "annual", "plans-page-layout-v2": "new-plans-page"}'
) #{translate("also_available_as_on_premises")}
.plans-v2-table-btn-buy-container-desktop
+btn_buy_group_organization()
small.plans-v2-table-th-content-additional-link.invisible(aria-hidden="true")
@@ -262,10 +269,10 @@ mixin table_student(period)
div.plans-v2-table-comments-icon
i.fa.fa-comments-o
.plans-v2-table-btn-buy-container-mobile
+btn_buy_student_university
+btn_buy_student_university(period)
p.plans-v2-table-th-content-benefit !{translate("all_our_group_plans_offer_educational_discount", {}, [{name: 'b'}, {name: 'b'}])}
.plans-v2-table-btn-buy-container-desktop
+btn_buy_student_university
+btn_buy_student_university(period)
th
for planFeaturesPerSection in planFeatures.student
@@ -356,6 +363,11 @@ mixin group_plans_license_picker()
id="plans-v2-license-picker-select"
autocomplete="off"
data-ol-plans-v2-license-picker-select
event-tracking="plans-page-group-size"
event-tracking-mb="true"
event-tracking-trigger="click"
event-tracking-element="select"
event-segmentation='{"plans-page-layout-v2": "new-plans-page"}'
)
option(value="2") 2
option(value="3") 3
@@ -371,6 +383,11 @@ mixin group_plans_license_picker()
id="license-picker-educational-discount"
autocomplete="off"
data-ol-plans-v2-license-picker-educational-discount-input
event-tracking="plans-page-edu-discount"
event-tracking-mb="true"
event-tracking-trigger="click"
event-tracking-element="checkbox"
event-segmentation='{"plans-page-layout-v2": "new-plans-page"}'
)
span #{translate("apply_educational_discount")}
//- will only appear on screen width >= 768px (using CSS)
@@ -419,17 +436,17 @@ mixin btn_buy_individual_free()
mixin btn_buy_individual_personal(period)
+btn_buy_individual('paid-personal', period, false)
if (period === 'monthly')
small.plans-v2-table-th-content-additional-link !{translate("or_buy_now", {}, [{name: 'a', attrs: {href: '/user/subscription/new?planCode=paid-personal&currency=' + recommendedCurrency + '&itm_campaign=plans&itm_content=card'}}])}
+additional_link_buy('paid-personal', period)
mixin btn_buy_individual_collaborator(period)
+btn_buy_individual('collaborator', period, true)
if (period === 'monthly')
small.plans-v2-table-th-content-additional-link !{translate("or_buy_now", {}, [{name: 'a', attrs: {href: '/user/subscription/new?planCode=collaborator&currency=' + recommendedCurrency + '&itm_campaign=plans&itm_content=card'}}])}
+additional_link_buy('collaborator', period)
mixin btn_buy_individual_professional(period)
+btn_buy_individual('professional', period, false)
if (period === 'monthly')
small.plans-v2-table-th-content-additional-link !{translate("or_buy_now", {}, [{name: 'a', attrs: {href: '/user/subscription/new?planCode=professional&currency=' + recommendedCurrency + '&itm_campaign=plans&itm_content=card'}}])}
+additional_link_buy('professional', period)
mixin btn_buy_group_collaborator()
a.btn.btn-default.plans-v2-table-btn-buy(
@@ -475,15 +492,44 @@ mixin btn_buy_student_student(period)
else
span #{translate("buy_now")}
if (period === 'monthly')
small.plans-v2-table-th-content-additional-link !{translate("or_buy_now", {}, [{name: 'a', attrs: {href: '/user/subscription/new?planCode=student&currency=' + recommendedCurrency + '&itm_campaign=plans&itm_content=card'}}])}
+additional_link_buy('student', period)
mixin btn_buy_student_university()
mixin btn_buy_student_university(period)
a.btn.btn-default.plans-v2-table-btn-buy(
href="/for/enterprises/sales-contact"
target="_blank"
event-tracking="plans-page-click"
event-tracking-mb="true"
event-tracking-trigger="click"
event-segmentation='{"button": "student-university", "location": "table-header-list", "period": "' + period + '", "plans-page-layout-v2": "new-plans-page"}'
)
span #{translate("contact_us_lowercase")}
mixin additional_link_group(plan)
- var buttonSegmentation = plan + '-link'
small.plans-v2-table-th-content-additional-link
| #{translate("or")}
a(
href="/for/enterprises/sales-contact"
target="_blank"
event-tracking="plans-page-click"
event-tracking-mb="true"
event-tracking-trigger="click"
event-segmentation='{"button": "' + buttonSegmentation + '", "location": "table-header", "plans-page-layout-v2": "new-plans-page"}'
) #{translate("contact_us_lowercase")}
mixin additional_link_buy(plan, period)
- var buttonSegmentation = plan + '-link'
small.plans-v2-table-th-content-additional-link
| #{translate("or")}
a(
href="/user/subscription/new?planCode=paid-personal&currency=" + recommendedCurrency + "&itm_campaign=plans&itm_content=card"
event-tracking="plans-page-click"
event-tracking-mb="true"
event-tracking-trigger="click"
event-segmentation='{"button": "' + buttonSegmentation + '", "location": "table-header", "period": "' + period + '", "plans-page-layout-v2": "new-plans-page"}'
) #{translate("buy_now_no_exclamation_mark")}
mixin table_sticky_header
.row.plans-v2-table-sticky-header.plans-v2-table-sticky-header-individual.sticky(data-ol-plans-v2-table-sticky-header='individual')
.plans-v2-table-sticky-header-item
@@ -19,10 +19,17 @@ function setupEventTracking(el) {
const sendMB = el.getAttribute('event-tracking-mb')
const trigger = el.getAttribute('event-tracking-trigger')
const sendOnce = el.getAttribute('event-tracking-send-once')
const element = el.getAttribute('event-tracking-element')
const segmentation = JSON.parse(el.getAttribute('event-segmentation') || '{}')
segmentation.page = window.location.pathname
function submit() {
if (element === 'checkbox') {
segmentation.checkbox = el.checked ? 'checked' : 'unchecked'
} else if (element === 'select') {
segmentation.selectValue = el.value
}
if (sendMB) {
if (sendOnce) {
eventTracking.sendMBOnce(key, segmentation)
@@ -1,5 +1,6 @@
import '../../../../marketing'
import * as eventTracking from '../../../../infrastructure/event-tracking'
import {
setUpStickyHeaderObserver,
switchStickyHeader,
@@ -65,9 +66,11 @@ function setUpTabSwitching() {
el.querySelector('a').addEventListener('click', function (e) {
e.preventDefault()
// TODO: analytics
// eventTracking.send('subscription-funnel', 'plans-page', `${view}-prices`)
// eventTracking.sendMB('plans-page-toggle', { button: view })
eventTracking.send(
'subscription-funnel',
'plans-page',
`${viewTab}-prices`
)
selectTab(viewTab)
})
})
@@ -3,6 +3,8 @@ import '../../../features/plans/group-plan-modal'
import * as eventTracking from '../../../infrastructure/event-tracking'
import getMeta from '../../../utils/meta'
const PLANS_PAGE_LAYOUT_V2 = 'plans-page-layout-v2'
let currentView = 'monthly'
let currentCurrencyCode = getMeta('ol-recommendedCurrency')
@@ -23,11 +25,16 @@ function selectView(view) {
}
function setUpViewSwitching(liEl) {
const plansPageV2SplitTestVariant =
getMeta('ol-splitTestVariants')?.[PLANS_PAGE_LAYOUT_V2] ?? 'default'
const view = liEl.getAttribute('data-ol-view-tab')
liEl.querySelector('a').addEventListener('click', function (e) {
e.preventDefault()
eventTracking.send('subscription-funnel', 'plans-page', `${view}-prices`)
eventTracking.sendMB('plans-page-toggle', { button: view })
eventTracking.sendMB('plans-page-toggle', {
button: view,
PLANS_PAGE_LAYOUT_V2: plansPageV2SplitTestVariant,
})
selectView(view)
})
}
@@ -46,6 +53,8 @@ function setUpCurrencySwitching(linkEl) {
}
function setUpSubscriptionTracking(linkEl) {
const plansPageV2SplitTestVariant =
getMeta('ol-splitTestVariants')?.[PLANS_PAGE_LAYOUT_V2] ?? 'default'
const plan =
linkEl.getAttribute('data-ol-tracking-plan') ||
linkEl.getAttribute('data-ol-start-new-subscription')
@@ -63,6 +72,7 @@ function setUpSubscriptionTracking(linkEl) {
button: plan,
location,
period,
PLANS_PAGE_LAYOUT_V2: plansPageV2SplitTestVariant,
})
})
}
@@ -875,6 +875,7 @@ strike.plans-v2-table-annual-price-before-discount {
}
small.plans-v2-table-th-content-additional-link {
text-transform: lowercase;
margin-top: @margin-xs;
font-size: @font-size-extra-small;
height: 16px;
+1 -2
View File
@@ -1310,6 +1310,7 @@
"restricted": "Restricted",
"start_x_day_trial": "Start Your __len__-Day Free Trial Today!",
"buy_now": "Buy Now!",
"buy_now_no_exclamation_mark": "Buy now",
"cs": "Czech",
"view_all": "View All",
"terms": "Terms",
@@ -1734,8 +1735,6 @@
"saving_20_percent": "Saving 20%!",
"feature_included": "Feature included",
"feature_not_included": "Feature not included",
"or_contact_us": "or <0>contact us</0>",
"or_buy_now": "or <0>buy now</0>",
"all_our_group_plans_offer_educational_discount": "All of our <0>group plans</0> offer an <1>educational discount</1> for students and faculty",
"unlink_dropbox_folder": "Unlink Dropbox Account",
"unlink_dropbox_warning": "Any projects that you have synced with Dropbox will be disconnected and no longer kept in sync with Dropbox. Are you sure you want to unlink your Dropbox account?",