<p>You'll need to send the new pageview to Google Analytics manually on your ajax success. You'll want to read the <a href="https://developers.google.com/analytics/devguides/collection/analyticsjs/sending-hits" rel="nofollow">Google documentation page</a>, but it can be as simple as added the following line where ga_page is the new url:</p>

<pre><code>ga( 'send', 'pageview', ga_page );
</code></pre>

CC BY-SA 3.0
2016-06-30T11:03:23.787Z
2016-06-30T11:03:23.787Z
Luke Pearce
<p>The way I am currently doing this @scott is passing back meta data in the ajax response as well.</p>

<p>Throwing in the Google Analytics line @luke suggested as well!</p>

<p><strong>Example Json object:</strong></p>

<pre><code>{
  "meta":{
      "title":"This is the default global title of the site pages. | My Website",
      "meta":{
        "name":{
          "keywords":"default,global,comma-separated,keywords",
          "description":"This is the default global natural language description of the content on the site pages.",
          "dcterms.Identifier":"http:\/\/mywebsite.com\/competition",
          "dcterms.Title":"This is the default global title of the site pages.",
          "dcterms.Subject":"default,global,comma-separated,keywords",
          "dcterms.Date":"2016-06-30",
          "dcterms.Description":"This is the default global natural language description of the content on the site pages."
        },
        "property":{
          "og:type":"website",
          "og:locale":"en_us",
          "og:url":"http:\/\/mywebsite.com\/competition",
          "og:title":"This is the default global title of the site pages.",
          "og:description":"This is the default global natural language description of the content on the site pages.",
          "og:site_name":"My Website"
        }
      },
      "link":{
        "rel":{
          "canonical":"http:\/\/mywebsite.com\/competition"
        }
      }
    },
}
</code></pre>

<p>Then loop through the meta data with JavaScript within you ajax success method. jQuery is used in this example.</p>

<p><strong>Example JS:</strong></p>

<pre><code>    $('head').find('title').text(meta.title);

    $.each(meta.link, function(k, v){
        $.each(v, function(kk, vv){
            $('head').find('link[' + k + '="' + kk + '"]').attr('href', vv);
        });
    });

    $.each(meta.meta, function(k, v){
        $.each(v, function(kk, vv){
            $('meta[' + k + '="' + kk + '"]').attr('content', vv);
        });
    });
</code></pre>

