England Football

Match Detail: Full Time Match 

<div class="match-details-container">
    <div class="match-score">
        <div class="match-score__goalscorers-left">
            <div class="goal-scorers " data-behaviour="home-team">
                <div class="goal-scorers__group player-scored">
                    <ul>
                        <li>
                            <span class="scorer-firstname">Kane</span>Kane
                            <span class="goal-time">(4&prime;)</span>
                            <span class="goal-time">(63&prime;)</span>
                        </li>
                        <li>
                            <span class="scorer-firstname">Rashford</span>Rashford
                            <span class="goal-time">(23&prime; PEN)</span>
                        </li>
                    </ul>
                </div>
                <div class="goal-scorers__group player-sent-off">
                    <ul>
                        <li>
                            <span class="scorer-firstname">Mings</span>Mings
                            <span class="goal-time">(76&prime;)</span>
                        </li>
                    </ul>
                </div>
                <div class="goal-scorers__group missed-a-penalty">
                    <ul>
                        <li>
                            <span class="scorer-firstname">Mings</span>Mings
                            <span class="goal-time">(41&prime; MISSED PEN)</span>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
        <div class="match-score__scoreline">
            <div class="scoreline">
                <div class="scoreline__title">Full time</div>
                <div class="scoreline__tournament-name">National league group stage</div>
                <div class="scoreline__location"><span>Sat 31 March, 3pm</span> <span>Wembley stadium, England</span></div>
                <div class="scoreline__results">
                    <div class="scoreline__team-crests">
                        <img src="/assets/example-content/team-badge-eng.png" alt="England" />
                    </div>
                    <div class="scoreline__team-goals" data-behaviour="team-goals-scored">
                        <div class="scoreline__team-goals--scored ">
                            <span>4</span>
                            <span>2</span>
                        </div>
                        <div class="scoreline__team-goals--time">
                            <span class="scoreline__team-goals--ht">HT: 2-2</span>
                            <span class="scoreline__team-goals--ft">FT: 2-3</span>
                        </div>
                    </div>
                    <div class="scoreline__team-crests">
                        <img src="/assets/example-content/team-badge-isl.png" alt="Iceland" />
                    </div>
                </div>
                <div class="scoreline__final-result">England win 4 - 3 on penalties</div>
            </div>

        </div>
        <div class="match-score__goalscorers-right">
            <div class="goal-scorers  goal-scorers--invert " data-behaviour="away-team">
                <div class="goal-scorers__group player-scored">
                    <ul>
                        <li>
                            <span class="scorer-firstname">Sterling</span>Sterling
                            <span class="goal-time">(19&prime;)</span>
                        </li>
                        <li>
                            <span class="scorer-firstname">Sterling</span>Sterling
                            <span class="goal-time">(46&prime;)</span>
                        </li>
                    </ul>
                </div>
                <div class="goal-scorers__group player-sent-off">
                    <ul>
                        <li>
                            <span class="scorer-firstname">Sterling</span>Sterling
                            <span class="goal-time">(65&prime;)</span>
                        </li>
                        <li class="yellowcard">
                            <span class="scorer-firstname">Sterling</span>Sterling
                            <span class="goal-time">(64&prime;)</span>
                        </li>
                        <li class="yellowredcard">
                            <span class="scorer-firstname">Sterling</span>Sterling
                            <span class="goal-time">(64&prime;)</span>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </div>

    <div class="match-stats">
        <opta-widget widget="matchstats" competition="8" season="2020" match="2128322" template="custom" live="false" navigation="tabs_more" default_nav="1" show_match_header="false" show_score="false" show_halftime_score="false" show_crests="false" show_team_formation="false" show_competition_name="true" graph_style="full" show_date="false" date_format="dddd D MMMM YYYY" rounding="1" competition_naming="full" team_naming="full" stats_categories="Category 1|possession,shots,shots_on_target,corners_won,fouls_conceded" show_live="false" show_logo="false" show_title="false" breakpoints="400, 700" sport="football"></opta-widget>
    </div>

</div>

No notes defined.

{
  "withNextMatch": false,
  "withFullTime": true,
  "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}}