Tutorials

How to inject elements in articles

This example demonstrates the injection features of ADK. Injections are used to insert elements into arbitrary HTML structures. A common use case is to add display ads to the body of an articles. The inserted element can be a container or any HTML element.

In this example we configure an injection that allows element insertion adjacent to p elements, with at least 100 characters skipped in the beginning of the article, and then repeating injection of my-container with at least 1000 character between.

Setup

adk.config()
    .addContainer('my-container', adk.container.config()
        .provider('adk.hello'))

    .addInjection('my-injection', adk.injection.config()
        .allow('p')
        .rules(adk.injection.rule()
            .skipChars(100))
        .rules(adk.injection.rule()
            .inject('my-container')
            .skipChars(1000)
            .repeat(0)))

    .apply()
    .init(publisherId)

The triggering of the injection is done inline like so:

Injection

adk.cmd.push(() => {
    adk.injection.play('my-injection')
        .apply('#article-body')
    adk.container.attach()
})

Instead of adding the configation to the top-level config it is also possible to do it completely inline

Inline

adk.injection.play(adk.injection.config()
    .allow('p')
    .rules(adk.injection.rule()
        .skipChars(100))
    .rules(adk.injection.rule()
        .inject('my-container')
        .skipChars(1000)
        .repeat(0)))
    .apply('#article-body')

Result

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sodales magna enim, vel lobortis augue pretium sit amet. Mauris vel eros varius, malesuada nisl sit amet, bibendum ex. Nam sodales dolor id pellentesque venenatis. Donec sit amet faucibus lorem. Cras eget tempor elit. In at pellentesque tortor, eu condimentum dolor. Proin venenatis porttitor dignissim. Fusce lacinia nulla id lorem dictum condimentum. Etiam porta, tortor sit amet iaculis tempus, diam est viverra risus, id aliquet nulla lorem vel enim. Nullam laoreet bibendum risus, sagittis efficitur purus dictum sed. Nunc interdum leo quam, rutrum pretium massa gravida non. Maecenas rutrum blandit enim ut fringilla.

Sed consequat ex sit amet mi hendrerit, non imperdiet sapien posuere. Donec iaculis ultrices magna, vitae auctor sapien faucibus eget. Integer porta iaculis sapien, vitae congue mi scelerisque et. Morbi vestibulum id urna in feugiat. Sed sit amet lobortis massa. In et magna ut libero suscipit mattis a vitae diam. Nulla quis tellus quis eros tincidunt congue. Sed sit amet ipsum nibh. In condimentum nibh nec libero accumsan sollicitudin. Duis tempus leo et ornare fermentum. Duis vel risus et urna placerat consequat.

Mauris aliquam eros non nulla condimentum, at placerat tellus pulvinar. Praesent tincidunt, orci tempor pulvinar accumsan, urna lacus varius nibh, ac dapibus nunc enim quis dolor. Pellentesque nec malesuada sapien. Nullam in mi scelerisque nisl malesuada venenatis. Nullam quis suscipit eros. Fusce feugiat orci quam, quis gravida nisi dignissim nec. Nulla tincidunt risus magna, a elementum odio tempus id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur ut semper turpis. Donec eu quam tellus. Nam nec dignissim tortor. Nam pretium tincidunt bibendum.

Quisque sit amet consectetur enim. Cras feugiat finibus est, et consequat lectus porta at. Integer malesuada eros nulla. Maecenas volutpat laoreet leo volutpat fringilla. Nulla elit orci, volutpat id tempus at, auctor ac enim. Pellentesque sollicitudin tortor quis consequat rutrum. Maecenas quis blandit lectus. Duis finibus mollis augue sed tincidunt.

Aliquam at dui interdum, feugiat velit quis, dictum massa. Mauris egestas nunc congue, eleifend ligula non, tincidunt eros. Donec porttitor ultricies dictum. Fusce viverra sem ac quam accumsan, et commodo orci ultricies. Vestibulum porta turpis ac pulvinar auctor. Curabitur interdum ligula id turpis pellentesque, vitae convallis ex interdum. Nam commodo sem vitae est posuere dignissim.