CC BY-SA 3.0
2016-06-30T13:13:04.323Z
Thanks for your reply. Okay so I understand (first time I've used AJAX or Json) I need to find a way for each page to generate a Json object. The JS sits on the _layout page and refreshes the head? How do I generate the object. Something like the prune plugin? That uses json_encode(). Or, am I way of the mark?
Scott Robinson
CC BY-SA 3.0
2016-06-30T15:15:45.917Z
Twig has json_encode [builtin](http://twig.sensiolabs.org/doc/filters/json_encode.html). Otherwise JSON is pretty easy to "encode" manually if you're only spitting out a few key/values.
RitterKnight
CC BY-SA 3.0
2016-06-30T15:31:52.160Z
I've managed to get get a Json object produced for each page. I can test it on the page by rendering with json_encode() | raw and it displays as your example. However, I can't get the javascript to replace the tags into the head. I'm assuming the JS can just be placed in the main layout?
Scott Robinson
CC BY-SA 3.0
2016-06-30T23:47:43.703Z
@scott the JS has to be fired from the ajax success method. So when you update the page contents you would also update the meta tags.
Fyrebase
CC BY-SA 3.0
2016-06-30T11:52:46.600Z
2016-06-30T23:49:12.210Z
2016-06-30T23:49:12.210Z
Fyrebase
<p>I was having difficultly getting the JS (that is responsible for AJAX page transitions) to read the Json object that the page generated. In the end I had to run a script on the page itself. For the un-JS savy people like me this is what went at the bottom of the page:</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(document).ready(function(){
    var jsonMeta = {{ jsonMeta|json_encode|raw }};
    $('head').find('title').text(jsonMeta.meta.title);
    $.each(jsonMeta.meta.link, function(k, v){
        $.each(v, function(kk, vv){
            $('head').find('link[' + k + '="' + kk + '"]').attr('href', vv);
        });
    });

    $.each(jsonMeta.meta.meta, function(k, v){
        $.each(v, function(kk, vv){
            $('meta[' + k + '="' + kk + '"]').attr('content', vv);
        });
    });
});
&lt;/script&gt;
</code></pre>

<p>An at the top I did this to get the Json object</p>

<pre><code>{% set jsonMeta = [] %}
{% set jsonMeta = jsonMeta | merge({
  "meta":{
    "title": entry.title,
  "meta":{
    "name":{
      "keywords":"keywords",
      "description": entry.journalBody|striptags|truncate(180),
      "author" : entry.author.fullName,
      "dcterms.Identifier": craft.request.url,
      "dcterms.Title": siteName,
      "dcterms.Subject":"keywords",
      "dcterms.Date": entry.dateUpdated.iso8601,
      "dcterms.Description": entry.journalBody|striptags|truncate(180)
    },
    "property":{
      "og:type":"website",
      "og:locale":"en_uk",
      "og:url": craft.request.url,
      "og:title": entry.journalBody|striptags|truncate(180),
      "og:description": entry.journalBody|striptags|truncate(180),
      "og:site_name": siteName,
      "article:published_time":entry.dateCreated.iso8601,
      "article:modified_time":entry.dateUpdated.iso8601



    }
  },
  "link":{
    "rel":{
      "canonical":craft.request.url
    }
  }
},
})
%}
</code></pre>

<p>No idea whether this is bad solution but it works.</p>

CC BY-SA 3.0
2016-07-01T10:14:07.050Z
2016-07-01T10:14:07.050Z
Scott Robinson
<p>I have created AJAX page transitions based on:</p>

<p><a href="https://designbycosmic.com/journal/craft-cms-ajax-page-transitions-with-history-pushstate" rel="noreferrer">https://designbycosmic.com/journal/craft-cms-ajax-page-transitions-with-history-pushstate</a></p>

<p>It's all working nicely, the main content of the site (everything except the header) is loaded through ajax with a page transition using velocity.js.</p>

<p>My question is how would I go about getting all the metadata (or intact any of the information stored in  to refresh for each page. At the moment the meta data is stuck with whatever is there when the browser loads.</p>

<p>I know this isn't specifically craft but any help would be appreciated.</p>

<p>Scott</p>

<ajax>
Refreshing meta data when using AJAX page transitions
# Refreshing meta data when using AJAX page transitions

(Asked by: username_0 on 2016-06-30)

I have created AJAX page transitions based on:

<https://designbycosmic.com/journal/craft-cms-ajax-page-transitions-with-history-pushstate>

It's all working nicely, the main content of the site (everything except the header) is loaded through ajax with a page transition using velocity.js.

My question is how would I go about getting all the metadata (or intact any of the information stored in to refresh for each page. At the moment the meta data is stuck with whatever is there when the browser loads.

I know this isn't specifically craft but any help would be appreciated.

Scott

**Tags:** ajax

---

## 3 answers

### Answer by username_1 on 2016-06-30. Score: 3

You'll need to send the new pageview to Google Analytics manually on your ajax success. You'll want to read the Google documentation page, but it can be as simple as added the following line where ga_page is the new url:
ga( 'send', 'pageview', ga_page );


---

### Answer by username_2 on 2016-06-30. Score: 2

The way I am currently doing this @scott is passing back meta data in the ajax response as well.
Throwing in the Google Analytics line @luke suggested as well!
Example Json object:
{
  "meta":{
      "title":"This is the default global title of the site pages. | My Website",
      "meta":{
        "name":{
          "keywords":"default,global,comma-separated,keywords",
          "description":"This is the default global natural language description of the content on the site pages.",
          "dcterms.Identifier":"http:\/\/mywebsite.com\/competition",
          "dcterms.Title":"This is the default global title of the site pages.",
          "dcterms.Subject":"default,global,comma-separated,keywords",
          "dcterms.Date":"2016-06-30",
          "dcterms.Description":"This is the default global natural language description of the content on the site pages."
        },
        "property":{
          "og:type":"website",
          "og:locale":"en_us",
          "og:url":"http:\/\/mywebsite.com\/competition",
          "og:title":"This is the default global title of the site pages.",
          "og:description":"This is the default global natural language description of the content on the site pages.",
          "og:site_name":"My Website"
        }
      },
      "link":{
        "rel":{
          "canonical":"http:\/\/mywebsite.com\/competition"
        }
      }
    },
}

Then loop through the meta data with JavaScript within you ajax success method. jQuery is used in this example.
Example JS:
    $('head').find('title').text(meta.title);

    $.each(meta.link, function(k, v){
        $.each(v, function(kk, vv){
            $('head').find('link[' + k + '="' + kk + '"]').attr('href', vv);
        });
    });

    $.each(meta.meta, function(k, v){
        $.each(v, function(kk, vv){
            $('meta[' + k + '="' + kk + '"]').attr('content', vv);
        });
    });

> **Comments:**
> **username_0**: Thanks for your reply. Okay so I understand (first time I've used AJAX or Json) I need to find a way for each page to generate a Json object. The JS sits on the _layout page and refreshes the head? How do I generate the object. Something like the prune plugin? That uses json_encode(). Or, am I way of the mark?  
> **username_3**: Twig has json_encode [builtin](http://twig.sensiolabs.org/doc/filters/json_encode.html). Otherwise JSON is pretty easy to "encode" manually if you're only spitting out a few key/values.  
> **username_0**: I've managed to get get a Json object produced for each page. I can test it on the page by rendering with json_encode() | raw and it displays as your example. However, I can't get the javascript to replace the tags into the head. I'm assuming the JS can just be placed in the main layout?  
> **username_2**: @scott the JS has to be fired from the ajax success method. So when you update the page contents you would also update the meta tags.  

---

### Answer by username_0 on 2016-07-01. Score: 1

I was having difficultly getting the JS (that is responsible for AJAX page transitions) to read the Json object that the page generated. In the end I had to run a script on the page itself. For the un-JS savy people like me this is what went at the bottom of the page:


An at the top I did this to get the Json object
{% set jsonMeta = [] %}
{% set jsonMeta = jsonMeta | merge({
  "meta":{
    "title": entry.title,
  "meta":{
    "name":{
      "keywords":"keywords",
      "description": entry.journalBody|striptags|truncate(180),
      "author" : entry.author.fullName,
      "dcterms.Identifier": craft.request.url,
      "dcterms.Title": siteName,
      "dcterms.Subject":"keywords",
      "dcterms.Date": entry.dateUpdated.iso8601,
      "dcterms.Description": entry.journalBody|striptags|truncate(180)
    },
    "property":{
      "og:type":"website",
      "og:locale":"en_uk",
      "og:url": craft.request.url,
      "og:title": entry.journalBody|striptags|truncate(180),
      "og:description": entry.journalBody|striptags|truncate(180),
      "og:site_name": siteName,
      "article:published_time":entry.dateCreated.iso8601,
      "article:modified_time":entry.dateUpdated.iso8601



    }
  },
  "link":{
    "rel":{
      "canonical":craft.request.url
    }
  }
},
})
%}

No idea whether this is bad solution but it works.


---

