-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #752 from Shinsina/story-continues-for-real-this-time
Story Continues button with injected ads content (non-gated)
- Loading branch information
Showing
6 changed files
with
191 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| <template> | ||
| <button | ||
| v-if="showButton" | ||
| class="btn-primary" | ||
| style="margin-bottom: 10px" | ||
| @click="handleClick" | ||
| > | ||
| Story Continues | ||
| </button> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| data: () => ({ | ||
| showButton: true, | ||
| }), | ||
| created() { | ||
| this.observer = new IntersectionObserver((event) => { | ||
| if (event[0].isIntersecting) { | ||
| const { dataLayer } = window; | ||
| if (dataLayer) { | ||
| const payload = { | ||
| event: 'story-continues-button-view', | ||
| }; | ||
| dataLayer.push(payload); | ||
| } | ||
| } | ||
| }); | ||
| }, | ||
| mounted() { | ||
| this.observer.observe(this.$el); | ||
| }, | ||
| methods: { | ||
| handleClick() { | ||
| this.showButton = false; | ||
| const contentPagePreviewOverlay = document.getElementById('content-page-preview-overlay'); | ||
| const bodyPartTwo = document.getElementById('content-body-part-two'); | ||
| contentPagePreviewOverlay.style = 'display: none;'; | ||
| bodyPartTwo.removeAttribute('style'); | ||
| const { dataLayer } = window; | ||
| if (dataLayer) { | ||
| const payload = { | ||
| event: 'story-continues-button-click', | ||
| }; | ||
| dataLayer.push(payload); | ||
| } | ||
| }, | ||
| }, | ||
| }; | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| import { getAsArray } from "@parameter1/base-cms-object-path"; | ||
| import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value"; | ||
| import MarkoWebContentBody from "@parameter1/base-cms-marko-web/components/element/content/body"; | ||
| import GAMDefineDisplayAd from "@parameter1/base-cms-marko-web-theme-monorail/components/gam/define-display-ad"; | ||
|
|
||
| $ const { global: $global } = out; | ||
| $ const { GAM } = $global; | ||
| $ const { content, modifiers } = input; | ||
| $ const preventHTMLInjection = getAsArray(content, "labels").some( l => ["Sponsored", "Product Spotlight"].indexOf(l) >= 0) || input.preventHTMLInjection; | ||
| $ const blockName = defaultValue(input.blockName, 'page-contents'); | ||
| $ const aliases = getAsArray(input, 'aliases'); | ||
| $ const selector = defaultValue(input.selector, `content-body-${content.id}`); | ||
|
|
||
| <!-- Desktop Inline Ad props --> | ||
| $ const desktopAdCounts = defaultValue(input.desktopAdCounts, [1500, 2750, 4500, 6250, 8000, 9750, 11500, 13250, 15000, 16750, 18500]); | ||
| $ const desktopAdName = defaultValue(input.desktopAdName, "inline-content-desktop"); | ||
| $ const desktopAdModifiers = defaultValue(input.desktopAdModifiers, ["margin-auto-x", "inline-content", "inline-content-desktop"]); | ||
| $ const desktopAdDataPropToPreventDupes = defaultValue(input.desktopAdDataPropToPreventDupes, "gamTemplateName"); | ||
|
|
||
| <!-- Desktop Leaderboard Ad props --> | ||
| $ const desktopLeaderboardAdCounts = defaultValue(input.desktopLeaderboardAdCounts, [350]); | ||
| $ const desktopLeaderboardAdName = defaultValue(input.desktopLeaderboardAdName, desktopAdName); | ||
| $ const desktopLeaderboardAdModifiers = defaultValue(input.desktopLeaderboardAdModifiers, desktopAdModifiers); | ||
| $ const desktopLeaderboardAdDataPropToPreventDupes = defaultValue(input.desktopLeaderboardAdDataPropToPreventDupes, desktopAdDataPropToPreventDupes); | ||
|
|
||
| <!-- Mobile Inline Ad props --> | ||
| $ const mobileAdCounts = defaultValue(input.mobileAdCounts, [900, 1650, 2950, 4250, 5550, 6850, 8150, 9450, 10750, 12050, 13350, 14650, 15950, 17250]); | ||
| $ const mobileAdName = defaultValue(input.mobileAdName, "inline-content-mobile"); | ||
| $ const mobileAdModifiers = defaultValue(input.mobileAdModifiers, ["margin-auto-x", "inline-content", "inline-content-mobile"]); | ||
| $ const mobileAdDataPropToPreventDupes = defaultValue(input.mobileAdDataPropToPreventDupes, "gamTemplateName"); | ||
|
|
||
| <!-- Mobile Leaderboard Ad props || fallback set to 250 & mobileAdProps --> | ||
| $ const mobileLeaderboardAdCounts = defaultValue(input.mobileLeaderboardAdCounts, [250]); | ||
| $ const mobileLeaderboardAdName = defaultValue(input.mobileLeaderboardAdName, mobileAdName); | ||
| $ const mobileLeaderboardAdModifiers = defaultValue(input.mobileLeaderboardAdModifiers, mobileAdModifiers); | ||
| $ const mobileLeaderboardAdDataPropToPreventDupes = defaultValue(input.mobileLeaderboarAdDataPropToPreventDupes, mobileAdDataPropToPreventDupes); | ||
|
|
||
| <!-- Only set GAM defaults if GAM is present on out.global --> | ||
| $ const gamAdInjection = (GAM) ? [ | ||
| { | ||
| counts: desktopLeaderboardAdCounts, | ||
| name: desktopLeaderboardAdName, | ||
| modifiers: desktopLeaderboardAdModifiers, | ||
| dataPropToPreventDupes: desktopLeaderboardAdDataPropToPreventDupes | ||
| }, | ||
| { | ||
| counts: desktopAdCounts, | ||
| name: desktopAdName, | ||
| modifiers: desktopAdModifiers, | ||
| dataPropToPreventDupes: desktopAdDataPropToPreventDupes | ||
| }, | ||
| { | ||
| counts: mobileLeaderboardAdCounts, | ||
| name: mobileLeaderboardAdName, | ||
| modifiers: mobileLeaderboardAdModifiers, | ||
| dataPropToPreventDupes: mobileLeaderboardAdDataPropToPreventDupes | ||
| }, | ||
| { | ||
| counts: mobileAdCounts, | ||
| name: mobileAdName, | ||
| modifiers: mobileAdModifiers, | ||
| dataPropToPreventDupes: mobileAdDataPropToPreventDupes | ||
| } | ||
| ] : []; | ||
|
|
||
|
|
||
| <theme-ssr-html-inject | ||
| to-render=MarkoWebContentBody | ||
| selector=`#${selector}` | ||
| > | ||
| <@component-input | ||
| block-name=blockName | ||
| modifiers=modifiers | ||
| obj=content | ||
| attrs={ id: selector } | ||
| embed-options=input.embedOptions | ||
| lazyload-first-image=input.lazyloadFirstImage | ||
| /> | ||
| <if(!preventHTMLInjection)> | ||
| <for|adInjection| of=gamAdInjection> | ||
| $ const { counts, name, modifiers } = adInjection; | ||
| <if(adInjection.counts.length)> | ||
| <for|count| of=adInjection.counts> | ||
| <@inject | ||
| at=count | ||
| html=GAMDefineDisplayAd.renderToString({ | ||
| name, | ||
| aliases, | ||
| modifiers, | ||
| $global | ||
| }) | ||
| dataPropToPreventDupes=adInjection.dataPropToPreventDupes | ||
| /> | ||
| </for> | ||
| </if> | ||
| </for> | ||
| </if> | ||
| </theme-ssr-html-inject> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| const cheerio = require('cheerio'); | ||
|
|
||
| module.exports = ({ body } = {}) => { | ||
| const $ = cheerio.load(body); | ||
| // Suspecting halfway needs to be calculated like quarterway due to injected ads here | ||
| const likelyHalfwayElement = Math.floor($('div').children().length / 4); | ||
| const part1Nodes = []; | ||
| const part2Nodes = []; | ||
| $('div').children().each((index, node) => { | ||
| if (index < likelyHalfwayElement) { | ||
| part1Nodes.push($.html(node)); | ||
| } else { | ||
| part2Nodes.push($.html(node)); | ||
| } | ||
| }); | ||
| const partOne = part1Nodes.join(''); | ||
| const partTwo = part2Nodes.join(''); | ||
| return { partOne, partTwo }; | ||
| }; |