Skip to content

Commit 3dda905

Browse files
author
George Haberis
committed
Reapply "Track Affiliate Disclaimer with Ophan"
This reverts commit da623a8.
1 parent 4c25252 commit 3dda905

File tree

9 files changed

+141
-75
lines changed

9 files changed

+141
-75
lines changed

‎dotcom-rendering/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
"@guardian/identity-auth": "6.0.1",
3939
"@guardian/identity-auth-frontend": "8.1.0",
4040
"@guardian/libs": "26.1.0",
41-
"@guardian/ophan-tracker-js": "2.6.3",
41+
"@guardian/ophan-tracker-js": "2.8.0",
4242
"@guardian/react-crossword": "11.1.0",
4343
"@guardian/shimport": "1.0.2",
4444
"@guardian/source": "11.3.0",

dotcom-rendering/src/components/AffiliateDisclaimer.tsx renamed to dotcom-rendering/src/components/AffiliateDisclaimer.importable.tsx

Lines changed: 50 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import {
77
textSans15,
88
} from '@guardian/source/foundations';
99
import { Hide } from '@guardian/source/react-components';
10+
import { useEffect } from 'react';
11+
import { submitComponentEvent } from '../client/ophan/ophan';
1012
import { palette as themePalette } from '../palette';
1113

