Custom variables in custom components
This section explains how to create and use custom variables in Custom Component Blocks, such as modals and footers, with a focus on implementing a Meter Remaining count in a website footer.
In this scenario, you create custom variables that can be reused across different Custom Component Blocks, including modals, footers, and in-page content blocks.
The example demonstrates how to display a Meter Remaining count in the website footer, as shown below:
The meter variable is triggered based on page views. This is implemented using a sub-rule along with a trial that tracks the remaining view count.
In this example, you will:
-
Create and host the component, and add it to the Component Library
-
Create a sub-rule with a trial that uses remaining views to execute a custom script
-
Build the main rule that ties everything together
Create Your Component
To display a footer on your site, you must host a footer component and add it to your Zephr Component Library.
In your component code, you must reference the variable that you want to display using a mustache template. For example, if your variable is called
meter
, your code must contain a
{{meter}}
reference, as shown in the following extract:
<b><mark>You have read {{meter}} articles</mark><b>
For further information on using mustache variables in your component templates, see the User Variables in Component Templates topic.
You must remember to make a note of the name of the variable that you use in your component, as we use this when we create our sub rule.
When you have created and hosted your component, add it to your Zephr Component Library.
For further information on using the Component Library, see the Component Library section.