Tuesday, July 10, 2018

phpMyPassion

How To Work With Google Tag Manager (GTM) ?

I found most of the developers found a common problem of adding a tag code, snippets, pixels or script tag to their websites by that they can track events, re marketing, conversions, analytics and more. Google Tag Manager (GTM) introduce to resolve developers or publishers this type of issue. Google Tag Manager (GTM) makes you possible to add or update tags without having help of your developer.
Google Tag Manager (GTM) provides a full control to their users over how your tags are defined and when should fire. GTM quite easy to learn and much simple to manage if you understand the basics and flow of using that. If you're an SEO and you are managing tracking codes of multiple clients then its good time to start with GTM without having any delay.

More in-depth GTM features

Google Tag Manager has a lot more advanced features and details, like layers and setting up administrators/users. You can find information on all Google Tag Manager features on Google Tag Manager’s help section.

Google Tag Manager (GTM) is large Topic, so here I am sharing the full article on basic of Google Tag Manager (GTM)

Start Learning with Google Tag Manager -

Follow below steps to start with GTM -

Step 1 : Login with GTM

To start using GTM, visit the Google Tag Manager login page. When you click login you will find below page

Step 2 : Setup Accounts for GTM


The first thing to do is give your account a name. You’ll want to name your account with the name of your company so that you can find and manage each of the sites you have in GTM. It’s generally recommended that you have one account per company and one container per site.

Once you have your account set up, you will create your first container. Give your container a name and indicate where you want to use the container: website, iOS, Android or AMP.


Click on create once you’ve chosen your container location, and agree to the Terms of Service, you are ready to install google tag manager.

Step 3 : Install Google Tag Manager Container 

Next you will be given two pieces of script to put on your site as below:


The Google Tag Manager snippet code has two blocks - one block has script tag on has noscript  tag. 
The Google Tag Manager snippet code must be placed on every page of your website. Google cautions you not to put code in a hidden iframe and not to use another tag management system while using GTM (It can cause issues).
Once you’ve added your both GTM snippet code to your site, Google Tag Manager is ready to go.

As your containers grow over time, it can get difficult to track all your tags, triggers and variables. GTM allows you to create folders to help you organize. With folders, you can organize your tags in groupings so it’ll be easier to update and manage as needed.

Step 4 : Setting up triggers

Tags typically execute, or “fire,” when a web page loads or when some other user interaction occurs. In Google Tag Manager, you define triggers with tags to tell GTM when a tag should fire. A great example of a trigger is the “Page View” trigger, which can be used if you want to have your tag fire when a specific page loads.
You will want to tell GTM what to do when a certain action is taken by a user. Setting up triggers is easy to do — you just choose the trigger type:


Step 5 : Setting up variables

Variables help define triggers and what data they send. For instance, you could set up a variable when someone goes to a specific page or clicks on a checkout button or download page.

Step 6 : Previewing Workspace

You can test your changes by setting up your GTM workspace on previewing mode. 




Step 7 : Remember to publish

Once you have tested your changes to GTM, remember to publish your workspace. your changes will not work until you publish your workspace. So always do remember after added or edited tags, triggers and variables in a workspace, you have to publish:

With a little bit more learning and practising, you’ll find that managing the tracking code you use will be much easier and more efficient thanks to Google Tag Manager.

little bit content source : outshine.com
Read More

Monday, June 25, 2018

phpMyPassion

How to Create a Scroll To Top With Some Delay Using JavaScript ?

Here I am sharing the code for scrolling a page from bottom to top with some delay. You can also use that to reach or show first error element box in your specified form.


Show First Scrolled Error Element Box on Submit :-


you can use below jQuery code to scroll on the first error element box on submit -

$('html, body').animate({
                scrollTop: $(validator.errorList[0].element).offset().top-300            }, 2000);

Above code will work for the form group on submit. for an example below -