1214
const disclaimerLeftColStyles = css`
@@ -75,36 +77,59 @@ const DisclaimerText = () => (
7577
</p>
7678
);
7779

78-
const AffiliateDisclaimer = () => (
79-
<Hide until="leftCol">
80-
<aside
81-
css={[disclaimerLeftColStyles]}
82-
data-testid="affiliate-disclaimer"
83-
>
84-
<DisclaimerText />
85-
</aside>
86-
</Hide>
87-
);
80+
const useAffiliateDisclaimerEvent = () => {
81+
useEffect(() => {
82+
void submitComponentEvent(
83+
{
84+
action: 'DETECT',
85+
component: {
86+
componentType: 'AFFILIATE_DISCLAIMER',
87+
},
88+
},
89+
'Web',
90+
);
91+
}, []);
92+
};
93+
94+
const AffiliateDisclaimer = () => {
95+
useAffiliateDisclaimerEvent();
96+
return (
97+
<Hide until="leftCol">
98+
<aside
99+
css={[disclaimerLeftColStyles]}
100+
data-testid="affiliate-disclaimer"
101+
>
102+
<DisclaimerText />
103+
</aside>
104+
</Hide>
105+
);
106+
};
107+
108+
const AffiliateDisclaimerInline = () => {
109+
useAffiliateDisclaimerEvent();
110+
return (
111+
<Hide from="leftCol">
112+
<aside
113+
css={[disclaimerInlineStyles]}
114+
data-testid="affiliate-disclaimer-inline"
115+
>
116+
<DisclaimerText />
117+
</aside>
118+
</Hide>
119+
);
120+
};
88121

89-
const AffiliateDisclaimerInline = () => (
90-
<Hide from="leftCol">
122+
const GalleryAffiliateDisclaimer = () => {
123+
useAffiliateDisclaimerEvent();
124+
return (
91125
<aside
92-
css={[disclaimerInlineStyles]}
93-
data-testid="affiliate-disclaimer-inline"
126+
css={[disclaimerLeftColStyles, galleryDisclaimerStyles]}
127+
data-testid="affiliate-disclaimer"
94128
>
95129
<DisclaimerText />
96130
</aside>
97-
</Hide>
98-
);
99-
100-
const GalleryAffiliateDisclaimer = () => (
101-
<aside
102-
css={[disclaimerLeftColStyles, galleryDisclaimerStyles]}
103-
data-testid="affiliate-disclaimer"
104-
>
105-
<DisclaimerText />
106-
</aside>
107-
);
131+
);
132+
};
108133

109134
export {
110135
AffiliateDisclaimer,

‎dotcom-rendering/src/layouts/AudioLayout.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
} from '@guardian/source/foundations';
88
import { StraightLines } from '@guardian/source-development-kitchen/react-components';
99
import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web';
10-
import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer';
10+
import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer.importable';
1111
import { ArticleBody } from '../components/ArticleBody';
1212
import { ArticleContainer } from '../components/ArticleContainer';
1313
import { ArticleHeadline } from '../components/ArticleHeadline';
@@ -272,7 +272,12 @@ export const AudioLayout = (props: WebProps) => {
272272
}
273273
/>
274274
{!!article.affiliateLinksDisclaimer && (
275-
<AffiliateDisclaimer />
275+
<Island
276+
priority="enhancement"
277+
defer={{ until: 'idle' }}
278+
>
279+
<AffiliateDisclaimer />
280+
</Island>
276281
)}
277282
</div>
278283
</GridItem>

‎dotcom-rendering/src/layouts/GalleryLayout.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { Hide } from '@guardian/source/react-components';
99
import { AdPlaceholder } from '../components/AdPlaceholder.apps';
1010
import { AdPortals } from '../components/AdPortals.importable';
1111
import { AdSlot } from '../components/AdSlot.web';
12-
import { GalleryAffiliateDisclaimer } from '../components/AffiliateDisclaimer';
12+
import { GalleryAffiliateDisclaimer } from '../components/AffiliateDisclaimer.importable';
1313
import { AppsFooter } from '../components/AppsFooter.importable';
1414
import { ArticleHeadline } from '../components/ArticleHeadline';
1515
import { ArticleMetaApps } from '../components/ArticleMeta.apps';
@@ -496,7 +496,9 @@ const Meta = ({
496496
/>
497497
) : null}
498498
{!!frontendData.affiliateLinksDisclaimer && (
499-
<GalleryAffiliateDisclaimer />
499+
<Island priority="enhancement" defer={{ until: 'idle' }}>
500+
<GalleryAffiliateDisclaimer />
501+
</Island>
500502
)}
501503
</div>
502504
);

‎dotcom-rendering/src/layouts/ImmersiveLayout.tsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
import { StraightLines } from '@guardian/source-development-kitchen/react-components';
1010
import { AdPortals } from '../components/AdPortals.importable';
1111
import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web';
12-
import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer';
12+
import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer.importable';
1313
import { AppsFooter } from '../components/AppsFooter.importable';
1414
import { ArticleBody } from '../components/ArticleBody';
1515
import { ArticleContainer } from '../components/ArticleContainer';
@@ -601,7 +601,12 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
601601
}
602602
/>
603603
{!!article.affiliateLinksDisclaimer && (
604-
<AffiliateDisclaimer />
604+
<Island
605+
priority="enhancement"
606+
defer={{ until: 'idle' }}
607+
>
608+
<AffiliateDisclaimer />
609+
</Island>
605610
)}
606611
</Hide>
607612
</>
@@ -631,7 +636,12 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
631636
}
632637
/>
633638
{!!article.affiliateLinksDisclaimer && (
634-
<AffiliateDisclaimer />
639+
<Island
640+
priority="enhancement"
641+
defer={{ until: 'idle' }}
642+
>
643+
<AffiliateDisclaimer />
644+
</Island>
635645
)}
636646
</>
637647
)}

‎dotcom-rendering/src/layouts/ShowcaseLayout.tsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { Hide } from '@guardian/source/react-components';
99
import { StraightLines } from '@guardian/source-development-kitchen/react-components';
1010
import { AdPortals } from '../components/AdPortals.importable';
1111
import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web';
12-
import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer';
12+
import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer.importable';
1313
import { AppsFooter } from '../components/AppsFooter.importable';
1414
import { ArticleBody } from '../components/ArticleBody';
1515
import { ArticleContainer } from '../components/ArticleContainer';
@@ -482,7 +482,12 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => {
482482
}
483483
/>
484484
{!!article.affiliateLinksDisclaimer && (
485-
<AffiliateDisclaimer />
485+
<Island
486+
priority="enhancement"
487+
defer={{ until: 'idle' }}
488+
>
489+
<AffiliateDisclaimer />
490+
</Island>
486491
)}
487492
</Hide>
488493
</>
@@ -512,7 +517,12 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => {
512517
}
513518
/>
514519
{!!article.affiliateLinksDisclaimer && (
515-
<AffiliateDisclaimer />
520+
<Island
521+
priority="enhancement"
522+
defer={{ until: 'idle' }}
523+
>
524+
<AffiliateDisclaimer />
525+
</Island>
516526
)}
517527
</>
518528
)}

‎dotcom-rendering/src/layouts/StandardLayout.tsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { Hide } from '@guardian/source/react-components';
99
import { StraightLines } from '@guardian/source-development-kitchen/react-components';
1010
import { AdPortals } from '../components/AdPortals.importable';
1111
import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web';
12-
import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer';
12+
import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer.importable';
1313
import { AppsEpic } from '../components/AppsEpic.importable';
1414
import { AppsFooter } from '../components/AppsFooter.importable';
1515
import { ArticleBody } from '../components/ArticleBody';
@@ -644,7 +644,12 @@ export const StandardLayout = (props: WebProps | AppProps) => {
644644
/>
645645
</div>
646646
{!!article.affiliateLinksDisclaimer && (
647-
<AffiliateDisclaimer />
647+
<Island
648+
priority="enhancement"
649+
defer={{ until: 'idle' }}
650+
>
651+
<AffiliateDisclaimer />
652+
</Island>
648653
)}
649654
</Hide>
650655
</>
@@ -674,7 +679,12 @@ export const StandardLayout = (props: WebProps | AppProps) => {
674679
}
675680
/>
676681
{!!article.affiliateLinksDisclaimer && (
677-
<AffiliateDisclaimer />
682+
<Island
683+
priority="enhancement"
684+
defer={{ until: 'idle' }}
685+
>
686+
<AffiliateDisclaimer />
687+
</Island>
678688
)}
679689
</div>
680690
)}

‎dotcom-rendering/src/lib/renderElement.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { AdPlaceholder } from '../components/AdPlaceholder.apps';
2-
import { AffiliateDisclaimerInline } from '../components/AffiliateDisclaimer';
2+
import { AffiliateDisclaimerInline } from '../components/AffiliateDisclaimer.importable';
33
import { AudioAtomWrapper } from '../components/AudioAtomWrapper.importable';
44
import { BlockquoteBlockComponent } from '../components/BlockquoteBlockComponent';
55
import { CalloutBlockComponent } from '../components/CalloutBlockComponent.importable';
@@ -958,7 +958,11 @@ export const renderElement = ({
958958
</Island>
959959
);
960960
case 'model.dotcomrendering.pageElements.DisclaimerBlockElement': {
961-
return <AffiliateDisclaimerInline />;
961+
return (
962+
<Island priority="enhancement" defer={{ until: 'idle' }}>
963+
<AffiliateDisclaimerInline />
964+
</Island>
965+
);
962966
}
963967
case 'model.dotcomrendering.pageElements.CrosswordElement':
964968
return (

0 commit comments

Comments
 (0)