England Football

Match Detail: Default 

<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":""}'>
        <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">
                    <p>match report &amp; highlights</p>
                </a>

            </div>

        </article>

    </div>

    <!-- Next match fixture start-->
    <div class="fixture-list__item " data-analytics='{"pagename":"","matchtype":"","matchmode":"","matchdetail":"","matchvenue":""}'>
        <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>

            </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 &amp; 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":""}'>
        <article class="following-match-card" data-filter='{ "filter": "competition", "name": "", "id": "" }' data-analytics='{"pagename":"","matchtype":"","matchmode":"","matchdetail":"","matchvenue":""}'>
            <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">
                    <p>Buy tickets</p>
                </a>

            </div>
        </article>

    </div>

</div>

No notes defined.

{
  "withNextMatch": true,
  "withFullTime": false,
  "withLivescore": false
}
  • Content: 
    function bindAnalyticsClickEvent(parentElement, matchDetailCTAs) {
  matchDetailCTAs.forEach(ctaButton => {
    ctaButton.addEventListener('click', event => {
      event.preventDefault();
      const buttonElement = event.target;
      const getbuttonClass = buttonElement.getAttribute('class');
      const getbuttonlabel = buttonElement.text;
      const buttonlabel = getbuttonlabel.toLowerCase();
      const buttonURL = buttonElement.getAttribute('href');
      const analyticsdata = JSON.parse(
        buttonElement
          .closest('.fixture-list__item')
          .getAttribute('data-analytics')
      );

      let buttonName = '';

      if (
        ![
          'cta cta--primary',
          'cta cta--primary ',
          'cta cta--secondary',
          'cta cta--secondary ',
        ].includes(getbuttonClass)
      ) {
        return false;
      }

      if (
        getbuttonClass === 'cta cta--primary' ||
        getbuttonClass === 'cta cta--primary '
      ) {
        buttonName = 'cta_primary_click';
      } else if (
        getbuttonClass === 'cta cta--secondary' ||
        getbuttonClass === 'cta cta--secondary '
      ) {
        buttonName = 'cta_secondary_click';
      }

      window.dataLayer.push({
        // Below datalayer eventparametes is used for GA4 Implementation
        event: 'All Events',
        event_name: buttonName,
        item_list_name: analyticsdata.matchtype,
        link_text: buttonlabel,
        link_url: buttonURL,
        team_name: analyticsdata.matchdetail,
        location: analyticsdata.matchvenue,
        tournament: analyticsdata.matchmode,
        // Below datalayer eventparametes is used for GA3 Implementation
        eventCategory: analyticsdata.pagename,
        eventAction: analyticsdata.matchtype,
        eventLabel: buttonlabel,
        eventparameter1: analyticsdata.matchmode,
        eventparameter2: analyticsdata.matchdetail,
        eventparameter3: analyticsdata.matchvenue,
      });
      // 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',
        event_name: undefined,
        item_list_name: undefined,
        link_text: undefined,
        link_url: undefined,
        team_name: undefined,
        location: undefined,
        tournament: undefined,
        // Below datalayer eventparametes is used for GA3 Implementation
        eventCategory: undefined,
        eventAction: undefined,
        eventLabel: undefined,
        eventparameter1: undefined,
        eventparameter2: undefined,
        eventparameter3: 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);
};
  • URL: /components/raw/match-detail/match-detail-analytics.js
  • Filesystem Path: src/library/modules/match-detail/match-detail-analytics.js
  • Size: 3.3 KB 
{{#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}}