Can someone help me write the proper GA setup for the following HTML code?
I"m trying to track the downloads of the media kit and the capabilities (both PDF's)
I'm running analytics.js and it's pretty connfusing to me unfortunately.
Here is the code.
<div class="row">
<div class="twelve columns">
<div class="tabs-content-container">
<div class="eight columns">
<img src="img/brochure.jpg" alt="blog" style="padding-bottom: 10px;">
</div>
<div class="four columns">
<h3>Download Company Overview</h3>
<p>Thank you for taking the time to learn more about our company. The additional information in these brochures will tell you more about our history, products and references.</p>
<p>Our printable company overview brochure is now available for download. Both documents require <a target="_blank" href="http://get.adobe.com/reader/"> Adobe Reader</a>. Click the links below to download our company’s Capabilities and Media Kit.</p>
<a target="_blank" href="Capabilities.pdf">Download Capabilities →</a>
</div>
</div>
</div>
</div>
</section>
<!-- end section-tabs -->
<section class="msg-container diff-msg" style="margin-bottom:0;">
<div class="msg-inner-container">
<a target="_blank" href="MediaKit.pdf" class="download">Download Media Kit</a>
</div>
</section>
the issue is that I'm used to the ga.js style of event tracking in which I would have done something like this: Download Media Kit. That however doesn't work with analytics.js and the documentation doesn't really make sense to me.
Thank you
I figured it out.
onClick="ga('send', {'hitType': 'event', 'eventCategory': 'download', 'eventAction': clickedDownload', eventLabel': 'Capabilities' });"
thanks to everyone who tried to help.
Related
I have a link in my page that downloads a PDF file however after they have clicked either of the download links, I would like to take them to another page.
The page gives them one of 2 choices for selecting a download file but I only wish to allow them to make one choice and then exit to another page.
My code is as follows:
<div class="columns medium-6">
<h3 class="text-center">7 Tips for Creating a <br />Happy Workplace</h3> <img src="https://www.maylake.com.au/_assets/images/mini-guide/bookcover-7-tips-workplace.png" height="250px" alt="7 Tips for Creating a Happy Workplace eBook">
<p style="font-size: 18px;" class="text-center">Discover how you can make your workplace a healthier environment by simply making being a happy place to work for everyone</p>
<div class="choose">
<input type="radio" name="choice-books" id="choice-7-tips">
<label>I would like to receive a copy of the eBook</label>
<div class="reveal-if-active">
<p class="text-center">DOWNLOAD Now </p>
</div>
</div>
</div>
<div class="columns medium-6">
<h3 class="text-center">Your Short Guide to Leasing a Commercial Office Space</h3> <img src="https://www.maylake.com.au/_assets/images/mini-guide/bookcover-leasing-commercial-office.png" alt="Guide to Leasing Commercial Office" height="250">
<p style="font-size: 18px;" class="text-center">Understand what you should be considering before leasing any commercial office space. Being forewarned and prepared could save you lots
of money and grief</p>
<div class="choose">
<input type="radio" name="choice-books" id="choice-leasing">
<label for="choice-leasing">I would like to receive a copy of the eBook</label>
<div class="reveal-if-active">
<p class="text-center">DOWNLOAD Now </p>
</div>
</div>
</div>
I would change your a elements to something like this:
<a target="_blank" href="/LiteratureRetrieve.aspx?ID=192014" class="button radius text-center" onclick="window.location='http://google.com';">DOWNLOAD Now</a>
This will take them to google.com at the same time they are downloading the pdf.
I am trying to save a webpage for offline viewing but not exactly having luck.
The page is fairly intricate, as it involves javascript audio and video players, HTML embedded media.
On top of that, when I view the source I noticed ember-cli-fastboot comments and did some reading about it here: https://github.com/ember-fastboot/ember-cli-fastboot. So this ember-cli-fastboot seems to be all about server side rendering which for me I guess defeats the purpose of saving a website offline.
I have tried various Chrome extensions such as Save Page WE, WebScraper. They get me fairly close, with text, images, and the basic structure of the page looking fine, but the flash and JS-based players are not loading.
I also tried downloading the page in Chrome Developer Tools using Save All Resources extension, but that seems to produce similar result to what I get with Save Page WE, namely all text and images are loaded but audio and video players don't load.
Here is an example snippet of code for one of the players:
<div id="area49254180_6" class="component interaction_component float-none clear-none hideSlideshowControls interaction_booted"><div role="status" class="int-prep hidden"><i aria-hidden="true" class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i><br> Loading interaction...</div><div>
<div class="data-field interaction-type">Slideshow</div>
<div class="data-field interaction-init">
<span class="field">jplayer_swf_path</span><span class="value"><a target="_blank" href="https://dvgddacn5gars.cloudfront.net/691v.swf?response-content-disposition=inline%3Bfilename%3D%22Jplayer.swf%22&Expires=2147483647&Signature=BUOmjigHUL9go1MM~SvrLXLDR8gJZzCVKEUrXoUw~49Qn4g54HUK3nQpFpLUD8IXZiuv3ygkyqcxNMdhZg1V2g4DnvIql-tnGGZ2E1Kdyz3c6SIfbNx-LZasBf5M9jvoXFYGqEtugXZV0etgoGrL9CRV0Xnwn~Ee09DCrzdRPLQ_&Key-Pair-Id=APKAIVZN4AJ762UIENTQ">https://dvgddacn5gars.cloudfront.net/691v.swf?response-content-disposition=inline%3Bfilename%3D%22Jplayer.swf%22&Expires=2147483647&Signature=BUOmjigHUL9go1MM~SvrLXLDR8gJZzCVKEUrXoUw~49Qn4g54HUK3nQpFpLUD8IXZiuv3ygkyqcxNMdhZg1V2g4DnvIql-tnGGZ2E1Kdyz3c6SIfbNx-LZasBf5M9jvoXFYGqEtugXZV0etgoGrL9CRV0Xnwn~Ee09DCrzdRPLQ_&Key-Pair-Id=APKAIVZN4AJ762UIENTQ</a></span>
</div>
<div class="data-field interaction-asset">
<span class="field">audio_track</span><span class="value"><a target="_blank" href="https://dvgddacn5gars.cloudfront.net/5fkk.mp3?response-content-disposition=inline%3Bfilename%3D%22L01_Diatonic-Chords-1.mp3%22&Expires=2147483647&Signature=SGmoFTa4sBtiuDqCS0v9A5Qv6y7Q-3PftkRN6Eu3DbxhTqMLbmEhwA4~oXuaRw0BprkB8MbockpY3AhQwEUxWxVOrQE1WO9Wb-riZxHtygYphEpYcbn9eZ4Bp02u-4nM820PsOxqvWJ~-9Fovk7IFu1LAmZ-aG9vWptqPo5Ke-8_&Key-Pair-Id=APKAIVZN4AJ762UIENTQ">https://dvgddacn5gars.cloudfront.net/5fkk.mp3?response-content-disposition=inline%3Bfilename%3D%22L01_Diatonic-Chords-1.mp3%22&Expires=2147483647&Signature=SGmoFTa4sBtiuDqCS0v9A5Qv6y7Q-3PftkRN6Eu3DbxhTqMLbmEhwA4~oXuaRw0BprkB8MbockpY3AhQwEUxWxVOrQE1WO9Wb-riZxHtygYphEpYcbn9eZ4Bp02u-4nM820PsOxqvWJ~-9Fovk7IFu1LAmZ-aG9vWptqPo5Ke-8_&Key-Pair-Id=APKAIVZN4AJ762UIENTQ</a></span>
</div>
<div class="data-field interaction-asset">
<span class="field">images</span><span class="value"><a target="_blank" href="https://dvgddacn5gars.cloudfront.net/5fkj.xxx?response-content-disposition=inline%3Bfilename%3D%22L01_Diatonic-Chords-1.xxx%22&Expires=2147483647&Signature=inxGPaQkl-beyoR2OG8bOSLXCekpyWf4G6XmHq3KCgEV8qWDLJM5-ThWnI9hI~-nh8TtyrqsC8ZNYN3iWh~0U5zrzNfgw~8F96hhNmJuvsRyFWb33~yXyQVjSlBmKbrHd-qxa~tSm00W-ViBnNIMuQw1AVIy8uiZSSWwAiPnCTU_&Key-Pair-Id=APKAIVZN4AJ762UIENTQ">https://dvgddacn5gars.cloudfront.net/5fkj.xxx?response-content-disposition=inline%3Bfilename%3D%22L01_Diatonic-Chords-1.xxx%22&Expires=2147483647&Signature=inxGPaQkl-beyoR2OG8bOSLXCekpyWf4G6XmHq3KCgEV8qWDLJM5-ThWnI9hI~-nh8TtyrqsC8ZNYN3iWh~0U5zrzNfgw~8F96hhNmJuvsRyFWb33~yXyQVjSlBmKbrHd-qxa~tSm00W-ViBnNIMuQw1AVIy8uiZSSWwAiPnCTU_&Key-Pair-Id=APKAIVZN4AJ762UIENTQ</a></span>
</div>
<div class="data-field interaction-init">
<span class="field">initial_json</span><span class="value">[{"imageIndex":0,"time":0,"rect":null}]</span>
</div>
<div class="interaction_title"></div>
<div class="interaction_content Slideshow" style="min-height: 50px; width: 400px;"><div id="ember7214" class="ember-view"><div class="slideshow-jplayer" id="slideshow_player_49254180_6"></div>
<div class="slideshow-player">
<audio class="player" src="https://dvgddacn5gars.cloudfront.net/5fkk.mp3?response-content-disposition=inline%3Bfilename%3D%22L01_Diatonic-Chords-1.mp3%22&Expires=2147483647&Signature=SGmoFTa4sBtiuDqCS0v9A5Qv6y7Q-3PftkRN6Eu3DbxhTqMLbmEhwA4~oXuaRw0BprkB8MbockpY3AhQwEUxWxVOrQE1WO9Wb-riZxHtygYphEpYcbn9eZ4Bp02u-4nM820PsOxqvWJ~-9Fovk7IFu1LAmZ-aG9vWptqPo5Ke-8_&Key-Pair-Id=APKAIVZN4AJ762UIENTQ"></audio>
<div class="audio-controls">
<i class="fa fa-play playpause"></i>
<i class="fa fa-pause playpause inactive"></i>
<input id="player-seek" type="range" min="0" max="100" value="0" onchange="">
<i class="fa fa-retweet loop"></i>
</div>
</div>
<div class="controls fr hidden">
<i class="fa fa-arrow-circle-left back"></i>
<span class="pages">1 of 1</span>
<i class="fa fa-arrow-circle-right forward"></i>
</div>
<div class="page_container">
<div class="highlight hidden"></div>
<div class="image-area"><immg src="https://dvgddacn5gars.cloudfront.net/5fkj.png?response-content-disposition=inline%3Bfilename%3D%22L01_Diatonic-Chords-1.xxx%22&Expires=2147483647&Signature=inxGPaQkl-beyoR2OG8bOSLXCekpyWf4G6XmHq3KCgEV8qWDLJM5-ThWnI9hI~-nh8TtyrqsC8ZNYN3iWh~0U5zrzNfgw~8F96hhNmJuvsRyFWb33~yXyQVjSlBmKbrHd-qxa~tSm00W-ViBnNIMuQw1AVIy8uiZSSWwAiPnCTU_&Key-Pair-Id=APKAIVZN4AJ762UIENTQ"></div>
</div>
</div></div>
<div class="interaction_data" style="display: none;"></div>
</div></div>
Notice in the first div element above, this text: "interaction_booted" in the class name.
This seems to be the key to what is happening. When I save the page and then load it, using one of the methods I mentioned above, I see this in that first div element (corresponding to what I pasted above):
<div id="area49254180_6" class="component interaction_component float-none clear-none hideSlideshowControls"><div role="status" class="int-prep"><i aria-hidden="true" class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i><br> Loading interaction...</div>
So we no longer see "interaction booted" in the class name. So anytime I open saved versions of this page, the javascript seems to be making some sort of check and is then not loading the content, and instead replaces the element along the lines of what you see in the above code snippet.
Now, I am not a developer. I have done some PHP coding and am fairly technical at this stuff for a non dev, but hey I am a guitarist first and foremost and I am definitely out of my technical league trying to figure this out...
Really curious how you experts would go about saving this sort of content for offline viewing, such that all resources are saved offline, with no need for server side rendering. If it requires some custom scripting, I could probably handle it, just need to understand the general idea.
Thanks!
Brian, what you're looking for is something called service workers. You have to setup service workers on your project to make the contents visible offline.
Service workers run on your browser and as soon as you make a Server call, your service worker will cache the response and serve it to you. Because of the server responses being cached by the browser, when there's no internet, the API calls are intercepted by the SW and the cached response is returned.
You can use this awesome plugin by Dockyard to setup service workers on your project to start with. 🙌
I'm utilizing the Owl Carousel library for a slider on a partner's page. It's working pretty well except for setting the frequency and speed of the transitions.
I've followed the documentation and have the script, but it doesn't seem to be working properly. Below is the HTML and JS that I'm using. I've also linked to the page here: http://www.circuitclinicaltesting.com/our-partners.php
Like I said, all I'm trying to do is change the speed and frequency of the slides but it doesn't seem to work.
HTML
<div class="owlcarousel">
<section class="partner_slider slider_section header_height">
<ul id="main-slider" class="owl-carousel main_slider">
<div class="display-table">
<div class="table-cell">1
<div class="container">
<div class="col-md-1"></div>
<div class="slider_content">
<h2 class="text-left txt_white">PARTNER PERSPECTIVE</h2>
<h3>"Circuit Clinical provides us with the opportunity to shift the current paradigm when it comes to clinical research. They have been able to integrate research within our practice without the upfront cost."</h3>
<h2 class="txt_white">Dr. Raul Vazquez, MD</h2>
<p>Urban Family Practice</p>
</div>
</div>
</div>
</div>
<div class="display-table">
<div class="table-cell">
<div class="container">
<div class="col-md-1"></div>
<div class="slider_content">
<h2 class="text-left txt_white">PARTNER PERSPECTIVE</h2>
<h3>“Until now, I haven't had the opportunity to participate in clinical research because we didn’t have the infrastructure in place to do so. Circuit Clinical has provided the tools and infrastructure while also bringing the trials to us so we can begin enrollment immediately.”</h3>
<h2 class="txt_white">Dr. Dennis B. Chugh, MD</h2>
<p>Northtowns Cardiology</p>
</div>
</div>
</div>
</div>
</ul>
</section>
</div>
</div>
JS
<script>
$(document).ready(function() {
$("#main-slider").owlCarousel({
slideSpeed : 10000,
autoPlay : true,
autoplaySpeed:10000
});
});
</script>
I managed to figure it out. It was looking for autoplayTimeout. Adding the following to the script settings solved the issue!
autoplayTimeout: 10000,
smartSpeed: 1000,
I am using Socialite Social Network Laravel Script by BootstrapGuru. You can see the demo here to understand exacly what's happening. Try to open a chat window with anyone and enter some text and some symbols (for example: "how are you?") You will see the text now is "?how are you":
To solve that I am still waiting for the support answer but I am trying to solve it from my end.
I see this on my website's Vue Panel:
And this is how it's on the front end side.
<ul class="list-unstyled chat-conversation-list">
<li class="message-conversation" v-bind:class="[({{ Auth::id() }}==message.user.id) ? 'current-user' : '', ]" v-for="message in chatBox.conversationMessages.data"> <!-- Messages -->
<div class="media">
<div class="media-left">
<a href="#">
<img v-bind:src="message.user.avatar" alt="images">
</a>
</div>
<div class="media-body ">
<p class="post-text" v-html="message.body"></p>
</div>
</div>
</li>
</ul>
I've also tried to use the same way to get the message:
<div class="media-body ">
<p class="post-text">
#{{ message.body }}
</p>
</div>
But it is the same. Something important to mention maybe, is that the message is well displayed in the "receiver" window.
So, any clues to show the symbols where should be?
You can override it with some css:
.media-body .post-text{direciton: ltr;}
i have implemented the great "feature" Slider Pro from this side:
https://github.com/bqworks/slider-pro
Now i want to add "Links" to the description. This is easily possible by just adding the links in the html
Link
Unfortunately this link is not clickable. I think this is caused by the surrounding "area" - a link on this area triggers the slide to load...
is there a way to force links to be clickable?
How can i tell the browser that the link with the class "sp-thumbnail-description" should be always clickable?
Here is the source file:
Js File of SliderPro
My HTML looks like this:
<div id="example5" class="slider-pro">
<div class="sp-slides">
<div class="sp-slide">
<img class="sp-image" src="../src/css/images/blank.gif"
data-src="http://bqworks.com/slider-pro/images/image1_medium.jpg"
data-retina="http://bqworks.com/slider-pro/images/image1_large.jpg"/>
</div>
</div>
<div class="sp-thumbnail">
<div class="sp-thumbnail-image-container">
</div>
<div class="sp-thumbnail-text">
<div class="sp-thumbnail-title">Sie benötigen ein<br />Schadengutachten?</div>
<div class="sp-thumbnail-description"><a class="unbind" href="http://www.google.de">Hier finden Sie Informationen</a></div>
</div>
</div>
</div>
</div>
</div>