$("#submit").on('click', function () {

    var validator = $("#form").validate({
        rules: {
           name: {
                required: true,
                maxlength: 50            },
        },
        messages: {
            nam: {
                required: "This field is required.",
                maxlength: "name must be less than 50 character.",
            }
        },
        highlight: function (element) {
            $(element).closest('.form-group').removeClass('success').addClass('has-error control-label');
            /*scroll to first error element box */
            $('html, body').animate({
                scrollTop: $(validator.errorList[0].element).offset().top-300            }, 2000);
        },
        success: function (element) {
            element.addClass('valid').closest('.form-group').removeClass('has-error control-label').addClass('success');
        }

    });
}

Above code will scroll you back to your first error input box with animation.

Animated scroll back to top for a specified element ID :-

If you want to scroll back to  a specified element Id on some event then you can use below code -

$('html, body').animate({
    scrollTop: $("#elementId").offset().top-300}, 2000);


.scrollTop() jQuery Function :-

You can also use .scrollTop() function to scroll bottom to top on a page.

Note:- .scrollTop() function does not accept any arguments.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>My wep page scrollTop demo with jquery</title>
  <style>
  div {
    margin: 10px;
    padding: 5px;
    border: 2px solid #666;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div>Dashboard</div><div></div>
 
<script>
var div = $( "div:first" );
$( "div:last" ).text( "scrollTop:" + div.scrollTop() );
</script>
 
</body>
</html>

Read More

Saturday, June 23, 2018

phpMyPassion

How To Get Current Route Name Path in Laravel 5.4 ?


Here I am going to share you problem that most of the laravel beginner found when developed a project with laravel. You can get to know about the solution for the issue 'get current route name path in laravel 5.4' with this article.

Get Current Route Name Path From view (blade template) -

You can get the current route name path from view (blade template) by using below code -

{{ url()->current() }} // It will return route name with url

{{ Request::path() }} // It will return only route name like - route-name

It will return the current active route name path like -

             " http://your-app-url/route-name "

Get Current Route Name Path From Controller/Model -

You can also get the current route name path from controller / model by using below code -

Another option, if you have the "Request $request" object (which you probably do if you used dependency injection in the controller), then you can just do this:

$request->url()


Note that that's the URL without any query (GET) variables. These are also useful depending on what you want:

// Get current route name path
url()->current();
// Full URL, with query string $request->fullUrl() // Just the path part of the URL $request->path() // Just the root (protocol and domain) part of the URL) $request->root()

Above methods also work from the "Request::" facade.
Read More

Friday, June 15, 2018

Anil kr Prajapati

How to get current Date and Time using JavaScript || JavaScript Date Formats




This tutorial shows, how can you get the current date and time in JavaScript. Use the following JavaScript code to get current date and time with Y-m-dand H:i:s format.


JavaScript Date object help us to work with date type of strings. Use new Date() to create a new object with current date and time.
var today = new Date();
You can get current date from Date object in Y-m-d format.
var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
You can get current time from Date object in H:i:s format.
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
You can  get current date and time from Date object in Y-m-d H:i:s format.
var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var dateTime = date+' '+time;

JavaScript Date Format :-

There are 4 types of JavaScript date input formats.
  1. ISO Dates
  2. Long Dates
  3. Short Dates
  4. Full Format

JavaScript ISO Dates -

ISO 8601 is the international standard for the representation of dates and times.

The ISO 8601 syntax (YYYY-MM-DD) is more preferred JavaScript date format. 

Syntax as below: 

var date_o = new Date("2015-03-25");



JavaScript Short Dates -

Here short dates are written differently with an formate "MM/DD/YYYY" syntax as below:

var date_o = new Date("03/25/2015");


JavaScript Long Dates-

Here long dates are most often written with a "MMM DD YYYY" syntax as below:

var date_o = new Date("Mar 25 2015");


Full Date Format -

JavaScript accept date strings in the format of "full JavaScript format": syntax as like this ;:

var date_o = new Date("Fri Mar 25 2015 09:56:24 GMT+0100 (Tokyo Time)");

Read More

Thursday, March 29, 2018

phpMyPassion

jQuery Core - All Version List || jQuery Version


Here I am sharing jQuery version list.

jQuery Core & Migrate - Git Builds

UNSTABLE, NOT FOR PRODUCTION

jQuery Core - All 3.x Versions

jQuery Core - All 2.x Versions

jQuery Core - All 1.x Versions

jQuery Migrate - All Versions

Credit : code.jquery.com

Read More