<link media="all" rel="stylesheet" href="/assets/themes/default/css/mobile-app-ctas.css?cb=">
<div class="mobile-app-ctas" data-module="mobileAppCtas">
<a href="" class="mobile-app-ctas__cta mobile-app-ctas__ios-cta js-ios-cta" target="_blank" rel="noopener"><span>Download on the App Store</span></a>
<a href="" class="mobile-app-ctas__cta mobile-app-ctas__android-cta js-android-cta" target="_blank" rel="noopener"><span>Get it on Google Play</span></a>
</div>
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/mobile-app-ctas.css?cb={{cacheBuster}}">
{{/if}}
<div class="mobile-app-ctas" data-module="mobileAppCtas">
<a href="{{appStoreUrl}}" class="mobile-app-ctas__cta mobile-app-ctas__ios-cta js-ios-cta" target="_blank" rel="noopener"><span>Download on the App Store</span></a>
<a href="{{googlePlayUrl}}" class="mobile-app-ctas__cta mobile-app-ctas__android-cta js-android-cta" target="_blank" rel="noopener"><span>Get it on Google Play</span></a>
</div>
{
"theme": "default",
"firstInstance": true
}
import addToDataLayer from '../../../../js/utils/datalayer';
class MobileAppCtas {
constructor(module) {
const iosLink = module.querySelector('.js-ios-cta');
iosLink.addEventListener('click', () => {
MobileAppCtas.trackClick('App Store', iosLink.getAttribute('href'));
});
const googlePlayLink = module.querySelector('.js-android-cta');
googlePlayLink.addEventListener('click', () => {
MobileAppCtas.trackClick('Google Play', googlePlayLink.getAttribute('href'));
});
}
static trackClick(buttonName, downloadLink) {
addToDataLayer({
'event': 'app.click',
'buttonName': buttonName,
'downloadName': downloadLink,
});
}
}
export default (module) => new MobileAppCtas(module);
@import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';
.mobile-app-ctas {
text-align: center;
&__cta {
background-color: transparent;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
display: block;
height: 41px;
margin: 15px 0;
@include breakpoint(medium) {
display: inline-block;
margin: 15px 25px;
width: 173px;
}
span {
@extend %visually-hidden;
}
}
&__ios-cta {
background-image: url('../images/app-store.svg');
}
&__android-cta {
background-image: url('../images/google-play.svg');
}
}
No notes defined.