We’ve migrated our documentation to a new site, which means some URLs have changed. If you hit a broken link, submit a support ticket.
Subscriptions
English French
English French

Can I use the classic external-event and external-event-<paramName> attributes for event tracking?

LIGHTWEIGHT TEMPLATES

No. Those attributes belong to the classic (AngularJS) template runtime and have no effect in a Lightweight template, whether you write them in the JSX tab or set them from the JS tab with setAttribute(). Nothing fires, no conversion is logged, and no error is raised: the attribute is simply ignored, which is why the loss is easy to miss until the data turns out to be absent from the Conversion Report.

Lightweight templates have two mechanisms for the same job. They are equivalent, pick whichever fits the markup you already have.

PianoExternalEvent wraps arbitrary markup, and a click inside the wrapper fires the event:

<PianoExternalEvent name="cta-click" params={{ placement: "sidebar" }}>
  <button type="button">Continue</button>
</PianoExternalEvent>

externalEventName / externalEventParams are props on a Piano button, for when you already have one:

<PianoPrimaryButton
  onClick={() => {}}
  externalEventName="cta-click"
  externalEventParams={{ placement: "sidebar" }}
>
  <T>Continue</T>
</PianoPrimaryButton>

Both do what the classic attribute did: log an auto micro conversion with event type EXTERNAL_EVENT and the event name as its event group id, and call the publisher's customEvent handler on the host page with the event name and the params object. That is the same handler classic templates used, so an existing publisher integration keeps receiving events after a migration.

Further reading: PianoExternalEvent and the buttons that accept these props on the Components page, and External events for the full classic-to-Lightweight mapping, how params is evaluated, and the pitfalls.


Last updated: