Skip to content

Fix/ads targeting value #190

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
csessig86 merged 3 commits into from
Feb 17, 2026
Merged

Fix/ads targeting value #190

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f3d4501
add targetingValue to feature/app/index.html
msalexford Feb 13, 2026
5700e39
pass targetingValue to AdLoader in templates/feature/app/scripts/kick…
msalexford Feb 13, 2026
f2ba981
use data.text directly for custom ArchieML fields
msalexford Feb 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
283 changes: 181 additions & 102 deletions templates/feature/app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,113 +1,192 @@
{% extends 'base.html' %}
{% from 'macros/prose-queso.html' import prose %}
{% from 'macros/processors-queso.html' import ad %}

{% set jsPackName = 'main' %}
{% set context = data.text %}
{% set graphicTags = context.guten_tags %}
{% set authorComma = joiner() %}

{% block google_fonts %}{# queso fonts found in CSS #}{% endblock google_fonts %}
{% block css_file %}
<link rel="stylesheet" href="{{ static('styles/min/main-queso.css') }}">
{% endblock css_file %}

{% block nav %}{% include 'components/navbar.html' %}{% endblock %}

{% block content_wrap %}
<main data-feature>
<article class="has-giant-btm-marg">
{% block content %}
<div class="has-page-padding has-giant-btm-marg">
<header class="t-align-center">
<h1 class="l-container l-container--m t-headline t-serif t-lh-s has-s-btm-marg" data-title>{{ context.headline | widont or 'The only member-supported, digital-first, nonpartisan media organization' | widont }}</h1>
<p class="t-byline t-links t-uppercase t-lsp-m t-size-xs has-text-gray-dark has-b-btm-marg">
<span class="t-byline__item">By <span data-credit>{%- for author in context.authors or ['Texas Tribune Staff'] -%}
{% if not loop.last %}{{ authorComma() }}{% elif not loop.first %} and{% endif %} <span class="l-display-ib">{{ author }}</span>
{%- endfor -%}</span>
</span>

{% if context.update_date %}
<span class="l-display-block">
<span class="t-byline__item">Published: <time datetime="{{ context.pub_date }}">{{ apFormatDate(context.pub_date) }}</time></span>
<span class="t-byline__item">Updated: <time datetime="{{ context.update_date }}">{{ apFormatDate(context.update_date) }}</time></span>
</span>
{% else %}
<span class="t-byline__item"><time datetime="{{ context.pub_date }}">{{ apFormatDate(context.pub_date) }}</time></span>
{% endif %}
</p>
</header>

<div class="c-details t-size-xs t-uppercase t-lsp-m t-lh-b has-text-black-off has-text-vert-padding has-s-btm-marg t-byline t-links t-uppercase t-lsp-m t-size-xs has-text-gray-dark has-page-padding t-align-center">
{% include 'components/share.html' %}
</div>
</div>

<div class="t-serif t-links-underlined has-page-padding">
{{ prose(context.prose, context, data) }}

{# graphics are attached to this container #}
<div id="graphic"></div>

<p class="t-copy">Duis mattis orci a porta maximus. Pellentesque vel pellentesque augue, a condimentum nibh. Integer eget feugiat turpis, at vehicula metus. Vestibulum arcu dui, hendrerit sed purus sed, vulputate aliquam est. Duis quis metus sed odio commodo dapibus. Maecenas pulvinar elit sit amet lorem iaculis blandit. Aliquam vitae sollicitudin urna. Sed viverra tincidunt felis.</p>

{# Brief promo #}
{% include "includes/brief-promo.html" %}

<p class="t-copy">Duis mattis orci a porta maximus. Pellentesque vel pellentesque augue, a condimentum nibh. Integer eget feugiat turpis, at vehicula metus. Vestibulum arcu dui, hendrerit sed purus sed, vulputate aliquam est. Duis quis metus sed odio commodo dapibus. Maecenas pulvinar elit sit amet lorem iaculis blandit. Aliquam vitae sollicitudin urna. Sed viverra tincidunt felis.</p>

<h2 class="t-copy t-copy--subheader">{{ 'A cool subhead here' | widont }}</h2>

<p class="t-copy">Curabitur vestibulum sagittis diam, vitae pulvinar lorem accumsan ut. Mauris enim massa, vestibulum sed sollicitudin dapibus, ultrices eget ligula. Aenean tempor mi urna, eu porta tortor vehicula quis. Morbi hendrerit, eros nec interdum tempus, sem purus fringilla leo, ut iaculis urna tortor id diam. Duis laoreet maximus sapien, sed scelerisque sapien volutpat vel. Sed est lacus, sollicitudin nec euismod eu, placerat eget turpis. Quisque ultricies urna et mollis bibendum. Quisque tempus, elit ut faucibus hendrerit, augue enim faucibus massa, eu scelerisque dui eros at dolor. Sed rutrum, ipsum id convallis facilisis, justo ex rhoncus ex, in ultrices nisi augue vitae erat. Donec consequat ipsum ac nunc aliquam, eu porttitor quam viverra. Praesent ultrices, diam eget placerat sodales, magna magna porttitor urna, nec mollis ipsum odio at magna. Nulla ac consectetur turpis. Cras non ligula elementum, aliquet arcu ut, interdum nulla.</p>

<p class="t-copy">Nam ornare ante eget erat egestas, eget pulvinar diam tincidunt. Nunc eget ligula ac mi facilisis tempus. Proin molestie nisl at urna pharetra commodo. Praesent tincidunt vestibulum purus, id dictum tortor aliquet ac. Pellentesque semper scelerisque justo ac luctus. Nullam malesuada urna a magna fringilla bibendum. Mauris quis hendrerit nisl, a lacinia lectus.</p>
</div>

{# use 'none' as the value if the ad should not have a gray background #}
{# do not put ads inside a container div #}
{{ ad('gray') }}

{# create another container for more prose if the text needs to be split by an ad #}
<div class="t-serif t-links-underlined has-page-padding">
<p class="t-copy">Curabitur vestibulum sagittis diam, vitae pulvinar lorem accumsan ut. Mauris enim massa, vestibulum sed sollicitudin dapibus, ultrices eget ligula. Aenean tempor mi urna, eu porta tortor vehicula quis. Morbi hendrerit, eros nec interdum tempus, sem purus fringilla leo, ut iaculis urna tortor id diam. Duis laoreet maximus sapien, sed scelerisque sapien volutpat vel. Sed est lacus, sollicitudin nec euismod eu, placerat eget turpis. Quisque ultricies urna et mollis bibendum. Quisque tempus, elit ut faucibus hendrerit, augue enim faucibus massa, eu scelerisque dui eros at dolor. Sed rutrum, ipsum id convallis facilisis, justo ex rhoncus ex, in ultrices nisi augue vitae erat. Donec consequat ipsum ac nunc aliquam, eu porttitor quam viverra. Praesent ultrices, diam eget placerat sodales, magna magna porttitor urna, nec mollis ipsum odio at magna. Nulla ac consectetur turpis. Cras non ligula elementum, aliquet arcu ut, interdum nulla.</p>
{% extends 'base.html' %} {% from 'macros/prose-queso.html' import prose %} {%
from 'macros/processors-queso.html' import ad %} {% set jsPackName = 'main' %}
{% set context = data.text %} {% set graphicTags = context.guten_tags %} {% set
authorComma = joiner() %} {% block google_fonts %}{# queso fonts found in CSS
#}{% endblock google_fonts %} {% block css_file %}
<link rel="stylesheet" href="{{ static('styles/min/main-queso.css') }}" />
{% endblock css_file %} {% block nav %}{% include 'components/navbar.html' %}{%
endblock %} {% block content_wrap %}
<main data-feature>
<article class="has-giant-btm-marg">
{% block content %}
<div class="has-page-padding has-giant-btm-marg">
<header class="t-align-center">
<h1
class="l-container l-container--m t-headline t-serif t-lh-s has-s-btm-marg"
data-title
>
{{ context.headline | widont or 'The only member-supported,
digital-first, nonpartisan media organization' | widont }}
</h1>
<p
class="t-byline t-links t-uppercase t-lsp-m t-size-xs has-text-gray-dark has-b-btm-marg"
>
<span class="t-byline__item"
>By
<span data-credit
>{%- for author in context.authors or ['Texas Tribune Staff'] -%}
{% if not loop.last %}{{ authorComma() }}{% elif not loop.first %}
and{% endif %} <span class="l-display-ib">{{ author }}</span> {%-
endfor -%}</span
>
</span>

{% if context.update_date %}
<span class="l-display-block">
<span class="t-byline__item"
>Published:
<time datetime="{{ context.pub_date }}"
>{{ apFormatDate(context.pub_date) }}</time
></span
>
<span class="t-byline__item"
>Updated:
<time datetime="{{ context.update_date }}"
>{{ apFormatDate(context.update_date) }}</time
></span
>
</span>
{% else %}
<span class="t-byline__item"
><time datetime="{{ context.pub_date }}"
>{{ apFormatDate(context.pub_date) }}</time
></span
>
{% endif %}
</p>
</header>

<div
class="c-details t-size-xs t-uppercase t-lsp-m t-lh-b has-text-black-off has-text-vert-padding has-s-btm-marg t-byline t-links t-uppercase t-lsp-m t-size-xs has-text-gray-dark has-page-padding t-align-center"
>
{% include 'components/share.html' %}
</div>
</div>

<div class="t-serif t-links-underlined has-page-padding">
{{ prose(context.prose, context, data) }} {# graphics are attached to this
container #}
<div id="graphic"></div>

<p class="t-copy">
Duis mattis orci a porta maximus. Pellentesque vel pellentesque augue, a
condimentum nibh. Integer eget feugiat turpis, at vehicula metus.
Vestibulum arcu dui, hendrerit sed purus sed, vulputate aliquam est.
Duis quis metus sed odio commodo dapibus. Maecenas pulvinar elit sit
amet lorem iaculis blandit. Aliquam vitae sollicitudin urna. Sed viverra
tincidunt felis.
</p>

<p class="t-copy">Nam ornare ante eget erat egestas, eget pulvinar diam tincidunt. Nunc eget ligula ac mi facilisis tempus. Proin molestie nisl at urna pharetra commodo. Praesent tincidunt vestibulum purus, id dictum tortor aliquet ac. Pellentesque semper scelerisque justo ac luctus. Nullam malesuada urna a magna fringilla bibendum. Mauris quis hendrerit nisl, a lacinia lectus.</p>
</div>
{# Brief promo #} {% include "includes/brief-promo.html" %}

{{ ad('gray', 'footer') }}

{# Authors and contributors #}
{% include "includes/authors.html" %}
{% if context['contributors'] %}
{% include "includes/contributors.html" %}
{% endif %}
<p class="t-copy">
Duis mattis orci a porta maximus. Pellentesque vel pellentesque augue, a
condimentum nibh. Integer eget feugiat turpis, at vehicula metus.
Vestibulum arcu dui, hendrerit sed purus sed, vulputate aliquam est.
Duis quis metus sed odio commodo dapibus. Maecenas pulvinar elit sit
amet lorem iaculis blandit. Aliquam vitae sollicitudin urna. Sed viverra
tincidunt felis.
</p>

{# Trust project #}
{% include "includes/trust-project.html" %}
{% endblock content %}
</article>
</main>
<aside>
{# Related story topics #}
<section id="related-story-topics" class="c-plugin c-plugin--default c-plugin--narrow is-hidden-print">
<h2 class="t-size-s has-xs-btm-marg">Explore related story topics</h2>
<p class="c-tags l-flex">
{% for topic in context['related_story_topics'] %}
<a href="{{ topic['topic_link'] }}" ga-event-category="article-tag" class="c-tag c-tag__inner has-bg-white-off is-rounded-b">{{ topic['topic_title'] }}</a>
{% endfor %}
<h2 class="t-copy t-copy--subheader">
{{ 'A cool subhead here' | widont }}
</h2>

<p class="t-copy">
Curabitur vestibulum sagittis diam, vitae pulvinar lorem accumsan ut.
Mauris enim massa, vestibulum sed sollicitudin dapibus, ultrices eget
ligula. Aenean tempor mi urna, eu porta tortor vehicula quis. Morbi
hendrerit, eros nec interdum tempus, sem purus fringilla leo, ut iaculis
urna tortor id diam. Duis laoreet maximus sapien, sed scelerisque sapien
volutpat vel. Sed est lacus, sollicitudin nec euismod eu, placerat eget
turpis. Quisque ultricies urna et mollis bibendum. Quisque tempus, elit
ut faucibus hendrerit, augue enim faucibus massa, eu scelerisque dui
eros at dolor. Sed rutrum, ipsum id convallis facilisis, justo ex
rhoncus ex, in ultrices nisi augue vitae erat. Donec consequat ipsum ac
nunc aliquam, eu porttitor quam viverra. Praesent ultrices, diam eget
placerat sodales, magna magna porttitor urna, nec mollis ipsum odio at
magna. Nulla ac consectetur turpis. Cras non ligula elementum, aliquet
arcu ut, interdum nulla.
</p>
</section>

{# Related stories #}
<div class="related-content l-container has-page-padding" id="related-content-container"></div>
<div id="ribbon-container"></div>
</aside>
{% endblock content_wrap %}
<p class="t-copy">
Nam ornare ante eget erat egestas, eget pulvinar diam tincidunt. Nunc
eget ligula ac mi facilisis tempus. Proin molestie nisl at urna pharetra
commodo. Praesent tincidunt vestibulum purus, id dictum tortor aliquet
ac. Pellentesque semper scelerisque justo ac luctus. Nullam malesuada
urna a magna fringilla bibendum. Mauris quis hendrerit nisl, a lacinia
lectus.
</p>
</div>

{# use 'none' as the value if the ad should not have a gray background #} {#
do not put ads inside a container div #} {{ ad('gray') }} {# create another
container for more prose if the text needs to be split by an ad #}
<div class="t-serif t-links-underlined has-page-padding">
<p class="t-copy">
Curabitur vestibulum sagittis diam, vitae pulvinar lorem accumsan ut.
Mauris enim massa, vestibulum sed sollicitudin dapibus, ultrices eget
ligula. Aenean tempor mi urna, eu porta tortor vehicula quis. Morbi
hendrerit, eros nec interdum tempus, sem purus fringilla leo, ut iaculis
urna tortor id diam. Duis laoreet maximus sapien, sed scelerisque sapien
volutpat vel. Sed est lacus, sollicitudin nec euismod eu, placerat eget
turpis. Quisque ultricies urna et mollis bibendum. Quisque tempus, elit
ut faucibus hendrerit, augue enim faucibus massa, eu scelerisque dui
eros at dolor. Sed rutrum, ipsum id convallis facilisis, justo ex
rhoncus ex, in ultrices nisi augue vitae erat. Donec consequat ipsum ac
nunc aliquam, eu porttitor quam viverra. Praesent ultrices, diam eget
placerat sodales, magna magna porttitor urna, nec mollis ipsum odio at
magna. Nulla ac consectetur turpis. Cras non ligula elementum, aliquet
arcu ut, interdum nulla.
</p>

{% block inline_data %}
<p class="t-copy">
Nam ornare ante eget erat egestas, eget pulvinar diam tincidunt. Nunc
eget ligula ac mi facilisis tempus. Proin molestie nisl at urna pharetra
commodo. Praesent tincidunt vestibulum purus, id dictum tortor aliquet
ac. Pellentesque semper scelerisque justo ac luctus. Nullam malesuada
urna a magna fringilla bibendum. Mauris quis hendrerit nisl, a lacinia
lectus.
</p>
</div>

{{ ad('gray', 'footer') }} {# Authors and contributors #} {% include
"includes/authors.html" %} {% if context['contributors'] %} {% include
"includes/contributors.html" %} {% endif %} {# Trust project #} {% include
"includes/trust-project.html" %} {% endblock content %}
</article>
</main>
<aside>
{# Related story topics #}
<section
id="related-story-topics"
class="c-plugin c-plugin--default c-plugin--narrow is-hidden-print"
>
<h2 class="t-size-s has-xs-btm-marg">Explore related story topics</h2>
<p class="c-tags l-flex">
{% for topic in context['related_story_topics'] %}
<a
href="{{ topic['topic_link'] }}"
ga-event-category="article-tag"
class="c-tag c-tag__inner has-bg-white-off is-rounded-b"
>{{ topic['topic_title'] }}</a
>
{% endfor %}
</p>
</section>

{# Related stories #}
<div
class="related-content l-container has-page-padding"
id="related-content-container"
></div>
<div id="ribbon-container"></div>
</aside>
{% endblock content_wrap %} {% block inline_data %}
<script>
window.ttData = {
gutenTag: '{{ context.related_tag or "subject-politics" }}'
gutenTag: '{{ context.related_tag or "subject-politics" }}',
targetingValue: '{{ data.text.targeting_value or "" }}',
};
</script>
{% endblock inline_data %}
5 changes: 4 additions & 1 deletion templates/feature/app/scripts/kickstart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,10 @@ if (relatedContentContainer && window.ttData.gutenTag) {
// ads
import(/* webpackChunkName: "ads" */ './utils/ad-loader').then(
({ default: AdLoader }) => {
const ads = new AdLoader();
const ads = new AdLoader({
targetingKey: 'tribpedia',
targetingValue: window.ttData.targetingValue,
});
ads.init();
}
);