<div class="upcoming-fixture-list" data-behaviour="upcoming-fixtures-list">
<!-- Last match fixture start-->
<div class="fixture-list__item mob-hide" data-analytics='{"pagename":"","matchtype":"","matchmode":"","matchdetail":"","matchvenue":"","date":""}'>
<article class="last-match-card fixture-card">
<div class="last-match-card__fixture-info fixture-card__fixture-info">
<h3 class="last-match-card__title">
Last match
</h3>
<p class="last-match-card__subtitle fixture-card__tournament">
euro 2021 group stage
</p>
<span class="last-match-card__location fixture-card__location">wembley stadium, england</span>
<span class="last-match-card__location fixture-card__location">sat 14 june 2020</span>
</div>
<div class="last-match-fixture-detail fixture-detail--result">
<p class="visually-hidden">Results</p>
<p class="last-match-fixture-detail__col fixture-detail__col">
<span class="last-match-fixture-detail__team fixture-detail__team">
<img src="/assets/example-content/crest-england.svg" alt="England" />England</span>
<span class="last-match-fixture-detail__score fixture-detail__score">3</span>
</p>
<p class="last-match-fixture-detail__col fixture-detail__col">
<span class="last-match-fixture-detail__team fixture-detail__team">
<img src="/assets/example-content/crest-iceland.png" alt="Iceland" />Iceland</span>
<span class="last-match-fixture-detail__score fixture-detail__score">1</span>
</p>
<p class="last-match-fixture-detail__extra-info fixture-detail__extra-info"><abbr title="After Extra Time">AET</abbr> <span>England win 4 - 3 on
penalties</span></p>
</div>
<div class="last-match-card__ctas fixture-card__ctas">
<a href="https://ticketing.thefa.com/" class="cta cta--secondary " target="_blank" name="match-report-highlights" tabindex="0">match report & highlights</a>
</div>
</article>
</div>
<!-- Next match fixture start-->
<div class="fixture-list__item " data-analytics='{"pagename":"","matchtype":"","matchmode":"","matchdetail":"","matchvenue":"","date":""}'>
<div class="fixtures-block">
<h2 class="fixtures-block__title">Next match</h2>
<div class="fixtures-block__subtitle">Nations league group stage</div>
<div class="fixtures-block__match">
<div class="fixtures-block__team">
<div class="fixtures-block__team-block">
<img src="/assets/example-content/team-badge-eng.png" />
<span class="fixtures-block__team-name" aria-label="England">ENG</span>
</div>
</div>
<div class="fixtures-block__split">
<span class="fixtures-block__split-vs" aria-label="Versus">vs</span>
</div>
<div class="fixtures-block__team">
<div class="fixtures-block__team-block">
<span class="fixtures-block__team-name" aria-label="Iceland">ISL</span>
<img src="/assets/example-content/team-badge-isl.png" />
</div>
</div>
</div>
<div class="fixtures-block__place">Wembley stadium, England</div>
<div class="fixtures-block__type">
<span>Thu 25, March 2021</span>
<span class="fixtures-block__pipe">|</span>
<span> 19:45 GMT</span>
</div>
<div class="fixtures-block__actions">
<div>
<div class="fixtures-block__buttons">
<div class="fixtures-block__button-left">
<a href="" class="cta cta--primary">Buy tickets</a>
</div>
<div class="fixtures-block__button-right">
<a href="" class="cta cta--secondary">View tables & Fixtures</a>
</div>
</div>
</div>
<div class="fixtures-block__schedule-partner">
<div class="fixtures-block__schedule">
<div class="fixtures-block__partner">
<span>Official Partner</span>
<img src="/assets/example-content/hublot-logo.png" />
</div>
<div class="fixtures-block__datetimer" data-behavior="countdown-timer" data-targetdate="9/2/2021 7:45:00 PM">
<ul>
<li>00<span>Weeks</span></li>
<li>00<span>Days</span></li>
<li>00<span>Hrs</span></li>
<li>00<span>Mins</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Upcoming match fixture start-->
<div class="fixture-list__item mob-hide" data-analytics='{"pagename":"","matchtype":"","matchmode":"","matchdetail":"","matchvenue":"","date":""}'>
<article class="following-match-card" data-filter='{ "filter": "competition", "name": "", "id": "" }' data-analytics='{"pagename":"","matchtype":"","matchmode":"","matchdetail":"","matchvenue":"","date":""}'>
<div class="following-match-card__fixture-info fixture-card__fixture-info">
<h3 class="following-match-card__title">
Following match
</h3>
<p class="following-match-card__subtitle fixture-card__tournament">
euro 2021 group stage
</p>
<span class="following-match-card__location fixture-card__location">wembley stadium, england</span>
<span class="following-match-card__location fixture-card__location">sat 14 june 2020</span>
</div>
<div class="following-match-fixture-detail fixture-detail">
<p class="visually-hidden">Fixture</p>
<p class="following-match-fixture-detail__col fixture-detail__col">
<span class="following-match-fixture-detail__team fixture-detail__team">
<img src="/assets/example-content/crest-england.svg" alt="" />England</span>
</p>
<p class="following-match-fixture-detail__col fixture-detail__col">
<span class="following-match-fixture-detail__team fixture-detail__team">
<img src="/assets/example-content/crest-iceland.png" alt="" />Denmark</span>
</p>
<p class="following-match-fixture-detail__time fixture-detail__time">20:00</p>
</div>
<div class="following-match-card__ctas fixture-card__ctas">
<a href="https://ticketing.thefa.com/" class="cta cta--primary " target="_blank" name="buy-tickets" tabindex="0">Buy tickets</a>
</div>
</article>
</div>
</div>
No notes defined.
{
"withNextMatch": true,
"withFullTime": false,
"withLivescore": false
}
const toTitleCase = str => str.replace(/(^\w|\s\w)/g, m => m.toUpperCase());
function bindAnalyticsClickEvent(parentElement, matchDetailCTAs) {
matchDetailCTAs.forEach(ctaButton => {
ctaButton.addEventListener('click', event => {
event.preventDefault();
const buttonElement = event.target;
const buttonlabel = `CTA - ${toTitleCase(buttonElement.text)}`;
const analyticsdata = JSON.parse(
buttonElement
.closest('.fixture-list__item')
.getAttribute('data-analytics')
);
window.dataLayer.push({
event: 'All Events',
eventName: 'England Football',
eventCategory: analyticsdata.pagename,
eventAction: analyticsdata.matchtype,
eventLabel: buttonlabel,
eventparameter1: analyticsdata.matchmode,
eventparameter2: analyticsdata.matchdetail,
eventparameter3: analyticsdata.matchvenue,
eventparameter4: analyticsdata.date,
eventparameter5: analyticsdata.time,
});
// Remove datalayer eventparametes after every event is fired
/*
When an event is populated into the DataLayer,
the values are persistent across all tags firing afterwards,
so removal of the paramaters is important for duplication of values across tags.
*/
window.dataLayer.push({
event: 'Removal Tag',
eventparameter1: undefined,
eventparameter2: undefined,
eventparameter3: undefined,
eventparameter4: undefined,
eventparameter5: undefined,
});
const windowLocation = buttonElement.getAttribute('target');
const redirectUrl = buttonElement.getAttribute('href');
window.open(redirectUrl, windowLocation || '_self');
return true;
});
});
}
export default parentElement => {
const matchDetailCTAs = parentElement.querySelectorAll('a.cta');
if (!matchDetailCTAs.length) {
return;
}
bindAnalyticsClickEvent(parentElement, matchDetailCTAs);
};
{{#if withNextMatch}}
{{render '@upcoming-fixture'}}
{{/if}}
{{#if withFullTime}}
<div class="match-details-container">
{{render '@match-score'}}
{{render '@match-stats'}}
</div>
{{/if}}
{{#if withLivescore}}
<div class="match-details-container">
{{render '@match-score--live-score'}}
{{render '@match-stats'}}
</div>
{{/if}}