Skip to content

Commit

Permalink
Generalize FxA/VPN attribution JS class fix mozilla#13297
Browse files Browse the repository at this point in the history
  • Loading branch information
@stephaniehobson @alexgibson
stephaniehobson authored and alexgibson committed Jun 22, 2023
1 parent 20afbb8 commit e452221
Show file tree
Hide file tree
Showing 4 changed files with 9 additions and 9 deletions.
2 changes: 1 addition & 1 deletion bedrock/products/templatetags/misc.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ def _vpn_product_link(product_url, entrypoint, link_text, class_name=None, optio
params = "&".join(f"{param}={val}" for param, val in optional_parameters.items())
href += f"&{params}"

css_class = "js-vpn-cta-link js-fxa-product-button"
css_class = "js-fxa-product-cta-link js-fxa-product-button"
attrs = ""

if optional_attributes:
Expand Down
10 changes: 5 additions & 5 deletions bedrock/products/tests/test_helper_misc.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -278,7 +278,7 @@ def test_vpn_subscribe_link_variable_12_month(self):
'<a href="https://accounts.firefox.com/subscriptions/products/prod_FvnsFHIfezy3ZI?plan=price_1IgwblJNcmPzuWtRynC7dqQa'
"&entrypoint=www.mozilla.org-vpn-product-page&form_type=button&service=e6eb0d1e856335fc&utm_source=www.mozilla.org-vpn-product-page"
'&utm_medium=referral&utm_campaign=vpn-product-page&data_cta_position=primary" data-action="https://accounts.firefox.com/" '
'class="js-vpn-cta-link js-fxa-product-button mzp-c-button" data-cta-text="Get Mozilla VPN yearly" data-cta-type="fxa-vpn" '
'class="js-fxa-product-cta-link js-fxa-product-button mzp-c-button" data-cta-text="Get Mozilla VPN yearly" data-cta-type="fxa-vpn" '
'data-cta-position="primary">Get Mozilla VPN</a>'
)
self.assertEqual(markup, expected)
Expand All @@ -296,7 +296,7 @@ def test_vpn_subscribe_link_variable_12_month_with_analytics(self):
'<a href="https://accounts.firefox.com/subscriptions/products/prod_FvnsFHIfezy3ZI?plan=price_1Iw85dJNcmPzuWtRyhMDdtM7'
"&entrypoint=www.mozilla.org-vpn-product-page&form_type=button&service=e6eb0d1e856335fc&utm_source=www.mozilla.org-vpn-product-page"
'&utm_medium=referral&utm_campaign=vpn-product-page&data_cta_position=primary" data-action="https://accounts.firefox.com/" '
'class="js-vpn-cta-link js-fxa-product-button mzp-c-button ga-begin-checkout" data-cta-text="Get Mozilla VPN yearly" '
'class="js-fxa-product-cta-link js-fxa-product-button mzp-c-button ga-begin-checkout" data-cta-text="Get Mozilla VPN yearly" '
"data-cta-type=\"fxa-vpn\" data-cta-position=\"primary\" data-ga-item=\"{'id' : 'price_1Iw85dJNcmPzuWtRyhMDdtM7','brand' : 'vpn',"
"'plan' : 'vpn','period' : 'yearly','price' : '59.88','discount' : '60.00','currency' : 'USD'}\">Get Mozilla VPN</a>"
)
Expand All @@ -312,7 +312,7 @@ def test_vpn_subscribe_link_variable_12_month_no_options_with_analytics(self):
expected = (
'<a href="https://accounts.firefox.com/subscriptions/products/prod_FvnsFHIfezy3ZI?plan=price_1Iw85dJNcmPzuWtRyhMDdtM7'
"&entrypoint=www.mozilla.org-vpn-product-page&form_type=button&service=e6eb0d1e856335fc&utm_source=www.mozilla.org-vpn-product-page"
'&utm_medium=referral" data-action="https://accounts.firefox.com/" class="js-vpn-cta-link js-fxa-product-button mzp-c-button '
'&utm_medium=referral" data-action="https://accounts.firefox.com/" class="js-fxa-product-cta-link js-fxa-product-button mzp-c-button '
"ga-begin-checkout\" data-ga-item=\"{'id' : 'price_1Iw85dJNcmPzuWtRyhMDdtM7','brand' : 'vpn','plan' : 'vpn','period' : 'yearly',"
"'price' : '59.88','discount' : '60.00','currency' : 'USD'}\">Get Mozilla VPN</a>"
)
Expand All @@ -331,7 +331,7 @@ def test_vpn_subscribe_link_variable_monthly(self):
'<a href="https://accounts.firefox.com/subscriptions/products/prod_FvnsFHIfezy3ZI?plan=price_1Iw7qSJNcmPzuWtRMUZpOwLm'
"&entrypoint=www.mozilla.org-vpn-product-page&form_type=button&service=e6eb0d1e856335fc&utm_source=www.mozilla.org-vpn-product-page"
'&utm_medium=referral&utm_campaign=vpn-product-page&data_cta_position=primary" data-action="https://accounts.firefox.com/" '
'class="js-vpn-cta-link js-fxa-product-button mzp-c-button" data-cta-text="Get Mozilla VPN monthly" data-cta-type="fxa-vpn" '
'class="js-fxa-product-cta-link js-fxa-product-button mzp-c-button" data-cta-text="Get Mozilla VPN monthly" data-cta-type="fxa-vpn" '
'data-cta-position="primary">Get Mozilla VPN</a>'
)
self.assertEqual(markup, expected)
Expand All @@ -349,7 +349,7 @@ def test_vpn_subscribe_link_variable_monthly_with_analytics(self):
'<a href="https://accounts.firefox.com/subscriptions/products/prod_FvnsFHIfezy3ZI?plan=price_1IgwZVJNcmPzuWtRg9Wssh2y'
"&entrypoint=www.mozilla.org-vpn-product-page&form_type=button&service=e6eb0d1e856335fc&utm_source=www.mozilla.org-vpn-product-page"
'&utm_medium=referral&utm_campaign=vpn-product-page&data_cta_position=primary" data-action="https://accounts.firefox.com/" '
'class="js-vpn-cta-link js-fxa-product-button mzp-c-button ga-begin-checkout" data-cta-text="Get Mozilla VPN monthly" '
'class="js-fxa-product-cta-link js-fxa-product-button mzp-c-button ga-begin-checkout" data-cta-text="Get Mozilla VPN monthly" '
"data-cta-type=\"fxa-vpn\" data-cta-position=\"primary\" data-ga-item=\"{'id' : 'price_1IgwZVJNcmPzuWtRg9Wssh2y','brand' : 'vpn',"
"'plan' : 'vpn','period' : 'monthly','price' : '9.99','discount' : '0','currency' : 'EUR'}\">Get Mozilla VPN</a>"
)
Expand Down
2 changes: 1 addition & 1 deletion media/js/base/fxa-attribution.es6.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -369,7 +369,7 @@ FxaAttribution.init = (urlParams) => {
}

