diff --git a/browser/components/newtab/content-src/asrouter/templates/EOYSnippet/EOYSnippet.jsx b/browser/components/newtab/content-src/asrouter/templates/EOYSnippet/EOYSnippet.jsx index 8e8cf6dce637..f324a6985394 100644 --- a/browser/components/newtab/content-src/asrouter/templates/EOYSnippet/EOYSnippet.jsx +++ b/browser/components/newtab/content-src/asrouter/templates/EOYSnippet/EOYSnippet.jsx @@ -24,11 +24,12 @@ class EOYSnippetBase extends React.PureComponent { handleSubmit(event) { event.preventDefault(); + this.props.sendClick(event); this.setFrequencyValue(); - this.refs.form.submit(); if (!this.props.content.do_not_autoblock) { this.props.onBlock(); } + this.refs.form.submit(); } renderDonations() { @@ -61,6 +62,7 @@ class EOYSnippetBase extends React.PureComponent { action={this.props.content.donation_form_url} method={this.props.form_method} onSubmit={this.handleSubmit} + data-metric="EOYSnippetForm" ref="form" > {donationURLParams.map(([key, value], idx) => ( diff --git a/browser/components/newtab/data/content/activity-stream.bundle.js b/browser/components/newtab/data/content/activity-stream.bundle.js index a4b2159c6f1a..1100ae25e843 100644 --- a/browser/components/newtab/data/content/activity-stream.bundle.js +++ b/browser/components/newtab/data/content/activity-stream.bundle.js @@ -12067,12 +12067,14 @@ class EOYSnippet_EOYSnippetBase extends external_React_default.a.PureComponent { handleSubmit(event) { event.preventDefault(); + this.props.sendClick(event); this.setFrequencyValue(); - this.refs.form.submit(); if (!this.props.content.do_not_autoblock) { this.props.onBlock(); } + + this.refs.form.submit(); } renderDonations() { @@ -12102,6 +12104,7 @@ class EOYSnippet_EOYSnippetBase extends external_React_default.a.PureComponent { action: this.props.content.donation_form_url, method: this.props.form_method, onSubmit: this.handleSubmit, + "data-metric": "EOYSnippetForm", ref: "form" }, donationURLParams.map(([key, value], idx) => external_React_default.a.createElement("input", { type: "hidden", diff --git a/browser/components/newtab/test/unit/asrouter/templates/EOYSnippet.test.jsx b/browser/components/newtab/test/unit/asrouter/templates/EOYSnippet.test.jsx index f0167b4f53f8..1b5b1ce204b7 100644 --- a/browser/components/newtab/test/unit/asrouter/templates/EOYSnippet.test.jsx +++ b/browser/components/newtab/test/unit/asrouter/templates/EOYSnippet.test.jsx @@ -30,6 +30,7 @@ describe("EOYSnippet", () => { provider, onAction: sandbox.stub(), onBlock: sandbox.stub(), + sendClick: sandbox.stub(), }; const comp = mount(); // Check schema with the final props the component receives (including defaults) @@ -64,6 +65,10 @@ describe("EOYSnippet", () => { assert.lengthOf(wrapper.find("input[type='radio']"), 4); }); + it("should have a data-metric field", () => { + assert.ok(wrapper.find("form[data-metric='EOYSnippetForm']")); + }); + it("should select the second donation option", () => { wrapper = mountAndCheckProps({ selected_button: "donation_amount_second" }); @@ -103,6 +108,19 @@ describe("EOYSnippet", () => { assert.notCalled(onBlockStub); }); + it("should report form submissions", () => { + wrapper = mountAndCheckProps(); + const { sendClick } = wrapper.props(); + + wrapper.find("form").simulate("submit"); + + assert.calledOnce(sendClick); + assert.equal( + sendClick.firstCall.args[0].target.dataset.metric, + "EOYSnippetForm" + ); + }); + it("it should preserve URL GET params as hidden inputs", () => { wrapper = mountAndCheckProps({ donation_form_url: