optipub-subscribe
This optipub-element allows you to easily host a form on your external website to add new subscribers. Check out Getting Started With OptiPub Elements first.
Usage
Required PropertyThe
optipub-subscribeelement requires apublication-idproperty to be defined on the element.
<optipub-subscribe publication-id="1"></optipub-subscribe>Custom Properties
Additional properties exist on the optipub-subscribe element that allow more control over the element without having to overwrite the template.
| Property | Description | Example |
|---|---|---|
button-text | Used to change the text of the button to submit the form. | button-text="Subscribe now!" |
effort-id | Used to associate the new subscriber to a specific effort. | effort-id="2003" |
redirect-to | Used to redirect the user on successful form submission. Supports the macros {$email} (URL-encoded subscriber email) and {$email_md5} (MD5 hash of the lowercased subscriber email). | redirect-to="https://docs.optipub.com" redirect-to="/welcome" redirect-to="/welcome?id={$email_md5}" |
redirect-after | Used to delay the redirection after successful form submission. Value must be in seconds. | redirect-after="3" |
segment-ids | Used to associate the new subscriber to a specific segments. | segment-ids="1234,5678" :segment-ids="[1234,5678]" |
success-message | Used to change the text of the message displayed to the user after successful form submission. | success-message="Subscribed Successfully!" |
locale | Pin the subscriber language (for example de) sent with the signup. When omitted, the element uses the saved optipub_locale preference, then the browser language. There is no language dropdown on the form. | locale="de" |
The resolved language is stored on the subscriber's email address and decides which version they receive when content has been translated. An explicit locale property wins over a saved preference and over the visitor's browser language. The element also records the visitor's browser timezone on the email address.
Additional Information
You are able to overwrite or add additional fields to the optipub-subscribe element in order to save more information when creating a new subscription. Information such as First Name, Last Name, or Birthday are good examples of additional information that you would want to store.
Any variables defined in your installation may be used. See /messages/variables on your installation for a full list.
New subscriptions may also run email verification (traditional automatic checks, and optionally Email Verification Protocol on supported browsers) based on your Settings → Email Verification configuration.
Subscribe Event
After a successful signup the element emits a subscribe event, before any redirect:
window.optipubElements.on('subscribe', function (data) {
// data.email, data.publicationId, data.effortId, data.segmentIds, data.fields, data.element
});elements.js loads asynchronously. If your code may run before it, listen for the equivalent DOM event instead: document.addEventListener('optipub:subscribe', (e) => e.detail).
Google Enhanced Conversions
On success the element also feeds your existing Google tag for enhanced conversions. It does not load a Google tag itself.
gtag('set', 'user_data', { email, address: { first_name, last_name } })whenwindow.gtagexists.dataLayer.push({ event: 'optipub_subscribe', publication_id, effort_id, user_data: {...} })for Tag Manager.
email is always sent; address.first_name / address.last_name only when your form has inputs with those names.
Tag Manager: trigger your Google Ads conversion tag on the optipub_subscribe Custom Event and map user_data.email into a User‑Provided Data variable. To segment by publication or effort, pass publication_id / effort_id as Event Parameters on the conversion tag and activate them under Goals → Conversions → Custom variables. With redirect-to set, the element waits for GTM to finish firing tags (max 2s) before redirecting.
gtag.js: fire your conversion from the subscribe event above and set redirect-after="1" or more so the redirect does not cancel the request.
Updated 19 days ago