const ctaLinks = document.querySelectorAll(
'.js-fxa-cta-link, .js-vpn-cta-link'
'.js-fxa-cta-link, .js-fxa-product-cta-link'
);

// Track CTA clicks for FxA link referrals.
Expand Down
4 changes: 2 additions & 2 deletions tests/unit/spec/base/fxa-attribution.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -585,7 +585,7 @@ describe('fxa-attribution.js', function () {
<a id="test-not-accounts" class="js-fxa-cta-link" href="https://www.mozilla.org/?service=sync&amp;action=email&amp;context=fx_desktop_v3&amp;entrypoint=mozilla.org-accounts_page&amp;utm_content=accounts-page-top-cta&amp;utm_source=accounts-page&amp;utm_medium=referral&amp;utm_campaign=fxa-benefits-page">Create a Firefox Account</a>
<a id="test-second-expected" class="js-fxa-cta-link" href="https://monitor.firefox.com/oauth/init?form_type=button&amp;entrypoint=mozilla.org-firefox-accounts&amp;utm_content=accounts-page-top-cta&amp;utm_source=accounts-page&amp;utm_medium=referral&amp;utm_campaign=fxa-benefits-page">Sign In to Firefox Monitor</a>
<a id="test-third-expected" class="js-fxa-cta-link" href="https://getpocket.com/ff_signup?s=ffwelcome2&form_type=button&entrypoint=mozilla.org-firefox-welcome-2&utm_source=mozilla.org-firefox-welcome-2&utm_campaign=welcome-2-pocket&utm_medium=referral">Activate Pocket</a>
<a id="test-subscription" class="js-vpn-cta-link" href="https://accounts.firefox.com/subscriptions/products/prod_FvnsFHIfezy3ZI?plan=price_1Iw85dJNcmPzuWtRyhMDdtM7&amp;entrypoint=www.mozilla.org-vpn-product-page&amp;form_type=button&amp;service=e6eb0d1e856335fc&amp;utm_source=www.mozilla.org-vpn-product-page&amp;utm_medium=referral&amp;utm_campaign=vpn-product-page&amp;data_cta_position=pricing">Get Mozilla VPN</a>
<a id="test-subscription" class="js-fxa-product-cta-link" href="https://accounts.firefox.com/subscriptions/products/prod_FvnsFHIfezy3ZI?plan=price_1Iw85dJNcmPzuWtRyhMDdtM7&amp;entrypoint=www.mozilla.org-vpn-product-page&amp;form_type=button&amp;service=e6eb0d1e856335fc&amp;utm_source=www.mozilla.org-vpn-product-page&amp;utm_medium=referral&amp;utm_campaign=vpn-product-page&amp;data_cta_position=pricing">Get Mozilla VPN</a>
</div>`;

document.body.insertAdjacentHTML('beforeend', links);
Expand All @@ -596,7 +596,7 @@ describe('fxa-attribution.js', function () {
content.parentNode.removeChild(content);
});

it('should update UTM parameters on links with class js-fxa-cta-link and js-vpn-cta-link', function () {
it('should update UTM parameters on links with class js-fxa-cta-link and js-fxa-product-cta-link', function () {
const data = {
utm_source: 'source-two',
utm_content: 'content-two',
Expand Down

0 comments on commit e452221

Please sign in to comment.