Okay, I’ve analyzed the HTML snippet you provided. Here’s a breakdown of what it represents, focusing on the key elements related to a paywall:
Overall Structure:
* div class="mur": This seems to be a container for the article content and the paywall elements. “Mur” likely refers to a “wall” in French, fitting the paywall concept.
* div class="compte": This likely contains account-related information or links (like login).
* div data-trk="..." id="bloc_3quarts_1__parentOf__mur_payant_configurable" class="_b": A container for the paywall itself, with tracking data (data-trk).
* div id="paywall-configurable" class="su-relative mur-payant" data-paywall="" data-ofstats-scroll="paywall-configurable": The core paywall element.data-paywall="" indicates it’s a configurable paywall. data-ofstats-scroll suggests tracking how far the user scrolls before encountering the paywall.
* div class="fallback": This likely contains the content displayed when the paywall is triggered (i.e., the user isn’t a subscriber).
Paywall Content (Inside div class="fallback"):
* div class="mur-payant" data-paywall-id="0ffaddcc-cefb-43af-8d86-8979e28fe375" wp_automatic_readability="6.1413043478261": The main paywall message container. data-paywall-id is a unique identifier for this specific paywall configuration.
* section class="editeur type-editeur article-long with-bg-color with-border" ...: A section containing the paywall message itself.
* data-percentage="80": This is very important. It indicates the paywall is triggered after the user has scrolled to 80% of the article.
* style=";;background-color:#FAF6E6;--bg-color-paywall:#FAF6E6;border: 1px solid #FAF6E6": sets the background color and border of the paywall message.
* data-btnfixed-href="...": The URL for the subscription page.
* data-btnfixed-libelle="Je m'abonne": The text for the subscription button (“I subscribe”).
* data-btnfixed-class="su-subscription": The CSS class for the subscription button.
* p style="text-align: center; ...": A paragraph containing a message and a login link.
* “Already subscribed? Log in”: Provides a link for existing subscribers to log in.
* <a href="http://www.ouest-france.fr/login?redirect=..." rel="nofollow" title="Se connecter à Ouest-France" class="su-link-light">Log in</a>: The login link. The redirect parameter ensures the user is returned to the article after logging in.
Key takeaways:
* Scroll-Based Paywall: This is a “metered paywall” that triggers after the user scrolls a certain percentage (80%) of the article.
* Subscription Prompt: The paywall displays a message encouraging the user to subscribe,with a prominent “I subscribe” button.
* Login Option: Existing subscribers are given a clear option to log in rather of subscribing.
* Tracking: The data-trk and data-ofstats-scroll attributes indicate that the paywall’s performance is being tracked (e.g.,how frequently enough it’s displayed,how often users subscribe,scroll depth).
* Styling: The paywall has specific styling (background color, border) to make it visually distinct.
In essence, this HTML snippet defines a paywall that blocks access to the full article content after the user has scrolled 80% of the way down the page, prompting them to either subscribe or log in.
